<template>
  <el-tabs
    class="service_info_tab"
    type="border-card"
    v-model="serviceTabsActiveName"
    :stretch="true"
    style="margin-top: 20px;"
  >
    <el-tab-pane label="服务详情信息" name="first">
      <ul class="service_info" v-if="fwxqxxDatas">
        <li
          class="fwxqxx_item"
          v-for="(item, index) in fwxqxxDatas"
          :key="'fwxqxx_' + index"
        >
          <h3 class="fwxqxx_title" v-text="'· ' + item.name"></h3>
          <servive-step
            v-if="item.type == 'step'"
            style="margin: 0 20px;"
          ></servive-step>
          <p
            v-else-if="item.type == 'text'"
            class="fwxqxx_text"
            v-text="item.value"
          ></p>
          <ul v-else-if="item.type == 'list'">
            <li
              v-for="(v, i) in item.value"
              :key="'fwxqxx_li_' + index + '_' + i"
            >
              <p class="fwxqxx_text">
                <span v-text="v.name + '：'"></span>
                <span v-text="v.value"></span>
              </p>
            </li>
          </ul>
          <el-table
            v-else-if="item.type == 'table'"
            class="fwxqxx_table"
            :data="item.value.datas"
            border
          >
            <el-table-column
              type="index"
              :index="(index) => index + 1"
              align="center"
            >
            </el-table-column>
            <el-table-column
              v-for="(v, i) in item.value.columns"
              :key="'table_column_' + index + '_' + i"
              :prop="v.prop"
              :label="v.label"
              :align="v.align || 'left'"
            ></el-table-column>
          </el-table>
          <el-table
            v-else-if="item.type == 'table2'"
            class="fwxqxx_table fwxqxx_table_2"
            :data="item.value.datas"
            border
          >
            <el-table-column prop="name" label="" align="right" width="200">
              <template slot-scope="scope">
                <span v-text="scope.row.name + '：'"></span>
              </template>
            </el-table-column>
            <el-table-column prop="value" label="">
              <template slot-scope="scope">
                <pre
                  v-if="scope.row.type == 'code'"
                  v-html="scope.row.value"
                ></pre>
                <span v-else v-text="scope.row.value"></span>
              </template>
            </el-table-column>
          </el-table>
        </li>
      </ul>
    </el-tab-pane>
    <el-tab-pane label="规格定价" name="second">
      <div class="service_info" v-if="ggdjData">
        <div class="ggdj_header">
          <span>购买方式：</span>
          <el-button-group>
            <el-button type="danger">
              按月
            </el-button>
            <el-button type="default">
              按年
            </el-button>
          </el-button-group>
        </div>
        <el-table class="ggdj_table" :data="ggdjData" border>
          <el-table-column prop="gg" label="规格"></el-table-column>
          <el-table-column prop="ggsm" label="规格说明"></el-table-column>
        </el-table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="提供机构" name="third">
      <div class="service_info" v-if="tgjgData">
        <p class="tgjg_dw" v-text="tgjgData.name"></p>
        <div class="tgjg_img">
          <img :src="tgjgData.img" width="100%" />
        </div>
        <div class="tgjg_lxfs">
          <p>联系人：<span v-text="tgjgData.lxr"></span></p>
          <p>联系电话：<span v-text="tgjgData.lxdh"></span></p>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="服务评价信息" name="fourth">
      <div class="service_info" v-if="ffpjxxData">
        <div class="fwpjxx_score">
          <div class="fwpjxx_score_left">
            <p v-text="ffpjxxData.baseInfo.score + '分'"></p>
            <p>满分5分</p>
            <p v-text="'共' + ffpjxxData.baseInfo.total + '个评分'"></p>
          </div>
          <ul class="fwpjxx_score_right">
            <li
              class="fwpjxx_score_item"
              v-for="(item, index) in ffpjxxData.baseInfo.starInfo"
              :key="'star_info_' + index"
            >
              <el-rate
                :value="item.star"
                disabled
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate>
              <el-progress
                :percentage="item.percent"
                :show-text="false"
              ></el-progress>
            </li>
          </ul>
        </div>
        <ul class="fwpjxx_items">
          <li
            class="fwpjxx_item"
            v-for="(item, index) in ffpjxxData.ffpjxxList"
            :key="'fwpjxx_' + index"
          >
            <el-avatar :size="60" :src="item.img"> </el-avatar>
            <div class="fwpjxx_content">
              <p>
                <span v-text="item.name"></span>
                <el-rate
                  :value="item.star"
                  disabled
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
                <span v-text="item.time"></span>
              </p>
              <p v-text="item.description"></p>
            </div>
          </li>
        </ul>
        <div class="fwpjxx_pages">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="ffpjxxData.baseInfo.total"
          ></el-pagination>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// @ is an alias to /src
import Commodity from "@/components/commodity.vue";
import BlockRadius from "@/components/block-radius";
import serviveStep from "@/components/servive-step";
export default {
  components: {
    Commodity,
    BlockRadius,
    serviveStep,
  },
  data: () => ({
    serviceTabsActiveName: "first",
    fwxqxxDatas: null, // 服务详情信息
    ggdjData: null, // 规格定价
    tgjgData: null, // 提供机构
    ffpjxxData: null, // 服务评价信息
  }),
  methods: {
    getDataFromApi(_url) {
      return new Promise((resolve, reject) => {
        this.$http
          .get(_url)
          .then((response) => {
            resolve(response.body);
          })
          .catch(function(error) {
            reject(error);
          });
      });
    },
    init() {
      this.getDataFromApi(`/static/serviceInfo.json`).then(
        ({ fwxqxxDatas, ggdjData, tgjgData, ffpjxxData }) => {
          this.fwxqxxDatas = fwxqxxDatas;
          this.ggdjData = ggdjData;
          this.tgjgData = tgjgData;
          this.ffpjxxData = ffpjxxData;
        },
        (error) => {
          console.log(error);
        }
      );
    },
  },
  created() {
    this.init();
  },
};
</script>

<style scoped>
.service_info {
  min-height: 500px;
  padding: 10px 20px;
  box-sizing: border-box;
  /* background-color: #eee; */
}
.service_info .fwxqxx_item {
  margin-bottom: 20px;
}
.service_info .fwxqxx_item > .fwxqxx_title {
  font-size: 13px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 5px;
}
.service_info .fwxqxx_item > .fwxqxx_text {
  font-size: 16px;
  line-height: 24px;
  color: #333;
}
.service_info .fwxqxx_item > .fwxqxx_table {
  width: 100%;
}
.service_info .ggdj_header {
  margin-bottom: 10px;
}
.service_info .ggdj_table {
  width: 100%;
}
.service_info .tgjg_dw {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 10px;
}
.service_info .tgjg_img {
  width: 400px;
  margin-bottom: 10px;
}
.service_info .tgjg_lxfs {
  font-size: 16px;
  line-height: 24px;
}
.service_info .fwpjxx_score {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 0;
}
.service_info .fwpjxx_score > .fwpjxx_score_left {
  flex-shrink: 0;
  margin-right: 20px;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(1) {
  font-size: 32px;
  font-weight: bold;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(2) {
  font-size: 14px;
  color: #333;
}
.service_info .fwpjxx_score > .fwpjxx_score_left > p:nth-child(3) {
  font-size: 18px;
  color: #ccc;
}
.service_info .fwpjxx_score > .fwpjxx_score_right {
  flex-grow: 1;
}
.service_info .fwpjxx_score_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  max-width: 480px;
}
.service_info .fwpjxx_score_item > .el-progress {
  flex-grow: 1;
  margin-left: 10px;
}
.service_info .fwpjxx_item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
}
.service_info .fwpjxx_item > .el-avatar {
  flex-shrink: 0;
  margin-right: 20px;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  color: #999;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(1) > .el-rate {
  margin: 0 60px 0 30px;
}
.service_info .fwpjxx_item > .fwpjxx_content > p:nth-child(2) {
  font-size: 18px;
  color: #666;
}
.service_info .fwpjxx_pages {
  text-align: center;
  margin: 20px 0 10px;
}
</style>

<style>
.fwpjxx_score_item .el-progress-bar__outer {
  background: #fff;
}
.fwxqxx_table_2 .el-table__header-wrapper {
  display: none;
}
</style>
