<template>
  <div class="detail_contain">
    <p class="now_page_title">
      我的服务 / 申请的服务 /
      <span>服务详情</span>
    </p>
    <div class="info_contain">
      <service-header :data="service_header_arr"></service-header>
      <div class="type_box">
        <div class="type_title">
          <div
            v-for="(item, index) in service_arr"
            :key="index + 1000"
            class="type_select"
            @click="now_service = index"
            :style="
              now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
            "
          >
            {{ item }}
          </div>
        </div>
        <div class="type_box_select">
          <info-list
            :list_arr="process_in_up_arr"
            v-if="now_service == 1 && process_in_up"
          >
            <div slot="service_port" class="service_port">
              <el-select
                v-model="port_select"
                placeholder=""
                @change="change_port"
              >
                <el-option
                  v-for="item in port_options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div
                class="port_bg_box"
                style="padding:20px;background-color:#f8f9fd;margin-top:10px;"
              >
                <info-list :list_arr="port_solt_arr">
                  <table-um
                    :headers="req_solt_header_arr"
                    :datas="req_solt_data"
                    :stripe="true"
                    slot="request_table"
                  ></table-um>
                  <v-apaas-code
                    :datas="req_solt_code_arr"
                    slot="request_code"
                    :readOnly="true"
                  ></v-apaas-code>
                  <table-um
                    :headers="res_solt_header_arr"
                    :datas="res_solt_data"
                    :stripe="true"
                    slot="response_table"
                  ></table-um>
                  <v-apaas-code
                    :datas="res_solt_code_arr"
                    slot="response_code"
                    :readOnly="true"
                  ></v-apaas-code>
                </info-list>
              </div>
            </div>
          </info-list>
          <info-list
            :list_arr="perception_solt_arr"
            v-if="now_service == 1 && perception_in"
          >
            <table-um
              :headers="perception_req_solt_header_arr"
              :datas="req_solt_data"
              :stripe="true"
              slot="request_table"
            ></table-um>
            <v-apaas-code
              :datas="req_solt_code_arr"
              slot="request_code"
              :readOnly="true"
            ></v-apaas-code>
            <table-um
              :headers="perception_res_solt_header_arr"
              :datas="res_solt_data"
              :stripe="true"
              slot="response_table"
            ></table-um>
            <v-apaas-code
              :datas="res_solt_code_arr"
              slot="response_code"
              :readOnly="true"
            ></v-apaas-code>
          </info-list>
          <info-list
            v-else
            :list_arr="
              now_service == 0
                ? list_arr
                : now_service == 1
                ? servicead_arr
                : apply_arr
            "
          >
            <table-um
              v-if="res_table_arr.length"
              :headers="res_header_arr"
              :datas="res_table_arr"
              slot="res_table"
            ></table-um>
            <table-um
              v-if="res_table_arr.length"
              :headers="res_header_arr"
              :datas="res_table_arr"
              slot="apply_table"
            ></table-um>
            <v-apaas-code
              :datas="res_code_arr"
              slot="res_code"
              :readOnly="true"
            ></v-apaas-code>
            <process-card
              :data="use_approval_arr"
              slot="approval"
            ></process-card>
          </info-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import serviceHeader from "@/components/service-header";
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import processCard from "@/components/process-card";
import codes from "@/components/general/codes";
export default {
  props: {},
  components: {
    serviceHeader,
    infoList,
    tableUm,
    processCard,
    "v-apaas-code": codes,
  },
  data() {
    return {
      use_approval_arr: [],
      process_in_up: false, //是否是服务注册产生的
      perception_in: false, //是否是感知服务
      service_apply_type: 1, //服务申请的方式，1：计次收费2：时长收费
      port_select: "",
      req_solt_code_arr: "",
      res_solt_code_arr: "",
      perception_req_solt_code_arr: "",
      perception_res_solt_code_arr: "",
      req_solt_data: [],
      res_solt_data: [],
      perception_req_solt_data: [],
      perception_res_solt_data: [],
      req_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 请求参数-header
      res_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ],
      perception_req_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "center",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ],
      perception_res_solt_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "is_must",
          label: "是否必须",
          align: "center",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ],
      port_options: [],
      port_solt_arr: [
        {
          title: "服务地址：",
          info: "",
        },
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "get",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "response_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "response_code",
        },
      ],
      perception_solt_arr: [
        {
          title: "接口文档：",
          info: "",
          url: "",
          type: "down",
        },
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "get",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "response_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "response_code",
        },
      ],
      process_in_up_arr: [
        {
          title: "接口文档：",
          info: "",
          url: "",
          type: "down",
        },
        {
          title: "服务接口：",
          info: "",
          type: "solt",
          solt_name: "service_port",
        },
      ],
      approval_arr: [
        {
          title: "一级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
        {
          title: "二级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
        {
          title: "三级审批",
          result: "审批中",
        },
      ],
      approval_arr1: [
        {
          title: "一级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
        {
          title: "二级审批",
          result: "审批通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "同意",
            },
          ],
        },
        {
          title: "三级审批",
          result: "审批未通过",
          arr: [
            {
              title: "审批时间：",
              info: "2020-02-28 15:23:45",
            },
            {
              title: "审批单位：",
              info: "某某某城管局",
            },
            {
              title: "审批人：",
              info: "张先生",
            },
            {
              title: "审批意见：",
              info: "不同意，驳回。",
            },
          ],
        },
      ],
      service_arr: ["服务基本信息", "接口详细信息", "申请审批信息"],
      service_header_arr: {
        id: "",
        isMap: false,
        isProcess: false,
        name: "",
        first: [
          {
            name: "服务类型",
            text: "",
          },
          {
            name: "审批状态",
            text: "",
            color: "#515fe7",
          },
          {
            name: "服务到期时间",
            text: "",
          },
        ],
        second: [
          {
            name: "服务接口地址",
            text: "",
          },
        ],
        fixed: false,
      },
      now_service: 0,
      list_arr: [
        {
          title: "服务描述：",
          info: "",
        },
        {
          title: "服务领域：",
          info: "",
        },
        {
          title: "发布人：",
          info: "",
        },
        {
          title: "联系方式：",
          info: "",
        },
        {
          title: "所属组织：",
          info: "",
        },
        {
          title: "开放程度：",
          info: "",
        },
        {
          title: "接口编码：",
          info: "",
        },
        {
          title: "注册发布时间：",
          info: "",
        },
      ],
      servicead_arr: [
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "请求参数：",
          info: "",
        },
        {
          title: "请求示例：",
          info: "",
        },
        {
          title: "编码格式：",
          info: "",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "res_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "res_code",
        },
      ],
      apply_arr: [
        {
          title: "申请信息",
          prop: "title",
        },
        {
          title: "场景描述：",
          info: "申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
        },
        {
          title: "调用业务系统：",
          info: "决策指挥系统",
        },
        {
          title: "业务系统域名：",
          info: "https://apaas.wodcloud.com/",
        },
        {
          title: "申请文件：",
          info: "mapvideos申请书.docx",
          type: "down",
        },
        {
          title: "申请内容：",
          info: "",
          type: "solt",
          solt_name: "apply_table",
        },
        {
          title: "申请规格：",
          info: "",
        },
        {
          title: "申请时长：",
          info: "",
        },
        {
          title: "申请时间：",
          info: "",
        },
        {
          title: "支付总价：",
          info: "0",
        },
        {
          title: "审批信息",
          prop: "title",
          type: "solt",
          solt_name: "approval",
        },
      ],
      request_arr: ["", "GET", "POST", "PUT", "DELETE"],
      res_data: [],
      res_header_arr: [
        {
          prop: "name",
          label: "字段编码",
          align: "left",
          width: 200,
        },
        {
          prop: "label",
          label: "字段名称",
          align: "center",
          width: 200,
        },
        {
          prop: "show_type",
          label: "字段类型",
          align: "center",
          width: 240,
        },
        {
          prop: "descript",
          label: "字段说明",
          align: "left",
        },
        {
          prop: "example",
          label: "字段示例数值",
          align: "center",
          width: 240,
        },
      ], // 响应参数-header
      res_table_arr: [], // 响应参数
      res_code_arr: "",
    };
  },
  watch: {},
  computed: {},
  created() {
    this.get_service_info();
  },
  mounted() {},
  methods: {
    change_port(val) {
      this.port_options.forEach((e) => {
        if (e.value == val) {
          this.$set(this.port_solt_arr[0], "info", e.value);
          this.$set(this.port_solt_arr[1], "info", e.req_type);
          this.$set(this.port_solt_arr[2], "info", e.encode_method);
          this.req_solt_data = e.req_fields;
          this.res_solt_data = e.res_fields;
          this.req_solt_code_arr = e.req_fields_example;
          this.res_solt_code_arr = e.res_fields_example;
        }
      });
    },
    get_service_info() {
      this.$http
        .get(
          `/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`
        )
        .then((response) => {
          if (!response.data.success) {
            this.$message.error(response.data.errMsg);
            return;
          }
          let data = response.data.data;
          this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
          this.$set(this.service_header_arr, "workflows_id", data.workflows_id); // 时空服务id
          this.$set(
            this.service_header_arr,
            "isMap",
            data.data_service_type1 === 6
          );
          this.$set(
            this.service_header_arr,
            "isProcess",
            data.data_service_type2 === 24
          );
          this.$set(this.service_header_arr, "name", data.name);
          this.$set(
            this.service_header_arr["first"][0],
            "text",
            data.data_service_type1_name
          );
          this.$set(
            this.service_header_arr["first"][1],
            "text",
            data.service_apply_info.approval_status == 1
              ? "待审批"
              : data.service_apply_info.approval_status == 2
              ? "审批中"
              : data.service_apply_info.approval_status == 3
              ? "审批通过"
              : "审批未通过"
          );
          this.$set(
            this.service_header_arr["first"][1],
            "color",
            data.service_apply_info.approval_status == 1
              ? "#ef9433"
              : data.service_apply_info.approval_status == 2
              ? "#ef9433"
              : data.service_apply_info.approval_status == 3
              ? "#515fe7"
              : "#e15260"
          );

          this.$set(
            this.service_header_arr["second"][0],
            "text",
            data.service_apply_info.urls[0].req_url
          );
          this.$set(this.service_header_arr, "url", data.cover);

          //判断是否是服务注册出来的流程服务
          if (data.data_service_type2 == 24 && data.workflows_id == 0) {
            this.process_in_up = true;
            this.$set(
              this.process_in_up_arr[0],
              "info",
              data.doc_file.split("/")[data.doc_file.split("/").length - 1]
            );
            this.$set(this.process_in_up_arr[0], "url", data.doc_file);
            var temp_port_arr = [];
            data.urls.forEach((e) => {
              temp_port_arr.push({
                label: e.req_name,
                value: e.req_url,
                able: e.state == -1 ? false : true,
                ...e,
              });
            });
            this.port_options = temp_port_arr;
            if (this.port_options[0]) {
              this.port_select = this.port_options[0].value;
              this.$set(
                this.port_solt_arr[0],
                "info",
                this.port_options[0].value
              );
              this.$set(
                this.port_solt_arr[1],
                "info",
                this.port_options[0].req_type
              );
              this.$set(
                this.port_solt_arr[2],
                "info",
                this.port_options[0].encode_method
              );
              this.req_solt_data = this.port_options[0].req_fields;
              this.res_solt_data = this.port_options[0].res_fields;
              this.req_solt_code_arr = this.port_options[0].req_fields_example;
              this.res_solt_code_arr = this.port_options[0].res_fields_example;
            }
          } else {
            this.process_in_up = false;
          }

          if (data.service_data_type_1 == 10) {
            this.perception_in = true;
            this.$set(
              this.perception_solt_arr[0],
              "info",
              data.doc_file.split("/")[data.doc_file.split("/").length - 1]
            );
            this.$set(
              this.perception_solt_arr[1],
              "info",
              data.urls[0].req_url
            );
            this.$set(
              this.perception_solt_arr[2],
              "info",
              data.urls[0].encode_method
            );
            this.req_solt_data = data.urls[0].req_fields;
            this.res_solt_data = data.urls[0].res_fields;
            this.req_solt_code_arr = data.urls[0].req_fields_example;
            this.res_solt_code_arr = data.urls[0].res_fields_example;
          } else {
            this.perception_in = false;
          }

          if (this.service_apply_type == 1) {
            this.$set(
              this.service_header_arr["first"][2],
              "text",
              data.service_apply_info.service_end_time == "0001-01-01T00:00:00Z"
                ? "-"
                : data.service_apply_info.service_end_time
                    .replace("T", " ")
                    .split("+")[0]
            );
            this.$set(
              this.service_header_arr["first"][2],
              "name",
              "可调用次数"
            );
          } else {
            this.$set(
              this.service_header_arr["first"][2],
              "text",
              data.service_apply_info.service_end_time == "0001-01-01T00:00:00Z"
                ? "-"
                : data.service_apply_info.service_end_time
                    .replace("T", " ")
                    .split("+")[0]
            );
          }
          if (this.process_in_up) {
            var temp_sj = this.service_header_arr.first.pop();
            this.service_header_arr.second = [];
            this.service_header_arr.second.push(temp_sj);
          }
          this.$set(this.list_arr[0], "info", data.descript);
          this.$set(this.list_arr[1], "info", data.data_service_type2_name);
          this.$set(
            this.list_arr[2],
            "info",
            data.service_apply_info.apply_user_info.user_name
          );
          this.$set(
            this.list_arr[3],
            "info",
            data.service_apply_info.apply_user_info.phone
          );
          this.$set(this.list_arr[4], "info", data.organization_name);
          this.$set(this.list_arr[5], "info", data.openness_name);
          this.$set(this.list_arr[6], "info", data.encode_method);
          this.$set(
            this.list_arr[7],
            "info",
            data.create_time == "0001-01-01T00:00:00Z"
              ? "-"
              : data.create_time.replace("T", " ").split("+")[0]
          );
          this.$set(
            this.servicead_arr[0],
            "info",
            this.request_arr[data.req_type]
          );
          this.$set(
            this.servicead_arr[1],
            "info",
            data.req_query ? data.req_query : "无"
          );
          this.$set(this.servicead_arr[2], "info", data.req_fields);
          this.$set(this.servicead_arr[3], "info", data.encode_method);
          // this.$set(this.apply_arr[0], "info", data.apply_user_info.phone);
          this.$set(this.apply_arr[1], "info", data.descript);
          this.$set(
            this.apply_arr[2],
            "info",
            data.service_apply_info.business_name
          );
          this.$set(
            this.apply_arr[3],
            "info",
            data.service_apply_info.business_url
          );
          this.$set(
            this.apply_arr[4],
            "info",
            data.service_apply_info.apply_file.split("/")[
              data.service_apply_info.apply_file.split("/").length - 1
            ]
          );
          this.$set(
            this.apply_arr[4],
            "url",
            data.service_apply_info.apply_file
          );

          let spcs = "";
          if (data.service_apply_info.spcs_type === 1) {
            spcs = `${data.service_apply_info.single_money}金币/${data.service_apply_info.spcs_count}次`;
          } else {
            spcs = `${data.service_apply_info.single_money}金币/${
              data.service_apply_info.duration_unit == 1 ? "月" : "年"
            }`;
          }
          this.$set(this.apply_arr[6], "info", spcs);

          this.$set(
            this.apply_arr[7],
            "info",
            data.service_apply_info.duration +
              (data.service_apply_info.duration_unit == 1 ? "月" : "年")
          );
          this.$set(
            this.apply_arr[8],
            "info",
            data.service_apply_info.apply_time.replace(/T|Z/g, " ").split("+")[0]
          );
          this.$set(
            this.apply_arr[9],
            "info",
            data.service_apply_info.total_money
          );
          this.res_table_arr = JSON.parse(
            data.service_apply_info.res_fields || "[]"
          );
          if (this.res_table_arr.length === 0) {
            this.$set(this.servicead_arr[4], "info", "无响应参数");
          }
          this.res_code_arr = data.res_fields_example || ""; // 响应示例
          if (!this.res_code_arr) {
            this.$set(this.servicead_arr[5], "type", "");
            this.$set(this.servicead_arr[5], "info", "无响应示例");
          }
          console.log(this.res_table_arr);
          if (data.service_apply_info.approval_process) {
            data.service_apply_info.approval_process.forEach((e) => {
              this.use_approval_arr.push({
                title: e.level == 1 ? "一级审批" : "二级审批",
                result:
                  e.status == -1
                    ? "审批未通过"
                    : e.status == 0
                    ? "审批中"
                    : "审批通过",
              });

              if (e.status !== 0) {
                this.use_approval_arr[this.use_approval_arr.length - 1][
                  "arr"
                ] = [
                  {
                    title: "审批时间：",
                    info: e.approval_time.split("+")[0].replace("T", " "),
                  },
                  {
                    title: "审批单位：",
                    info: e.user_info.department_name,
                  },
                  {
                    title: "审批人：",
                    info: e.user_info.user_name,
                  },
                  {
                    title: "审批意见：",
                    info: e.comments,
                  },
                ];
              }
            });
          } else {
            this.use_approval_arr.push({
              title: "一级审批",
              result: "待审批",
            });
          }
          this.res_data = JSON.parse(data.res_fields);
        })
        .catch(function(response) {});
    },
  },
};
</script>

<style scoped>
.detail_contain {
  width: 100%;
  padding: 0 20px;
  margin-bottom: 20px;
}
.info_contain {
  padding: 25px 20px;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
}
.now_page_title {
  margin: 15px 0;
  color: #898d9e;
}
.now_page_title span {
  color: #242c43;
}
.type_box {
  width: 100%;
}
.type_title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  border-bottom: 2px solid #f4f7fc;
}
.type_select {
  float: left;
  width: auto;
  margin-right: 40px;
  height: 65px;
  cursor: pointer;
}
.type_box_select {
  padding: 30px 10px 10px 10px;
  width: 100%;
}
</style>
