<template>
  <div class="container">
    <div class="left-tree">
      <catalogue-tree
        @callback="catalogueCallBack"
        :isCustomer="true"
        :filter="false"
        catalogueType="share"
        :defaultKey="catalogueId"
      />
    </div>
    <div class="plate" v-loading="loading">
      <div class="breadcrumb">首页 / 资源目录 / <span>资源详情</span></div>
      <div class="record" v-if="resData">
        <div class="recFlex">
          <div class="recTitle">
            <div class="wier2"></div>
            <div class="title">{{ resData.resName }}</div>
            <el-tag type="primary" plain v-if="resData.resType === 'data'"
              >数据</el-tag
            >
            <el-tag type="success" plain v-if="resData.resType === 'service'"
              >服务</el-tag
            >
          </div>
          <div class="detail-btn">
            <apply-resource :resForm="resData" @callback="callback" />
            <el-button type="" @click="goBack" style="margin-left: 20px"
              >返回</el-button
            >
          </div>
        </div>
        <div class="recFlex item">
          <div class="recCont">
            <div class="recDet">
              <div class="recTxt">信息标识符</div>
              <div class="recText">{{ resData.infoId }}</div>
            </div>
          </div>
          <div class="recCont">
            <div class="recDet">
              <div class="recTxt">开放类型</div>
              <div
                class="recText"
                :class="resData.publishType === 'open' ? 'on' : ''"
              >
                {{ getDictLabel("sys_publish_type", resData.publishType) }}
              </div>
            </div>
          </div>
        </div>
        <div class="recFlex item">
          <div class="recCont">
            <div class="recDet">
              <div class="recTxt">发布机构</div>
              <div class="recText">
                {{
                  getDictLabel(
                    "sys_provide_organization",
                    resData.provideOrganization
                  ) || ""
                }}
              </div>
            </div>
          </div>
          <div class="recCont">
            <div class="recDet">
              <div class="recTxt">发布时间</div>
              <div class="recText">
                {{ parseTime(resData.createTime, "{y}-{m}-{d} {h}:{i}") }}
              </div>
            </div>
          </div>
        </div>
        <div class="recFlex item">
          <div class="recCont">
            <div class="recDet">
              <div class="recTxt">是否申请</div>
              <div class="recText">
                <template v-if="!appliedAppList || appliedAppList.length === 0"
                  >否</template
                >
                <template v-else>是</template>
              </div>
            </div>
          </div>
          <div class="recCont">
            <div class="recDet">
              <div class="recTxt">标签</div>
              <div class="recText En">
                <div v-if="resData.tag">
                  <el-tag
                    class="tag"
                    type="info"
                    v-for="(t, i) in resData.tag.split(',')"
                    :key="i"
                    >{{ t }}</el-tag
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="recFlex item last">
          <div class="recCont">
            <div class="recDet on">
              <div class="recTxt">资源描述</div>
              <div class="recText">
                {{ resData.remark }}
              </div>
            </div>
          </div>
        </div>
        <div class=""></div>
      </div>
      <div class="tabs" v-if="resData">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="数据项" name="first">
            <div class="tabpane">
              <!-- 参数项 -->
              <el-table
                :data="allItem"
                style="width: 100%"
                class="customer-table"
                v-if="resType === 'service'"
              >
                <el-table-column
                  label="序号"
                  width="80"
                  type="index"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="paramName" label="参数名">
                </el-table-column>
                <el-table-column prop="remark" label="描述"> </el-table-column>
                <el-table-column prop="dataType" label="数据格式" width="180">
                </el-table-column>
                <el-table-column label="脱敏" align="center" width="80">
                  <template slot-scope="scope">
                    <span
                      style="color: #00b42a"
                      v-if="scope.row.desensitizationRuleId > 0"
                      >是</span
                    >
                    <span style="color: #ff5722" v-else>否</span>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 数据项 -->
              <el-table
                :data="allItem"
                style="width: 100%"
                class="customer-table"
                v-if="resType === 'data'"
              >
                <el-table-column
                  label="序号"
                  width="80"
                  type="index"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="columnName" label="英文名" width="200">
                </el-table-column>
                <el-table-column
                  prop="columnComment"
                  label="中文名称"
                  min-width="300"
                  show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column prop="columnType" label="数据格式" width="180">
                </el-table-column>
                <el-table-column label="脱敏" align="center" width="80">
                  <template slot-scope="scope">
                    <span
                      style="color: #00b42a"
                      v-if="scope.row.desensitizationRuleId > 0"
                      >是</span
                    >
                    <span style="color: #ff5722" v-else>否</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="数据详情"
            name="second"
            v-if="
              resType === 'data' ||
              (resData &&
                resData.data &&
                resData.data.responseForm === 'standard')
            "
          >
            <template v-if="appliedAppList && appliedAppList.length > 0">
              <div class="appselect">
                调用应用：
                <el-select
                  v-model="currentAccessId"
                  placeholder="请选择应用"
                  style="width: 200px"
                  @change="appChange"
                >
                  <el-option
                    :label="app.applicationName"
                    :value="app.accessId"
                    v-for="(app, i) in appliedAppList"
                    :key="i"
                  ></el-option>
                </el-select>
              </div>
              <template v-if="currentApp.applyStatus === '1'">
                <div class="detFlex">
                  <template v-if="resType === 'data'">
                    <div
                      v-for="(row, i) in selectedQueryColumn"
                      :key="i"
                      style="margin-bottom: 20px"
                    >
                      <el-select
                        v-model="row.colName"
                        class="select"
                        placeholder="请选择字段"
                        clearable
                      >
                        <el-option
                          v-for="item in getSearchParam()"
                          :key="item.columnName"
                          :label="item.columnName"
                          :value="item.columnName"
                        >
                        </el-option>
                      </el-select>
                      <el-select
                        v-model="row.cond"
                        class="select"
                        placeholder="请选择条件"
                        clearable
                      >
                        <el-option
                          v-for="item in conds"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-input
                        v-model="row.colVal"
                        class="select"
                        placeholder="请输入关键字"
                        clearable
                      ></el-input>
                      <el-button
                        type=""
                        @click="removeSelectedColumn(row.id)"
                        icon="el-icon-minus"
                        plain
                        v-if="selectedQueryColumn.length > 1"
                      ></el-button>
                      <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        @click="addSelectedColumn"
                        v-if="i === selectedQueryColumn.length - 1"
                      ></el-button>
                      <el-button
                        type="primary"
                        class="query"
                        v-if="i === 0"
                        @click="getList"
                      >
                        查询
                      </el-button>
                    </div>
                  </template>
                  <div v-else style="position: relative">
                    <el-input
                      v-model="serviceInParamStr"
                      placeholder="请根据标准格式填写JSON格式查询参数（不需要分页参数）"
                      type="textarea"
                      rows="8"
                      style="width: 60%"
                    ></el-input>
                    <el-button
                      type="primary"
                      class="query"
                      style="position: absolute; left: 61%"
                      @click="getServiceList"
                      >查询</el-button
                    >
                  </div>
                  <div class="upload" @click="download">
                    <i class="el-icon-download"></i>导出数据
                    <el-tooltip
                      content="导出当前页数据，如需要导出更多数据，请调整底部每页大小"
                      placement="left"
                    >
                      <i class="el-icon-warning"></i>
                    </el-tooltip>
                  </div>
                </div>
                <el-table
                  ref="filterTable"
                  :data="tableData"
                  style="width: 100%"
                  v-loading="tableLoading"
                  border
                  height="300"
                  id="integration-table"
                >
                  <!-- <el-table-column prop="date" label="序号" type="index">
              </el-table-column> -->

                  <el-table-column
                    :prop="col.paramName"
                    :label="col.paramName"
                    v-for="(col, i) in outParams"
                    :key="i"
                  >
                  </el-table-column>
                </el-table>
                <div class="paging">
                  <pagination
                    v-if="resType === 'data'"
                    v-show="total > 0"
                    :total="total"
                    :page.sync="pageNo"
                    :limit.sync="pageSize"
                    :page-sizes="[10, 50, 100, 200, 500, 1000, 2000, 5000]"
                    @pagination="getList"
                  />
                  <!-- <pagination
                    v-else
                    v-show="total > 0"
                    :total="total"
                    :page.sync="pageNo"
                    :limit.sync="pageSize"
                    :page-sizes="[10, 50, 100, 200, 500, 1000, 2000, 5000]"
                    @pagination="getServiceList"
                  /> -->
                </div>
              </template>
              <div v-else style="height: 200px">
                <el-alert
                  type="info"
                  title="当前应用还未通过审核"
                  style="width: 300px"
                  :closable="false"
                ></el-alert>
              </div>
            </template>
            <div v-else style="display: flex">
              <div class="unapply">您还未申请该资源，点击</div>
              <apply-resource :resForm="resData" @callback="callback" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="请求实例" name="third">
            <template v-if="appliedAppList && appliedAppList.length > 0">
              <div class="living">
                <div class="livFlex">
                  <div class="livText" style="line-height: 36px">调用应用</div>
                  <div class="livTxt">
                    <el-select
                      v-model="currentAccessId"
                      placeholder="请选择应用"
                      style="width: 200px"
                      @change="appChange"
                    >
                      <el-option
                        :label="app.applicationName"
                        :value="app.accessId"
                        v-for="(app, i) in appliedAppList"
                        :key="i"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="livFlex">
                  <div class="livText">申请状态</div>
                  <div class="livTxt">
                    <el-tag
                      v-if="currentApp.applyStatus === '1'"
                      type="success"
                      size="mini"
                    >
                      审核通过
                    </el-tag>
                    <el-tag
                      v-if="currentApp.applyStatus === '0'"
                      type="info"
                      size="mini"
                    >
                      待审核
                    </el-tag>
                    <el-tag
                      v-if="currentApp.applyStatus === '2'"
                      type="danger"
                      size="mini"
                    >
                      审核拒绝
                    </el-tag>
                  </div>
                </div>
                <template v-if="currentApp.applyStatus === '1'">
                  <div class="livFlex">
                    <div class="livText">请求地址</div>
                    <div class="livTxt">
                      {{ baseUserUrl }}/outapi/any/{{ currentApp.accessId }}
                    </div>
                  </div>
                  <div class="livFlex">
                    <div class="livText">请求方法</div>
                    <div class="livTxt">
                      {{ resData.data.requestMethod || "POST" }}
                    </div>
                  </div>
                  <div class="livFlex">
                    <div class="livText">鉴权说明</div>
                    <div class="livTxt pop">
                      <el-popover
                        placement="right-end"
                        title="鉴权说明"
                        width="800"
                        trigger="hover"
                      >
                        <el-form class="detail">
                          <div
                            style="
                              padding: 0 21px;
                              height: 600px;
                              overflow: auto;
                            "
                          >
                            <div class="step-title">1、获取token</div>
                            <el-alert
                              type="info"
                              title="调用应用鉴权接口获取token"
                              :closable="false"
                            ></el-alert>
                            <el-form-item label="接口地址:">
                              {{ baseUserUrl }}/dxp/outapi/base/authorize
                            </el-form-item>
                            <el-form-item label="请求方法:">
                              POST
                            </el-form-item>
                            <el-form-item label="请求参数:"></el-form-item>
                            <el-table
                              :data="authTableReq"
                              border
                              size="small"
                              style="margin-bottom: 10px"
                            >
                              <el-table-column
                                label="参数名"
                                prop="name"
                              ></el-table-column>
                              <el-table-column
                                label="参数描述"
                                prop="remark"
                              ></el-table-column>
                              <el-table-column
                                label="示例值"
                                prop="ex"
                              ></el-table-column>
                            </el-table>
                            <el-form-item label="请求示例:">
                              <LocalJsonViewer
                                :value="{
                                  appId: '20221********4A001',
                                  appSecret: 'fbb888de91e**********f26ed68732f',
                                }"
                                :isboxed="false"
                              ></LocalJsonViewer>
                            </el-form-item>
                            <el-form-item label="返回参数:"></el-form-item>
                            <el-table
                              :data="authTableRsp"
                              border
                              size="small"
                              style="margin-bottom: 10px"
                            >
                              <el-table-column
                                label="参数名"
                                prop="name"
                              ></el-table-column>
                              <el-table-column
                                label="参数描述"
                                prop="remark"
                              ></el-table-column>
                              <el-table-column
                                label="示例值"
                                prop="ex"
                              ></el-table-column>
                            </el-table>
                            <el-form-item label="返回示例:">
                              <LocalJsonViewer
                                :value="{
                                  accessToken: 'xxxxxxxxx',
                                  expiresAt: 7200,
                                  refreshToken: 'xxxxxx',
                                }"
                                :isboxed="false"
                              ></LocalJsonViewer>
                            </el-form-item>
                            <div class="step-title">2、设置header</div>
                            <el-alert
                              type="info"
                              title="请求资源接口时，将得到的token放入header中，变量名为token"
                              :closable="false"
                            />
                            <div class="step-title">3、刷新token</div>
                            <el-alert
                              type="info"
                              title="token过期后，调用刷新token接口，刷新token"
                              :closable="false"
                            ></el-alert>
                            <el-form-item label="接口地址:">
                              {{ baseUserUrl }}/dxp/outapi/refreshToken
                            </el-form-item>
                            <el-form-item label="请求方法:">
                              POST
                            </el-form-item>
                            <el-form-item label="请求参数:"></el-form-item>
                            <el-table
                              :data="authRefeshReq"
                              border
                              size="small"
                              style="margin-bottom: 10px"
                            >
                              <el-table-column
                                label="参数名"
                                prop="name"
                              ></el-table-column>
                              <el-table-column
                                label="参数描述"
                                prop="remark"
                              ></el-table-column>
                              <el-table-column
                                label="示例值"
                                prop="ex"
                              ></el-table-column>
                            </el-table>
                            <el-form-item label="请求示例:">
                              <LocalJsonViewer
                                :value="{
                                  refreshToken: '20221********4A001',
                                }"
                                :isboxed="false"
                              ></LocalJsonViewer>
                            </el-form-item>
                            <el-form-item label="返回参数:"></el-form-item>
                            <el-table
                              :data="authTableRsp"
                              border
                              size="small"
                              style="margin-bottom: 10px"
                            >
                              <el-table-column
                                label="参数名"
                                prop="name"
                              ></el-table-column>
                              <el-table-column
                                label="参数描述"
                                prop="remark"
                              ></el-table-column>
                              <el-table-column
                                label="示例值"
                                prop="ex"
                              ></el-table-column>
                            </el-table>
                            <el-form-item label="返回示例:">
                              <LocalJsonViewer
                                :value="{
                                  accessToken: 'xxxxxxxxx',
                                  expiresAt: 7200,
                                  refreshToken: 'xxxxxx',
                                }"
                                :isboxed="false"
                              ></LocalJsonViewer>
                            </el-form-item>
                          </div>
                        </el-form>
                        <el-button
                          slot="reference"
                          type="text"
                          style="padding: 0; font-size: 16px"
                        >
                          查看详情
                        </el-button>
                      </el-popover>
                    </div>
                  </div>
                  <div class="livFlex">
                    <div class="livText">参数形式</div>
                    <div class="livTxt">
                      {{ resData.data.paramForm || "Body" }}
                    </div>
                  </div>
                </template>
                <template v-if="currentApp.applyStatus === '1'">
                  <div class="livFlex">
                    <div class="livText">请求参数</div>
                    <div class="livTxt">
                      <el-table
                        :data="inParams"
                        border
                        style="width: 100%"
                        v-if="inParams && inParams.length > 0"
                      >
                        <el-table-column
                          label="参数名"
                          prop="paramName"
                          min-width="200"
                        >
                          <template slot-scope="scope">
                            {{ scope.row.paramName }}
                            <span
                              style="color: red"
                              v-if="scope.row.isRequired === 'Y'"
                            >
                              *
                            </span>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column
                            label="中文名"
                            prop="paramComment"
                            min-width="200"
                          ></el-table-column> -->
                        <el-table-column
                          label="数据格式"
                          prop="dataType"
                        ></el-table-column>
                        <el-table-column
                          label="描述"
                          prop="remark"
                          min-width="400"
                        ></el-table-column>
                      </el-table>
                      <span v-else>暂无</span>
                    </div>
                  </div>
                  <div class="livFlex">
                    <div class="livText">请求示例</div>
                    <div class="livTxt">
                      <LocalJsonViewer
                        :value="requestParam"
                        :isboxed="false"
                        v-if="requestParam"
                      ></LocalJsonViewer>
                      <span v-else>暂无</span>
                    </div>
                  </div>
                  <div class="livFlex">
                    <div class="livText">返回参数</div>
                    <div class="livTxt">
                      <el-table
                        :data="outParams"
                        border
                        style="width: 100%"
                        v-if="outParams && outParams.length > 0"
                      >
                        <el-table-column
                          label="参数名"
                          prop="paramName"
                        ></el-table-column>
                        <!-- <el-table-column
                            label="中文名"
                            prop="paramComment"
                          ></el-table-column> -->
                        <el-table-column
                          label="数据格式"
                          prop="dataType"
                        ></el-table-column>
                        <el-table-column
                          label="描述"
                          prop="remark"
                        ></el-table-column>
                      </el-table>
                    </div>
                  </div>
                  <div class="livFlex">
                    <div class="livText">返回示例</div>
                    <div class="livTxt">
                      <LocalJsonViewer
                        :value="responseParam"
                        :isboxed="false"
                        v-if="responseParam"
                      ></LocalJsonViewer>
                      <span v-else>暂无</span>
                    </div>
                  </div>
                </template>
              </div>
            </template>
            <div v-else style="display: flex">
              <div class="unapply">您还未申请该资源，点击</div>
              <apply-resource :resForm="resData" @callback="callback" />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { parseQueryParam } from "@/utils/dxp";
import CatalogueTree from "@/components/CatalogueTree";
import ApplyResource from "@/components/ApplyResource";
import {
  getResource,
  getResourceOutItem,
  getResourceInItem,
  getResourceItem,
  queryData,
  queryService,
} from "@/api/customer/resource";
import { myResources } from "@/api/customer/resource";
import LocalJsonViewer from "@/components/LocalJsonViewer";
import { arrayToJson, getDynamicsApiUrl } from "@/utils/dxp";

import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
  name: "Detail",
  dicts: ["sys_provide_organization", "sys_publish_type"],
  components: { CatalogueTree, ApplyResource, LocalJsonViewer },
  data() {
    return {
      baseUserUrl: getDynamicsApiUrl(process.env.VUE_APP_BASE_USER_API),
      catalogueId: null,
      activeName: "first",
      collapseActiveName: "step1",
      activeApp: "0",
      resData: null,
      loading: false,
      appliedAppList: [],
      id: null,
      resType: null,
      resourceItem: [], // 允许的出参
      allItem: [], // 所有的出参数
      inParams: [], // 示例入参
      requestParam: null, // 请求参数
      outParams: [], // 示例出参
      responseParam: null, // 返回参数
      searchParam: [], // 可搜索参数
      authTableReq: [
        {
          id: 1,
          name: "appId",
          ex: "20221********4A001",
          remark: "应用id，点击我的应用处获得",
        },
        {
          id: 2,
          name: "appSecret",
          ex: "fbb888de91e**********f26ed68732f",
          remark: "应用密钥，点击我的应用处获得",
        },
      ],
      authTableRsp: [
        {
          id: 1,
          name: "accessToken",
          ex: "xxxxxxx",
          remark: "接入token",
        },
        {
          id: 2,
          name: "expiresAt",
          ex: 7200,
          remark: "token有效时间（秒）",
        },
        {
          id: 3,
          name: "refreshToken",
          ex: "xxxxxx",
          remark: "刷新token，用于token失效后刷新",
        },
      ],
      authRefeshReq: [
        {
          id: 1,
          name: "refreshToken",
          ex: "xxxxxx",
          remark: "刷新token",
        },
      ],
      conds: [
        {
          value: 0,
          label: "等于",
        },
        {
          value: 1,
          label: "大于",
        },
        {
          value: 2,
          label: "小于",
        },
      ],
      selectedQueryColumn: [
        {
          id: 0,
          colName: null,
          colVal: null,
          cond: null,
        },
      ],
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      tableLoading: false,
      from: "",
      currentAccessId: null,
      currentApp: null,
      serviceInParamStr: '{"search": ""}',
    };
  },
  created() {
    this.loading = true;
    const params = parseQueryParam(window.location.search);
    if (params.catalogueId) {
      this.catalogueId = Number(params.catalogueId);
    }

    if (params.from) {
      this.from = params.from;
    }

    if (params.accessId) {
      this.currentAccessId = params.accessId;
    }

    if (!params.id || !params.type) {
      // 返回首页
      this.$router.push({ path: "/index" });
    } else {
      this.id = params.id;
      this.resType = params.type;
      this.getAppliedApp();
    }
  },
  methods: {
    appChange(e) {
      console.log(e);
      console.log(this.appliedAppList);
      this.currentApp = this.appliedAppList.find((p) => p.accessId === e);
      this.loading = true;
      this.getResDetail();
    },
    getSearchParam() {
      const searchParam = [];
      if (this.searchParam && this.searchParam.length > 0) {
        this.searchParam.forEach((p) => {
          if (this.selectedQueryColumn && this.selectedQueryColumn.length > 0) {
            if (
              !this.selectedQueryColumn.find((k) => k.colName === p.columnName)
            ) {
              searchParam.push(p);
            }
          }
        });
      }

      return searchParam;
    },
    getList() {
      if (!this.currentAccessId) {
        this.$modal.msgError("请选择调用数据的应用");
        return;
      }
      const query = [];
      if (this.selectedQueryColumn && this.selectedQueryColumn.length > 0) {
        this.selectedQueryColumn.forEach((p) => {
          if (p.colName && p.colVal && p.cond >= 0) {
            query.push({
              colName: p.colName,
              colVal: p.colVal,
              cond: p.cond,
            });
          }
        });
      }

      const submitData = {
        accessId: this.currentAccessId,
        page: this.pageNo,
        pageSize: this.pageSize,
      };

      if (query && query.length > 0) {
        submitData.query = query;
      }

      // 提交结果查询数据
      this.tableLoading = true;
      queryData(submitData)
        .then((res) => {
          this.tableLoading = false;
          this.tableData = res.data.list || [];
          this.total = res.data.total || 0;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    getServiceList() {
      if (!this.currentAccessId) {
        this.$modal.msgError("请选择调用的应用");
        return;
      }

      let param = {
      };

      if (this.serviceInParamStr) {
        param = Object.assign(param, JSON.parse(this.serviceInParamStr));
      }

      const submitParam = {
        callId: this.currentAccessId,
        param: JSON.stringify(param),
      };

      this.tableLoading = true;
      queryService(submitParam)
        .then((res) => {
          this.tableLoading = false;
          this.tableData = res.data.data || [];
          this.total = res.data.total || 0;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    download() {
      if (!this.currentAccessId) {
        this.$modal.msgError("请选择调用数据的应用");
        return;
      }
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(
        document.querySelector(" #integration-table")
      );
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        // Blob 对象表示一个不可变、原始数据的类文件对象。
        // Blob 表示的不一定是JavaScript原生格式的数据。
        // File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
        // 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          // 设置导出文件名称
          this.resData.resName + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    addSelectedColumn() {
      this.selectedQueryColumn.push({
        id: this.selectedQueryColumn.length,
        colName: null,
        colVal: null,
        cond: null,
      });

      console.log(this.selectedQueryColumn);
    },
    removeSelectedColumn(id) {
      if (this.selectedQueryColumn.length === 1) {
        this.$modal.msgError("必须保留一条查询条件");
        return;
      }
      this.selectedQueryColumn = this.selectedQueryColumn.filter(
        (p) => p.id !== id
      );
    },
    goBack() {
      if (this.from === "myres") {
        this.$router.push({ path: "/customer/myres" });
      } else {
        this.$router.push({ path: "/customer/catalogue" });
      }
    },
    getAppliedApp() {
      myResources({
        resType: this.resType,
        resId: this.id,
      }).then((res) => {
        if (res.data && res.data.length > 0) {
          res.data.forEach((p) => {
            if (p.applicationName && p.applicationName.length > 10) {
              p.applicationName = p.applicationName.substr(0, 10);
            }
          });
        }
        this.appliedAppList = res.data;
        if (this.appliedAppList && this.appliedAppList.length > 0) {
          if (!this.currentAccessId) {
            this.currentAccessId = this.appliedAppList[0].accessId;
          }

          this.currentApp = this.appliedAppList.find(p => p.accessId === this.currentAccessId);
        }
        this.getResDetail();
      });
    },
    getDictLabel(dicts, val) {
      if (this.dict.type[dicts]) {
        const dict = this.dict.type[dicts].find((p) => p.value === val);
        if (dict) {
          return dict.raw.dictLabel;
        }
      }

      return null;
    },
    callback() {
      this.getAppliedApp();
    },
    catalogueCallBack(val) {
      this.$router.push({
        path: `/customer/catalogue?id=${val.id ? val.id : ""}`,
      });
    },
    initOutParams(data) {
      if (this.resType === "service") {
        this.outParams = data;
      } else {
        const outParams = [];
        if (data && data.length > 0) {
          data.forEach((p) => {
            outParams.push({
              id: p.id,
              paramName: p.columnName,
              paramComment: p.columnComment,
              dataType: p.columnType,
              remark: "",
              isRequired: p.isRequired,
            });
          });

          this.outParams = outParams;
        }
      }

      // 出参对象
      if (this.outParams && this.outParams.length > 0) {
        this.responseParam = {
          list: [arrayToJson(this.outParams, "paramName")],
          total: 0,
        };
      }

      console.log("outItem", data);
      console.log("outParams", this.outParams);
      // console.log("responseParam", this.responseParam);
    },
    initInParams(data) {
      if (this.resType === "service") {
        if (data && data.length > 0) {
          data.forEach((p) => {
            if (
              p.dataType === "Integer" ||
              p.dataType === "Double" ||
              p.dataType === "Float"
            ) {
              if (p.paramName !== "page" && p.paramName !== "pageSize") {
                p.defaultVal = 0;
              }
            }
          });
        }
        this.inParams = data;
      } else {
        const inParams = [];
        // inParams.push({
        //   id: 1,
        //   paramName: "cols",
        //   paramComment: "查询列名",
        //   remark: "要查询的列名数组，如['id', 'name']，不传表示取所有列",
        //   dataType: "Array",
        //   defaultVal: [],
        // });

        inParams.push({
          id: 2,
          paramName: "pageNo",
          paramComment: "页号",
          remark: "当前页号",
          dataType: "Integer",
          defaultVal: 1,
          isRequired: "Y",
        });

        inParams.push({
          id: 3,
          paramName: "pageSize",
          paramComment: "页大小",
          remark: "每页大小",
          dataType: "Integer",
          defaultVal: 10,
          isRequired: "Y",
        });

        inParams.push({
          id: 4,
          paramName: "query",
          paramComment: "查询条件",
          remark:
            "JSON数组，colName:列名, colVal:查询值, cond:运算符 0-等于 1-大于 2-小于。例如 status = 1，colName='status',colVal='1',cond=0，多个条件传入多个对象，目前只支持and",
          dataType: "Object",
          defaultVal: [{ colName: "", colVal: "", cond: 0 }],
        });

        this.inParams = inParams;
        this.searchParam = data.filter(
          (p) => p.isSearchable === "Y" && p.isVisable === "Y"
        );
      }

      // 入参对象
      if (this.inParams && this.inParams.length > 0) {
        this.requestParam = arrayToJson(this.inParams, "paramName");
        this.serviceInParamStr = JSON.stringify(arrayToJson(this.inParams, "paramName"));
      }

      console.log("inItem", data);
      console.log("inParams", this.inParams);
      console.log("searchParam", this.searchParam);
    },
    getResDetail() {
      const param = { id: this.id, resType: this.resType };
      getResource(param).then((res) => {
        // this.loading = false;
        this.resData = res.data;
        const outParam = {
          id: param.id,
          resType: param.resType,
          callId: this.currentAccessId,
        };
        getResourceOutItem(outParam).then((res) => {
          this.loading = false;
          if (res.data.resourceItem) {
            this.resourceItem = JSON.parse(res.data.resourceItem);
            this.initOutParams(this.resourceItem);
          } else {
            this.resourceItem = res.data;
            this.initOutParams(res.data);
          }
        });

        getResourceItem(param).then((res) => {
          this.allItem = res.data;
        });

        getResourceInItem(param).then((res) => {
          this.initInParams(res.data);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  min-height: calc(100vh - 84px);

  .left-tree {
    width: 270px;
    padding: 20px;
    box-shadow: 1px 0px 25px 0px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }

  .plate {
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    // min-height: 900px;
    background: #fafafa;
    display: flex;
    flex-direction: column;

    .record {
      margin: 30px 0 0 0;
      padding: 30px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 4px 4px 0px 0px;

      .detail-btn {
        display: flex;
      }

      .recFlex {
        display: flex;
        // align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;

        &.item {
          margin-bottom: 20px;
          &.last {
            margin-bottom: 0;
          }
        }

        .recTitle {
          display: flex;
          align-items: center;
          height: 36px;

          .wier2 {
            width: 4px;
            height: 20px;
            background: #2866ff;
            margin-right: 10px;
          }

          .title {
            font-size: 22px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-right: 10px;
          }
        }

        .recCont {
          width: 50%;
          flex-grow: 1;

          .recDet {
            display: flex;
            align-items: center;
            // margin-bottom: 20px;

            .recTxt {
              width: 128px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
            }

            .recText {
              width: 30%;
              // height: 22px;
              flex-grow: 1;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              overflow: hidden;
              padding-right: 20px;
            }

            .recText.on {
              color: #00b42a;
            }

            .recText.En {
              display: flex;
              align-items: center;

              .tag {
                margin-right: 10px;
              }
            }

            &.on {
              width: 100%;
            }
          }

          .recDet.on {
            margin-bottom: 0;
          }
        }
      }

      .recFlex.on {
        margin-bottom: 0;
      }
    }

    .tabs {
      width: 100%;
      // height: auto;
      flex-grow: 1;
      background: #ffffff;
      padding: 0 30px;
    }

    .btn {
      display: flex;
      justify-content: flex-end;
      margin-top: 30px;
    }

    .tabpane {
      // margin-top: 30px;
      background: #ffffff;
    }

    .detFlex {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      margin: 0 0 30px 0;

      .select {
        width: 200px;
        margin-right: 20px;
      }

      .upload {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2866ff;
        position: absolute;
        right: 0;
        top: 5px;
        cursor: pointer;
      }
      // .query {
      //   position: absolute;
      //   right: 100px;
      //   top: 0;
      // }
    }

    .paging {
      display: flex;
      justify-content: flex-end;
      // margin-top: 30px;
    }

    .living {
      width: 100%;
      padding: 20px;
      .livFlex {
        display: flex;
        margin-bottom: 20px;

        .livText {
          width: 130px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
        .livTxt {
          width: 60%;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;

          &.pop {
            color: #1890ff;
          }
        }
      }
    }
  }
}
.appselect {
  position: absolute;
  right: 130px;
  top: 0;
  z-index: 99;
}
.step-title {
  height: 20px;
  font-size: 16px;
  line-height: 14px;
  margin: 30px 0 5px 0;
  font-weight: 500;
}

.unapply {
  height: 36px;
  line-height: 36px;
  margin-right: 20px;
  color: #999999;
}
</style>
