<template>
  <el-tabs
    class="service_info_tab"
    type="border-card"
    v-model="tabName"
    :stretch="true"
  >
    <!-- 服务详情信息 -->
    <el-tab-pane :label="detailTitle" name="detail" v-if="detailData">
      <service-tab-detail
        class="service_info"
        :data="detailData"
      ></service-tab-detail>
    </el-tab-pane>

    <!-- 规格定价 -->
    <el-tab-pane
      :label="specificationTitle"
      name="specification"
      v-if="specificationData"
    >
      <service-tab-specification
        class="service_info"
        :data="specificationData"
      ></service-tab-specification>
    </el-tab-pane>

    <!-- 提供机构 -->
    <el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
      <service-tab-provider
        class="service_info"
        :data="providerData"
      ></service-tab-provider>
    </el-tab-pane>

    <!-- 服务评价信息 -->
    <el-tab-pane :label="commentsTitle" name="comments" v-if="commentsUrl">
      <service-tab-comments
        class="service_info"
        :data="commentsData"
        :url="commentsUrl"
      ></service-tab-comments>
    </el-tab-pane>
  </el-tabs>
</template>

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

export default {
  components: {
    serviceTabDetail,
    serviceTabSpecification,
    serviceTabProvider,
    serviceTabComments,
  },
  props: {
    detailTitle: {
      type: String,
      default: () => "服务详情信息",
    },
    specificationTitle: {
      type: String,
      default: () => "规格定价",
    },
    providerTitle: {
      type: String,
      default: () => "提供机构",
    },
    commentsTitle: {
      type: String,
      default: () => "服务评价信息",
    },
    detailData: {
      type: Array,
      default: () => [],
    },
    specificationData: {
      type: Array,
      default: () => [],
    },
    providerData: {
      type: Object,
      default: () => {},
    },
    commentsData: {
      type: Object,
      default: () => {},
    },
    commentsUrl: {
      type: String,
      default: () => [],
    },
  },
  data: () => ({
    tabName: "detail",
  }),
  methods: {},
};
</script>

<style scoped>
.service_info_tab {
  border: none;
  box-shadow: none;
  margin-bottom: 40px;
}
.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;
}
.service_info_tab.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item.is-active {
  border-top: 4px solid #f5ab4c;
  border-right: 2px solid #fcefd6;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fcefd6;
  color: #e56600 !important;
}
.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%;
}
.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;
}
</style>
