<template>
  <div class="service_info_tab">
    <!-- 服务详情信息 -->
      <service-tab-detail
        class="service_info"
        :data="detailData"
      ></service-tab-detail>
    <!-- 服务评价信息 -->
      <p class="pj_title">评价信息：</p>
      <service-tab-comments
        class="service_info"
        :data="commentsData"
        :url="commentsUrl"
        :is_app_detail="is_app_detail"
      ></service-tab-comments>
  </div>
</template>

<script>
import serviceTabDetail from "@/components/service-tabs/service-tab-detail";
import serviceTabComments from "@/components/service-tabs/service-tab-comments";

export default {
  components: {
    serviceTabDetail,
    serviceTabComments,
  },
  props: {
    detailTitle: {
      type: String,
      default: () => "服务详情信息",
    },
    specificationTitle: {
      type: String,
      default: () => "规格说明",
    },
    providerTitle: {
      type: String,
      default: () => "服务机构及规格信息",
    },
    commentsTitle: {
      type: String,
      default: () => "服务评价信息",
    },
    detailData: {
      type: Array,
    },
    serviceRequestSpcs: {
      type: Object,
    },
    providerData: {
      type: Object,
    },
    commentsData: {
      type: Object,
    },
    commentsUrl: {
      type: String,
    },
    is_app_detail: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    tabName: "detail",
  }),
  methods: {},
};
</script>

<style scoped>
.service_info_tab {
  border: none;
  box-shadow: 0px 4px 8px 0px 
		rgba(0, 7, 101, 0.04);
	border-radius: 8px;
  margin-bottom: 30px;
  overflow: hidden;
  background-color: #fff;
}
.pj_title {
    padding: 0 50px;
    font-size: 14px;
    color: #8890a7;
}
.service_info {
  padding: 35px 40px 40px;
  box-sizing: border-box;
}
.service_tab-comments {
  padding: 35px 20px 20px !important;
}
</style>

<style>
.service_info_tab.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
.service_info_tab.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  height: 65px !important;
  line-height: 59px !important;
  background-color: #fff;
  border-top: 4px solid #fff;
  border-bottom: 2px solid #f4f7fc;
  font-size: 15px;
  font-weight: normal;
}
.service_info_tab.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active {
  border-top: 4px solid #fff;
  border-right: 2px solid #f4f7fc;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #f4f7fc;
  border-radius: 6px 6px 0 0;
  color: #e56600 !important;
  font-size: 15px;
  font-weight: normal;
  position: relative;
}
.service_info_tab.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active::before {
  content: "";
  position: absolute;
  width: calc(100% + 3px);
  height: 4px;
  background-color: #f5ab4c;
  border-radius: 4px 4px 0 0;
  left: -2px;
  top: -3px;
}
.service_info_tab.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:first-child {
  border-left: none;
}
.service_info_tab.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:last-child {
  border-right: none;
}
.service_info_tab .el-table th > .cell {
  color: #1a2236;
}
.service_info_tab .el-table td,
.service_info_tab .el-table th.is-leaf {
  border: none !important;
  line-height: 23px;
}
.service_info_tab .el-table::before {
  display: none;
}
.service_info_tab .el-table {
  width: 100%;
  text-align: left;
}
.service_info_tab .el-table__row:nth-child(odd) td {
  background-color: #f8f9fd;
}
.service_info_tab .detail-list .el-table__header-wrapper {
  display: none;
}
.service_info_tab .detail-list .el-table__row td {
  color: #58617a;
}
.service_info_tab .detail-list .el-table__row td:first-child {
  font-weight: bold;
  color: #1a2236;
}
.service_info_tab .detail-list .el-table__row:nth-child(even) td {
  background-color: #f8f9fd;
}
.service_info_tab .detail-list .el-table__row:nth-child(odd) td {
  background-color: #fff;
}
.service_info_tab.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  color: #e56600;
}
</style>
