<template>
  <el-tabs
    class="service_info_tab"
    type="border-card"
    v-model="tabName"
    :stretch="true"
  >
    <el-tab-pane label="服务详情信息" name="detail" v-if="detailUrl">
      <service-tab-detail
        class="service_info"
        :url="detailUrl"
      ></service-tab-detail>
    </el-tab-pane>
    <el-tab-pane label="规格定价" name="specification" v-if="specificationUrl">
      <service-tab-specification
        class="service_info"
        :url="specificationUrl"
      ></service-tab-specification>
    </el-tab-pane>
    <el-tab-pane label="提供机构" name="provider" v-if="providerUrl">
      <service-tab-provider
        class="service_info"
        :url="providerUrl"
      ></service-tab-provider>
    </el-tab-pane>
    <el-tab-pane label="服务评价信息" name="comments" v-if="commentsUrl">
      <service-tab-comments
        class="service_info"
        :url="commentsUrl"
      ></service-tab-comments>
    </el-tab-pane>
  </el-tabs>
</template>

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

export default {
  components: {
    serviceTabDetail,
    serviceTabSpecification,
    serviceTabProvider,
    serviceTabComments,
  },
  props: {
    detailUrl: {
      type: String,
      default: () => "",
    },
    specificationUrl: {
      type: String,
      default: () => "",
    },
    providerUrl: {
      type: String,
      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;
}
.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>
