<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/comprehensive_app_list/11">
          融合服务
        </el-breadcrumb-item>
        <el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

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

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

<script>
import serviceInfo from "@/components/service-info/service-info";
import serviceTabs from "@/components/service-tabs/service-tabs";
import serviceBox from "@/components/service-box"
export default {
  components: {
    serviceInfo,
    serviceTabs,
    serviceBox,
  },
  data: () => ({
    baseInfo: null,
    detailData: [],
    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;
          this.baseInfo = {
            service_id: this.id,
            app_id: 0,
            name: datas.name,
            type:datas.data_service_type2_name=="流程类"?"workflow":"",
            workflows_id:datas.data_service_type2_name=="流程类"?datas.workflows_id:"",
            openness: datas.openness,
            view_count: datas.view_count,
            apply_count: datas.apply_count,
            cover: datas.cover,
            organization_name: datas.organization_name,
            create_time: datas.create_time,
            update_date: datas.update_date,
            sectors_name: datas.sectors_name,
            data_service_type: [
              datas.data_service_type1_name,
              datas.data_service_type2_name,
              datas.data_service_type3_name,
            ],
            descript: datas.descript,
            serviceRequestSpcs: datas.serviceRequestSpcs || {spcs_type_1: [],spcs_type_2: []},
            scoreDetail: datas.scoreDetail,
            month_sale: datas.month_sale,
            user_name: datas.register_user_info.user_name,
            phone: datas.register_user_info.phone,
          };
          this.detailData = [
            {
              name: "获取流程",
              type: "step",
              value: ["服务申请", "信息填写", "审核确认", "服务获取"],
            },
            // {
            //   name: "服务信息",
            //   type: "table-list",
            //   value: {
            //     data_service_type1_name: datas.data_service_type1_name,
            //     data_service_type2_name: datas.data_service_type2_name,
            //     sectors_name: datas.sectors_name,
            //     create_time: datas.create_time,
            //     update_date: datas.update_date,
            //     req_type: ["-", "GET", "POST", "PUT", "DELETE"][
            //       datas.req_type || 0
            //     ],
            //     encode_method: datas.encode_method,
            //   },
            // },
            /* {
              name: "微服务响应列表", // TODO: replace
              type: "table",
              value: {
                datas: [
                  {
                    name: "apaas-mapvideos-1",
                    description: "地图视频融合应用服务",
                  },
                  {
                    name: "apaas-mapvideos-2",
                    description: "地图视频融合应用服务",
                  },
                  {
                    name: "apaas-mapvideos-3",
                    description: "地图视频融合应用服务",
                  },
                ],
                columns: [
                  {
                    prop: "name",
                    label: "微服务名称",
                  },
                  {
                    prop: "description",
                    label: "微服务描述",
                  },
                ],
              },
            }, */
          ];
          if (datas.workflows_id) {
            this.detailData.push({
              name: "流程详情",
              type: "workflows",
              value: datas.workflows_id,
            });
          }
          let arr1 = datas.serviceRequestSpcs.spcs_type_1 || [];
          let arr2 = datas.serviceRequestSpcs.spcs_type_2 || [];
          let arr = arr1.concat(arr2);
          arr.map((item) => {
            item.type = item.spcs_type == 1 ? "计次收费规格" : "时长收费规格";
            item.spce =
              item.spcs_type == 1
                ? `${item.money}金币/${item.spcs_count}次（${(
                    item.money / item.spcs_count
                  ).toFixed(2)}金币/1次）`
                : `${item.money}金币/月（次数不限）`;
            item.times = item.spcs_type == 1 ? "不限时长" : "按月";
          });
          this.providerData = {
            organization_name: datas.organization_name,
            picture_path: datas.organization_picture,
            user_name: datas.register_user_info.user_name,
            phone: datas.register_user_info.phone,
            serviceRequestSpcsTable: arr,
          };
          this.commentsData = datas.scoreDetail;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  created() {
    this.init();
  },
};
</script>
