<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="item == '' ? '' : '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-if="now_service == 2">
            <process-card
              :data="use_approval_arr"
              slot="approval"
            ></process-card>
          </info-list> -->
          <info-list
            v-else
            :list_arr="
              now_service == 0
                ? data_service_type1 == 36
                  ? cp_arr
                  : list_arr
                : now_service == 1
                ? servicead_arr
                : now_service == 2
                ? jkwd_arr
                : apply_arr
            "
          >
            <table-um
              :stripe="true"
              :headers="jkwd_headers"
              :datas="jkwd_datas"
              @download="download"
              slot="wd_table"
            ></table-um>
            <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>
            <mavon-editor
              slot="cp_md"
              v-model="cp_arr[6].item"
              :boxShadow="false"
              :toolbarsFlag="false"
              :subfield="false"
              defaultOpen="preview"
              :editable="false"
            />
          </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";
import helper from "@/services/helper";
export default {
  props: {},
  components: {
    serviceHeader,
    infoList,
    tableUm,
    processCard,
    "v-apaas-code": codes,
  },
  data() {
    return {
      use_approval_arr: [],
      process_in_up: false, //是否是服务注册产生的
      perception_in: false, //是否是感知服务
      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: ["服务基本信息", "接口详细信息","接口文档", "申请审批信息"],
      data_service_type1: "",
      service_header_arr: {
        id: "",
        isMap: false,
        isProcess: false,
        name: "",
        first: [
          {
            name: "服务分类",
            text: "",
          },
          {
            name: "审批状态",
            text: "",
            color: "#515fe7",
          },
          {
            name: "服务到期时间",
            text: "",
          },
          {
            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: "",
        },
      ],
      cp_arr: [
        {
          title: "产品简介：",
          info: "",
        },
        {
          title: "产品领域：",
          info: "",
        },
        {
          title: "产品标签：",
          info: "",
        },
        {
          title: "所属组织：",
          info: "",
        },
        {
          title: "开放程度：",
          info: "",
        },
        {
          title: "注册发布时间：",
          info: "",
        },
        {
          title: "产品详情：",
          type: "solt",
          solt_name: "cp_md",
          item: "",
        },
      ],
      servicead_arr: [
        {
          title: "请求方式：",
          info: "",
        },
        {
          title: "请求参数：",
          info: "",
          type: "solt",
          solt_name: "request_table",
        },
        {
          title: "请求示例：",
          info: "",
          type: "solt",
          solt_name: "request_code",
        },
        {
          title: "编码格式：",
          info: "",
        },
        {
          title: "响应参数：",
          info: "",
          type: "solt",
          solt_name: "res_table",
        },
        {
          title: "响应示例：",
          info: "",
          type: "solt",
          solt_name: "res_code",
        },
      ],
      jkwd_arr: [
        {
          title: "",
          info: "",
          type: "solt",
          solt_name: "wd_table",
        },
      ],
      jkwd_headers: [],
      jkwd_datas: [],
      clickFlag: false,
      apply_arr: [
        {
          title: "申请信息",
          prop: "title",
        },
        {
          title: "场景描述：",
          info: "",
        },
        {
          title: "调用业务系统：",
          info: "",
        },
        {
          title: "业务系统域名：",
          info: "",
        },
        {
          title: "申请文件：",
          info: "",
          type: "down",
        },
        {
          title: "申请内容：",
          info: "",
          type: "solt",
          solt_name: "apply_table",
        },
        // {
        //   title: "申请规格：",
        //   info: "",
        // },
        {
          title: "申请使用期限：",
          info: "",
        },
        {
          title: "申请理由",
          info: "",
        },
        {
          title: "申请时间：",
          info: "",
        },
        {
          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: {
    download(row) {
      if (this.clickFlag) {
        const a = document.createElement("a"); // 创建a标签
        a.setAttribute("download", ""); // download属性
        a.setAttribute("href", row.url); // href链接
        a.click(); // 自执行点击事件
      }
    }, // 下载接口文档
    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;
          // 审批通过才可以下载接口文档，待审批、审批中、审批不通过不可以下载
          if (data.service_apply_info.approval_status == 3) {
            this.clickFlag = true
          }else {
            this.clickFlag = false
          }
          if (data.doc_file != '') {
            this.jkwd_datas.push({
              wd_name: helper.downloadFileFormat(data.doc_file),
              url: data.doc_file
            })
          }
          this.jkwd_headers = [
            {
              prop: "wd_name",
              label: "文档名称",
              align: "left",
            },
            {
              label: "操作",
              type: "Button",
              align: "center",
              btnList: [
                {
                  type: "download",
                  label: "下载",
                  disabledRule: this.clickFlag == true 
                },
              ],
            },
          ],
          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
          );
          if (data.data_service_type1 == 36) {
            this.$set(this.service_header_arr["first"][1], "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], "name", "申请次数");
            this.$set(
              this.service_header_arr["second"][0],
              "text",
              data.service_apply_info.spcs_type == 1
                ? data.service_apply_info.spcs_count + "次"
                : "不限次数"
            );
          } else {
            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"
            );
            if (data.service_apply_info.approval_status == 3) {
              this.$set(
                this.service_header_arr["second"][0],
                "text",
                data.service_apply_info.urls[0].req_url
              );
            } else {
              this.$set(
                this.service_header_arr["second"][0],
                "text", "暂无"
              );
            }
          }
          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 (data.service_apply_info.spcs_type == 1) {
            this.$set(this.service_header_arr["first"][2], "text", "不限时长");

            this.$set(
              this.service_header_arr["first"][3],
              "text",
              data.service_apply_info.spcs_count
            );
          } else {
            this.$set(
              this.service_header_arr["first"][2],
              "text",
              data.service_apply_info.request_end_time
                .replace(/T|Z/g, " ")
                .split("+")[0]
            );
            this.$set(this.service_header_arr["first"][3], "text", "不限次数");
          }
          if (data.data_service_type1 == 36) {
            this.service_header_arr["first"].pop();
            this.service_header_arr["second"][1] = {
              name: "",
              value: "",
            };
            this.$set(this.service_header_arr["second"][1], "name", "可用次数");
            this.$set(
              this.service_header_arr["second"][1],
              "text",
              data.service_apply_info.spcs_type == 1
                ? data.service_apply_info.left_request_count + "次"
                : "不限次数"
            );
          }
          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.sectors_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", "自动生成");
          this.$set(
            this.list_arr[7],
            "info",
            data.create_time == "0001-01-01T00:00:00Z"
              ? "-"
              : data.create_time
                  .replace("T", " ")
                  .replace("Z", "")
                  .split("+")[0]
          );
          this.$set(this.cp_arr[0], "info", data.descript);
          this.$set(this.cp_arr[1], "info", data.sectors_name);
          let strtags = "";
          if (data.tags && data.tags.length != 0) {
            data.tags.forEach((item) => {
              strtags += item + "  ";
            });
          }
          this.$set(this.cp_arr[2], "info", strtags);
          this.$set(this.cp_arr[3], "info", data.organization_name);
          this.$set(this.cp_arr[4], "info", data.openness_name);
          this.$set(
            this.cp_arr[5],
            "info",
            data.create_time == "0001-01-01T00:00:00Z"
              ? "-"
              : data.create_time
                  .replace("T", " ")
                  .replace("Z", "")
                  .split("+")[0]
          );
          this.data_service_type1 = data.data_service_type1;
          if (this.data_service_type1 == "36") {
            this.service_arr[0] = "产品基本信息";
            this.service_arr[1] = "";
            this.service_arr[2] = "申请审批信息";
            console.log("123");
            this.getMd(data.doc_file);
            console.log("123");
          }
          console.log("123");
          this.$set(
            this.servicead_arr[0],
            "info",
            this.request_arr[data.service_apply_info.urls[0].req_type]
          );
          this.$set(
            this.servicead_arr[1],
            "info",
            data.service_apply_info.urls[0].req_fields != ""
              ? data.service_apply_info.urls[0].req_fields
              : data.service_apply_info.urls[0].req_query != ""
              ? data.service_apply_info.urls[0].req_query
              : "无"
          );
          this.$set(
            this.servicead_arr[2],
            "info",
            data.service_apply_info.urls[0].req_fields_example != ""
              ? data.service_apply_info.urls[0].req_fields_example
              : data.service_apply_info.urls[0].req_query_example != ""
              ? data.service_apply_info.urls[0].req_query_example
              : "无"
          );
          this.$set(
            this.servicead_arr[3],
            "info",
            data.service_apply_info.urls[0].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
          );
          console.log(data);
          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}金币/月`;
          }
          // this.$set(this.apply_arr[6], "info", spcs);

          this.$set(
            this.apply_arr[6],
            "info",
            data.service_apply_info.request_start_time && data.service_apply_info.request_end_time ? data.service_apply_info.request_start_time + '~' + data.service_apply_info.request_end_time : '-'
          );
          this.$set(
            this.apply_arr[7],
            "info",
            data.service_apply_info.reason_application || ''
          )
          this.$set(
            this.apply_arr[8],
            "info",
            data.service_apply_info.apply_time
              .replace(/T|Z/g, " ")
              .split("+")[0]
          );
          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.service_apply_info.urls[0].res_fields_example || ""; // 响应示例
          if (!this.res_code_arr) {
            this.$set(this.servicead_arr[5], "type", "");
            this.$set(this.servicead_arr[5], "info", "无响应示例");
          }
          if (data.data_service_type1_name != "数据服务") {
            this.servicead_arr = this.servicead_arr.slice(0, 4);
          }

          if(data.service_apply_info.approval_status == 3){
            //审批通过
            this.servicead_arr.unshift({
              title: "Authorization：",
              info: data.service_apply_info.apaas_token,
            })
          }

          console.log(data.service_apply_info);
          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,
                  },
                ];
              }
              if (e.level == 2) {
                this.use_approval_arr[this.use_approval_arr.length - 1][
                  "arr"
                ].splice(1, 1)
              }
            });
          } else {
            this.use_approval_arr.push({
              title: "一级审批",
              result: "待审批",
            });
          }
          if (data.data_service_type1 != 5) {
            this.apply_arr.splice(5, 1)
          }
          this.res_data = JSON.parse(data.res_fields);
        })
        .catch(function (response) {});
    },
    getMd(url) {
      if (url == "") {
        this.cp_arr[6].item = "无";
      } else {
        this.$http
          .get(url)
          .then((response) => {
            this.cp_arr[6].item = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
  },
};
</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>
