<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
          );
          this.$set(
            this.apply_arr[6],
            "info",
            "访问次数：" +
              data.service_apply_info.request_spcs.pv +
              "/日，" +
              "访问量：" +
              data.service_apply_info.request_spcs.count +
              "/日"
          );
          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", " ").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>
