<template>
  <div class="wrap">
    <div class="chunk">
      <div class="title">
        <h1>API基本信息</h1>
        <el-divider></el-divider>
        <div class="content">
          <baseNewForm
            :isFunBtn="false"
            :spanNumber="8"
            :formRow="apiInfoformRow"
            :ruleForm="apiInforuleForm"
            :lookFlag="true"
            @clickLine="clickLine"
            ref="dialogForm"
          >
          </baseNewForm>
        </div>
      </div>
    </div>
    <div class="chunk">
      <div class="title">
        <h1>API开发信息</h1>
        <el-divider></el-divider>
        <div class="content">
          <baseNewForm
            :isFunBtn="false"
            :spanNumber="12"
            :formRow="apiExploitInfoformRow"
            :ruleForm="apiExploitInforuleForm"
            :lookFlag="true"
            ref="dialogForm"
          ></baseNewForm>
        </div>
      </div>
    </div>
    <div class="chunk">
      <div class="title">
        <h1>Headers入参</h1>
        <el-divider></el-divider>
        <div class="content">
          <baseTable
            ref="headerTable"
            :tableData="headerIntableData"
            :tableColumn="tableColumn"
          >
            <template #parameterType="{ row }">
              <div>
                {{ row.parameterType ? typedic[row.parameterType] : "" }}
              </div>
            </template>
            <template #concreteType="{ row }">
              <div>
                {{
                  row.concreteType == "ObjectCom" ? "Object" : row.concreteType
                }}
              </div>
            </template>
          </baseTable>
        </div>
      </div>
    </div>
    <div class="chunk">
      <div class="title">
        <h1>query入参</h1>
        <el-divider></el-divider>
        <div class="content">
          <baseTable
            ref="queryTable"
            :tableData="queryIntableData"
            :tableColumn="tableColumn"
          >
            <template #parameterType="{ row }">
              <div>
                {{ row.parameterType ? typedic[row.parameterType] : "" }}
              </div>
            </template>
            <template #concreteType="{ row }">
              <div>
                {{
                  row.concreteType == "ObjectCom" ? "Object" : row.concreteType
                }}
              </div>
            </template>
          </baseTable>
        </div>
      </div>
    </div>
    <div class="chunk">
      <div class="title">
        <h1>body入参</h1>
        <el-divider></el-divider>
        <div class="content">
          <baseTable
            ref="bodyInTable"
            :tableData="bodyIntableData"
            :tableColumn="tableColumn"
          >
            <template #parameterType="{ row }">
              <div>
                {{ row.parameterType ? typedic[row.parameterType] : "" }}
              </div>
            </template>
            <template #concreteType="{ row }">
              <div>
                {{
                  row.concreteType == "ObjectCom" ? "Object" : row.concreteType
                }}
              </div>
            </template>
          </baseTable>
        </div>
      </div>
    </div>
    <div class="chunk">
      <div class="title">
        <h1>body出参</h1>
        <el-divider></el-divider>
        <div class="content">
          <baseTable
            ref="bodyOutTable"
            :tableData="bodyOutableData"
            :tableColumn="tableColumn"
          >
            <template #parameterType="{ row }">
              <div>
                {{ row.parameterType ? typedic[row.parameterType] : "" }}
              </div>
            </template>
            <template #concreteType="{ row }">
              <div>
                {{
                  row.concreteType == "ObjectCom" ? "Object" : row.concreteType
                }}
              </div>
            </template>
          </baseTable>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button type="" @click="backPageHandle">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getApiModuleApi } from "@/api/apiChunks/index.js";
import baseTable from "./compoments/baseTable.vue";
import baseNewForm from "./compoments/baseNewForm.vue";
export default {
  data() {
    return {
      apiInfoformRow: [
        {
          elCol: [
            {
              title: "API名称",
              id: "apiCode",
            },
            {
              title: "API超时时间（秒）",
              id: "timeoutPeriod",
            },
            {
              title: "API功能描述",
              id: "apiRemark",
            },
          ],
        },
        {
          elCol: [
            {
              title: "归属应用",
              id: "appName",
            },
            {
              title: "允许访问入口",
              id: "enableAccessEntry",
            },
            {
              title: "接入协议",
              id: "serviceAccessProtocol",
            },
          ],
        },
        {
          elCol: [
            {
              title: "是否需要认证方法",
              id: "needLogin",
            },
            {
              type: "link",
              title: "认证接口名",
              id: "authName",
              show: false,
            },
            {
              title: "允许访问方法",
              id: "requestMethod",
            },
          ],
        },
        {
          elCol: [
            {
              title: "请求地址",
              id: "destinationAddress",
            },
          ],
        },
      ],
      apiExploitInfoformRow: [
        {
          elCol: [
            {
              title: "API创建者",
              id: "createUser",
            },
            {
              title: "API创建时间",
              id: "createTime",
            },
          ],
        },
      ],
      apiInforuleForm: {},
      apiExploitInforuleForm: {},
      queryIntableData: [],
      headerIntableData: [],
      bodyIntableData: [],
      bodyOutableData: [],
      tableColumn: [
        {
          type: "input",
          title: "请求参数",
          id: "parameterName",
        },
        {
          type: "newselect",
          title: "参数类型",
          id: "parameterType",
        },
        {
          type: "newselect",
          title: "具体类型",
          id: "concreteType",
        },
        {
          type: "input",
          title: "示例",
          id: "example",
        },
        {
          type: "input",
          title: "描述",
          id: "description",
        },
      ],
      typedic: {
        fundamental: "基本类型",
        complex: "复杂类型",
        fundamentallist: "基本列表",
        authport: "认证类型",
      },
      authInfo: {},
    };
  },
  methods: {
    clickLine() {
      this.$router.push({ name: "apiView", query: { id: this.authInfo.id } });
    },
    async getAuthInfo(id) {
      const res = await getApiModuleApi(
        {
          tl: "appApiService",
          as: "appApi",
          dj: "queryEntity",
        },
        { id }
      );
      if (res.status == 200) {
        this.authInfo = res.attribute;
        return res;
      }
    },
    async getApiModuleHandle() {
      const res = await getApiModuleApi(
        {
          tl: "appApiService",
          as: "appApi",
          dj: "queryEntity",
        },
        { id: this.$route.query.id }
      );
      if (res.status == 200) {
        if (res.attribute["needLogin"] == 1) {
          this.getAuthInfo(res.attribute.authenticationPort).then((val) => {
            this.apiInfoformRow[2]["elCol"][1]["show"] = true;
            this.$set(this.apiInforuleForm, "authName", val.attribute.apiCode);
          });
        } else {
          this.apiInfoformRow[2]["elCol"][1]["show"] = false;
        }
        let tempObj = { ...res.attribute };
        let obj = {
          needLogin: {
            1: "是",
            2: "否",
          },
          enableAccessEntry: {
            1: "APP",
            2: "H5",
          },
          requestCoding: {
            1: "UTF-8",
          },
          parameterPassingMode: {
            1: "query",
            2: "data",
          },
          requestMethod: {
            1: "POST",
            2: "GET",
          },
          serviceAccessProtocol: {
            1: "HTTP",
            2: "HTTPS",
          },
        };
        Object.keys(tempObj).forEach((item) => {
          if (obj[item]) {
            if (JSON.parse(tempObj[item]) instanceof Array) {
              let tempstr = "";
              JSON.parse(tempObj[item]).forEach((ele) => {
                tempstr += obj[item][ele] + "、";
              });
              tempObj[item] = tempstr.slice(0, -1);
            } else {
              tempObj[item] = obj[item][tempObj[item] * 1];
            }
          }
        });
        // tempObj.enableAccessEntry =
        //   tempObj.enableAccessEntry == 1 ? "app" : "H5";
        // tempObj.serviceAccessProtocol =
        //   tempObj.serviceAccessProtocol == 1 ? "HTTP" : "HTTPS";
        // tempObj.requestMethod = tempObj.requestMethod == 1 ? "POST" : "GET";
        this.apiInforuleForm = tempObj;
        this.apiExploitInforuleForm = tempObj;
        if (JSON.parse(res.attribute.queryIn) instanceof Array) {
          this.queryIntableData = JSON.parse(res.attribute.queryIn);
          this.$nextTick(() => {
            this.$refs.queryTable.setTableKey();
          });
        }
        if (JSON.parse(res.attribute.headerIn) instanceof Array) {
          this.headerIntableData = JSON.parse(res.attribute.headerIn);
          this.$nextTick(() => {
            this.$refs.headerTable.setTableKey();
          });
        }
        if (JSON.parse(res.attribute.bodyIn) instanceof Array) {
          this.bodyIntableData = JSON.parse(res.attribute.bodyIn);
          this.$nextTick(() => {
            this.$refs.bodyInTable.setTableKey();
          });
        }
        if (JSON.parse(res.attribute.bodyOut) instanceof Array) {
          this.bodyOutableData = JSON.parse(res.attribute.bodyOut);
          this.$nextTick(() => {
            this.$refs.bodyOutTable.setTableKey();
          });
        }
      }
    },
    backPageHandle() {
      this.$router.back();
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.getApiModuleHandle();
    }
  },
  components: {
    baseNewForm,
    baseTable,
  },
  watch: {
    "$route.query": {
      handler(new_value, old_value) {
        this.$router.go(0);
      },
    },
  },
};
</script>

<style lang='scss' scoped>
.wrap {
  width: 100%;
  height: 100%;
  overflow: scroll;
  background-color: #fff;
  border-radius: 10px;
  .chunk {
    margin: 20px 30px 60px;
    .title {
      font-size: 24px;
    }
  }
  .btn {
    margin: 30px;
  }
}
</style>
