<template>
  <div class="sevice_detail">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
        <el-breadcrumb-item to="/shop/data_service_list/5">
          数据服务
        </el-breadcrumb-item>
        <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <service-info :data="baseInfo" v-if="baseInfo"></service-info>

    <service-tabs
      :detail-data="detailData"
      :specification-data="specificationData"
      :provider-data="providerData"
      :comments-data="commentsData"
      :comments-url="commentsUrl"
    ></service-tabs>
  </div>
</template>

<script>
import serviceInfo from "@/components/service-info/service-info";
import serviceTabs from "@/components/service-tabs/service-tabs";

export default {
  components: {
    serviceInfo,
    serviceTabs,
  },
  data: () => ({
    baseInfo: null,
    detailData: null,
    specificationData: null,
    providerData: null,
    commentsData: null,
  }),
  computed: {
    id() {
      return this.$route.params.id;
    },
    commentsUrl() {
      return `/apaas/serviceapp/v3/servicemarket/estimates?serviceId=${this.id}`;
    },
  },
  methods: {
    init() {
      this.$http
        .get("/apaas/serviceapp/v3/servicemarket/detail", {
          params: {
            serviceId: this.id,
          },
        })
        .then(({ data }) => {
          let datas = data.data;
          let specificationData = datas.serviceRequestSpcs.map((item) => ({
            id: item.id,
            type: item.type,
            name: `访问次数：${item.pv}/日 访问量：${item.count}/日`,
            descript: item.des,
          }));

          this.baseInfo = {
            service_id: this.id,
            app_id: 0,
            name: datas.name,
            // type: "",
            openness: datas.openness,
            view_count: datas.view_count,
            apply_count: datas.apply_count,
            // cover: "",
            organization_name: datas.organization_name,
            create_time: datas.create_time,
            update_date: datas.update_date,
            sectors_name: datas.sectors_name,
            data_service_type3_str: datas.data_service_type3_str,
            descript: datas.descript,
            serviceRequestSpcs: specificationData,
          };

          this.detailData = [
            {
              name: "获取流程",
              type: "step",
              value: ["服务申请", "信息填写", "审核确认", "服务获取"],
            },
            {
              name: "服务描述",
              type: "text",
              value: datas.descript,
            },
            {
              name: "请求方式",
              type: "text",
              value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
            },
            {
              name: "编码格式",
              type: "text",
              value: datas.encode_method,
            },
            {
              name: "请求参数",
              type: "table",
              value: {
                datas: JSON.parse(datas.req_fields),
                columns: [
                  {
                    prop: "name",
                    label: "字段编码",
                    align: "center",
                    width: 240,
                  },
                  {
                    prop: "label",
                    label: "字段名称",
                    align: "center",
                    width: 180,
                  },
                  {
                    prop: "field_type",
                    label: "字段类型",
                    align: "center",
                    width: 180,
                  },
                  {
                    prop: "descript",
                    label: "字段说明",
                  },
                  {
                    prop: "is_must",
                    label: "是否必须",
                    align: "center",
                    width: 180,
                  },
                  {
                    prop: "example",
                    label: "示例值",
                    align: "center",
                    width: 180,
                  },
                ],
              },
            },
            {
              name: "响应参数",
              type: "table",
              value: {
                datas: JSON.parse(datas.res_fields),
                columns: [
                  {
                    prop: "name",
                    label: "字段编码",
                    align: "center",
                    width: 240,
                  },
                  {
                    prop: "label",
                    label: "字段名称",
                    align: "center",
                    width: 180,
                  },
                  {
                    prop: "field_type",
                    label: "字段类型",
                    align: "center",
                    width: 180,
                  },
                  {
                    prop: "descript",
                    label: "字段说明",
                  },
                ],
              },
            },
          ];
          this.specificationData = specificationData;
          this.providerData = {
            organization_name: datas.organization_name,
            picture_path: datas.picture_path,
            user_name: "张先生",
            phone: "010-66666666",
          };
          this.commentsData = datas.scoreDetail;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  mounted() {
    this.init();
  },
};
</script>
