/****************************************************************************
所属系统: 组件库 所属模块: 操场 - 按钮组件 创建时间: 2020年3月10日10:50:28
维护人: 陈泽光 *┌──────────────────────────────────────────────────────────────┐
*│　此技术信息为本公司机密信息，未经本公司书面同意禁止向第三方披露．│
*│　版权所有：杰人软件(深圳)有限公司　 　　　　　　　　　　 │
*└──────────────────────────────────────────────────────────────┘
***************************************************************************/

<template>
  <div class="content">
    <h2
      style="cursor: pointer;"
      class="j-mb-20"
      @click="showIntro = !showIntro"
    >
      后端接口配置公示
    </h2>
    <div v-show="showIntro">
      <p>启用转发请求处理，需要在使用组件库时传入第二个参数：当前环境。</p>
      <pre>
Vue.use(JrUi, {
  env: process.env.VUE_APP_BULID_TYPE
});
</pre
      >
      <p>
        此时组件库中的所有涉及到请求的部分<strong>（请求库，带有请求的组件）</strong>，都会默认根据当前环境以及请求的api路由进行基础地址补全。
      </p>
      <p>
        比如使用请求库进行请求时，如 api.js 中调用请求库传入的
        url，不存在基础地址时。请求库会进行上述规则转发
      </p>
      <p>比如上传组件，未提供 action 属性时，上传组件会根据上述规则转发</p>
      <h3>如何保证完全向下兼容？</h3>
      <p>
        如api使用请求库，传入的url带有基础路径。需要请求的组件提供了具体 action
        值。组件库就不会进行请求转发处理
      </p>
      <h3>转发逻辑的处理顺序</h3>
      <p>1. 如传入的url地址以http 或 // 开头，不做转发处理</p>
      <p>2. 尝试从配置表中读取该次请求所属的后端地址</p>
      <p>
        3. 如配置表不存在该次请求对应的后端地址，则使用传入的默认地址
        `baseUrl`，作为基础地址
      </p>
      <p class="warning" style="border: 0px">
        当启用了请求转发的模式时，也能够对指定的后端使用特定的请求路径。支持两种修改方式：<strong
          >全局、单个</strong
        >
      </p>
      <h3>全局配置：</h3>
      <pre>
// 对api/ams路径的后端接口进行修改处理
const http = HttpClient(axios, {
  baseUrlData: {
    "api/ams": {
      "29": "http://192.168.99.43:6667",
      "219": "http://192.168.99.33:8875"
    }
  }
});
</pre
      >
      <h3>单个配置：</h3>
      <pre>
// 此次请求使用自定义后端基础路径
export const getCourseList = () => {
  const url = `http://192.168.99.43:6678/api/AMS/Course/GetCompulsoryCourseAndLevel`;
  return http({
    url
  });
};
</pre
      >
      <h3>组件提供具体的action值</h3>
      <pre>
// 此次请求使用自定义后端基础路径
&lt;jr-upload ref="jrInput"
            accept="image/*"
            action="http://192.168.99.43:8875"
            :maxSize="size"
            @add-file='getFile'
            @file-result="getResult" /&gt;
</pre
      >
      <hr />
      <h3>如何补充遗漏的后端配置？</h3>
      <img src="./help.jpg" alt="" />
    </div>
    <h3 v-if="errorCount" class="warning">
      当前存在 {{ errorCount }} 处配置遗漏，请及时补充处理
    </h3>

    <div class="left">
      <template v-for="(item, index) in baseUrlList">
        <p class="nav">{{ item.sysName }}</p>
        <template v-for="(env, envIndex) in envList">
          <p :class="{ warning: !item[env] }">
            <label>{{ env }}：</label> {{ item[env] }}
          </p>
        </template>
      </template>
    </div>

    <div class="right"></div>
  </div>
</template>

<script>
import httpClientUtils from "../../httpClient/utils";

export default {
  name: "baseUrlView",
  label: "后端接口配置公示",
  isDev: true,
  data() {
    return {
      showIntro: false,
      errorCount: 0,
      baseUrlList: [],
      envList: ["29", "219", "170", "pro"]
    };
  },
  async created() {
    const baseUrl = await httpClientUtils.getBaseUrl("29");

    this.baseUrlList = Object.keys(baseUrl).map(sysName => {
      const sysObj = baseUrl[sysName];
      sysObj.sysName = sysName;
      this.envList.forEach(env => {
        if (!sysObj[env]) {
          this.errorCount++;
        }
      });
      return sysObj;
    });
  }
};
</script>

<style lang="scss" scoped>
.warning {
  color: red;
  border: 1px solid red;
}

h3 {
  margin-top: 20px;
}
</style>