<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="providerTitle" name="provider" v-if="providerData">
      <service-tab-provider
        class="service_info"
        :data="providerData"
        :isApp="detailTitle == '应用详情信息'"
      ></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"
        :is_app_detail="is_app_detail"
      ></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,
    },
    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;
}
.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>
