<template>
  <el-tabs
    v-model="serviceTabsActiveName"
    type="card"
    @tab-click="handleClick"
    style="margin-top: 20px;"
  >
    <el-tab-pane label="服务详情信息" name="first">
      <ul class="service_info">
        <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">
        <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">
        <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">
        <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: [
      {
        name: "获取流程",
        type: "step",
      },
      {
        name: "服务说明",
        type: "text",
        value:
          "提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务提供贵州应急资源空间分布展示的专题地图服务",
      },
      {
        name: "服务属性",
        type: "list",
        value: [
          {
            name: "大小",
            value: "66kb",
          },
          {
            name: "API",
            value: "Java",
          },
          {
            name: "用途",
            value: "即用型",
          },
          {
            name: "空间范围（WGS84）",
            value: "未设置",
          },
          {
            name: "标签",
            value: "T003 智能地图 T001",
          },
          {
            name: "制作单位",
            value: "应急管理厅",
          },
          {
            name: "离线模式",
            value: "禁用",
          },
          {
            name: "附加代码",
            value: "无",
          },
        ],
      },
      {
        name: "字段说明",
        type: "table",
        value: {
          datas: [
            {
              zdmc: "排名",
              zdbm: "grade",
              zdlx: "string",
              zdms: "企业水路货物周转量排名",
              slz: "1",
            },
            {
              zdmc: "同比增长",
              zdbm: "increase",
              zdlx: "string",
              zdms: "同比增长量信息",
              slz: '"100%"',
            },
          ],
          columns: [
            {
              prop: "zdmc",
              label: "字段名称",
            },
            {
              prop: "zdbm",
              label: "字段编码",
              align: "center",
            },
            {
              prop: "zdlx",
              label: "字段类型",
              align: "center",
            },
            {
              prop: "zdms",
              label: "字段描述",
            },
            {
              prop: "slz",
              label: "示例值",
              align: "center",
            },
          ],
        },
      },
      {
        name: "接口详情信息",
        type: "table2",
        value: {
          datas: [
            {
              name: "接口地址",
              value: "/cigservice/baseservice/fillder/turnover",
              type: "text",
            },
            {
              name: "请求方式",
              value: "GET",
              type: "text",
            },
            {
              name: "编码格式",
              value: "UTF-8",
              type: "text",
            },
            {
              name: "接口编码",
              value: "turnover",
              type: "text",
            },
            {
              name: "接口描述",
              value: "水路货运周转量排名",
              type: "text",
            },
            {
              name: "请求参数",
              value: "无请求参数",
              type: "text",
            },
            {
              name: "响应参数",
              value: "无响应参数",
              type: "text",
            },
            {
              name: "响应示例",
              value: `
                {
                  success: 1,
                  data: [
                    {
                      data: [
                        { 
                          grade: "19", 
                          increase: "100%"
                        }
                      ],
                      column: [
                        { 
                          title: "排名", 
                          key: "grade"
                        },
                        { 
                          title: "同比增长",
                           key: "increase"
                        },
                      ],
                    },
                  ],
                }
              `,
              type: "code",
            },
            {
              name: "请求示例NodeJs",
              value: `
                var http = require("http");
                var options = {
                  "method": "GET",
                  "hostname": "www.giscloud.cx",
                  "port": "80",
                  "path": "/cigservice/baseservice/fillder/turnover",
                  "headers": {
                    "Content-Type":"application/x-www-form-urlencoded",
                    "charset":"utf-8"
                  }
                };
                var req = http.request(options, function (res) {
                  var chunks = [];
                  res.on("data", function (chunk) {
                  chunks.push(chunk);
                  });
                  res.on("end", function () {
                    var body = Buffer.concat(chunks);
                    console.log(body.toString());
                  });
                });
                req.end();
              `,
              type: "code",
            },
          ],
        },
      },
      {
        name: "微服务响应列表",
        type: "table",
        value: {
          datas: [
            {
              name: "apaas-mapvideos",
              description: "地图视频融合应用服务",
            },
            {
              name: "apaas-mapvideos",
              description: "地图视频融合应用服务",
            },
          ],
          columns: [
            {
              prop: "name",
              label: "*微服务名称",
            },
            {
              prop: "description",
              label: "微服务描述",
              align: "center",
            },
          ],
        },
      },
    ], // 服务详情信息
    ggdjData: [
      {
        gg: "访问次数：20/日 访问量：100/日",
        ggsm:
          "用户服务申请通过审核确认后，每日可对水路货物周转量情况进行20次免费访问，获取100条数据记录。",
      },
      {
        gg: "访访问次数：200/日 访问量：1000/日",
        ggsm:
          "用户服务申请通过审核确认并完成付费后，每日可对水路货物周转量情况进行200次访问，获取1000条数据记录。",
      },
      {
        gg: "访问次数：无上限 访问量",
        ggsm: "",
      },
    ], // 规格定价
    tgjgData: {
      name: "贵州省交通运输厅",
      img:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      lxr: "张先生",
      lxdh: "010-66666666",
    }, // 提供机构
    ffpjxxData: {
      baseInfo: {
        score: 3.5,
        total: 23,
        starInfo: [
          {
            star: 5,
            percent: 40,
          },
          {
            star: 4,
            percent: 30,
          },
          {
            star: 3,
            percent: 20,
          },
          {
            star: 2,
            percent: 10,
          },
          {
            star: 1,
            percent: 0,
          },
        ],
      },
      ffpjxxList: [
        {
          name: "禺彊",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 5,
          description: "这个应用非常实用，可以应用到多个业务领域！",
          time: " 2019-12-12",
        },
        {
          name: "海纳",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 5,
          description:
            "赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
        {
          name: "左宜",
          img:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          star: 3,
          description: "赞！",
          time: " 2019-12-12",
        },
      ],
    }, // 服务评价信息
  }),
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  mounted() {},
};
</script>

<style scoped>
.service_info {
  width: 80%;
  padding: 10px 20px;
  margin: 0 auto;
  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>
