<template>
  <a-card>
    <sd-data-table-ex
      ref="table"
      form-id="weThirdPartySystemInfo"
      page-id="base/thirdpartysystem/weThirdPartySystemInfo"
      :columns="columns"
      :actions="actions"
      show-selection
      :search-fields="['name']"
      @formBtnClick="formBtnClick"
    >
      <template v-slot:form="{ model }">
        <table>
          <colgroup>
            <col :class="$style.lable" />
            <col :class="$style.input" />
            <col :class="$style.lable" />
            <col :class="$style.input" />
          </colgroup>
          <tr>
            <!-- 系统名称 -->
            <sd-form-item-td name="name" />
            <!-- 系统ID -->
            <sd-form-item-td name="code" :input-props="{ disabled: true }" />
          </tr>
          <tr>
            <!-- 系统秘钥 -->
            <sd-form-item-td name="secret" :input-props="{ disabled: true }" :colspan="4" />
          </tr>
          <tr>
            <!-- 联系人姓名 -->
            <sd-form-item-td name="linkManName" />
            <!-- 联系人电话 -->
            <sd-form-item-td name="linkManTel" />
          </tr>
          <tr>
            <!-- 状态 -->
            <sd-form-item-td name="status" />
          </tr>
          <tr>
            <!-- 系统描述 -->
            <sd-form-item-td name="desc" :colspan="4">
              <a-textarea v-model="model.desc" :auto-size="{ minRows: 3, maxRows: 5 }" />
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 业务类型 -->
            <sd-form-item-td name="businessTypeRange" :colspan="4" />
          </tr>
          <tr>
            <!-- 选择业务类型 -->
            <sd-form-item-td name="businessField" :input-props="{ defaultValue: [] }" :colspan="4">
              <sd-business-type-picker v-model="model.businessField" />
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 用户类型 -->
            <sd-form-item-td name="userRange" :colspan="4" />
          </tr>
          <tr>
            <!-- 业务用户 子表 -->
            <sd-form-item-td name="systemUserList" :label="null" :colspan="4">
              <template v-slot:input-form="scope">
                <!-- 选中用户 -->
                <sd-form-item name="systemUser">
                  <sd-user-picker
                    v-model="scope.model.systemUser"
                    :single="true"
                    :read-only="false"
                  />
                </sd-form-item>
                <!-- 选择业务类型 -->
                <sd-form-item name="userBusinessTypeRange" />
                <!-- 选中业务 -->
                <sd-form-item name="userBusinessField" :input-props="{ defaultValue: [] }">
                  <sd-business-type-picker
                    v-if="model.businessTypeRange === 'all'"
                    v-model="scope.model.userBusinessField"
                  />
                  <sd-list-picker
                    v-else
                    v-model="scope.model.userBusinessField"
                    :load-list-data="loadListData"
                  ></sd-list-picker>
                </sd-form-item>
              </template>
              <!-- 展示所选业务插槽 -->
              <template v-slot:input-userBusinessField="{ text }">
                <div v-if="text">
                  <span v-for="(item, index) in JSON.parse(text)" :key="index">
                    {{ item.name }},</span
                  >
                </div>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 白名单 子表 -->
            <sd-form-item-td name="whiteHostEntityList" :label="null" :colspan="4">
              <template v-slot:input-form>
                <sd-form-item name="ip"></sd-form-item>
                <sd-form-item name="ipDesc"></sd-form-item>
              </template>
            </sd-form-item-td>
          </tr>
          <tr>
            <!-- 接入方式说明 -->
            <td :colspan="4">
              <div>
                <sd-access-explanation :code="model.code" :secret="model.secret" />
              </div>
            </td>
          </tr>
        </table>
      </template>
    </sd-data-table-ex>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import TableActionTypes from '@/common/services/table-action-types'
import TableColumnTypes from '@/common/services/table-column-types'
import components from './_import-components/sd-third-system-list-import'

export default {
  name: 'SdThirdSystemList',
  metaInfo: {
    title: '第三方系统列表',
  },
  components,
  data() {
    return {
      typeText: '', // 接入说明
      columns: [
        {
          title: '第三方系统名称',
          dataIndex: 'name',
          sdClickable: true,
        },
        {
          title: '第三方系统ID',
          dataIndex: 'code',
        },
        {
          title: '联系人',
          dataIndex: 'linkManName',
        },
        {
          title: '联系人电话',
          dataIndex: 'linkManTel',
        },
        {
          title: '开通时间',
          dataIndex: 'creationTime',
          defaultSortOrder: 'descend',
          sorter: true,
          sdRender: TableColumnTypes.dateTime,
        },
        {
          title: '状态',
          dataIndex: 'status',
          sdRender: TableColumnTypes.ex.switch,
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.ex.create,
        },
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.ex.delete,
        },
      ],
    }
  },
  methods: {
    loadListData() {
      if (this.$refs.table.getDetailModal().getFieldValue('businessField')) {
        return this.$refs.table.getDetailModal().getFieldValue('businessField')
      } else {
        return []
      }
    },
    getSelectedRowKeys() {
      this.fnShowType()
    },
    // 接入说明展示
    fnShowType() {
      this.typeText = `对接方式说明：

      1 第三方系统申请令牌
      申请token接口：http://ip:port/contextPath/api/framework/v1/wethirdpartysystemlogin/getToken
      请求方法：POST
      请求参数：{
                         "appId":"'${'secret'}'",
                         "appSecret":"'${'id'}'",
                         "userAccount":"配置的系统用户"
                        }
      响应结果：{
                         "expires_refresh":刷新令牌有效期,
                         "expires_in":令牌有效期,
                         "access_token":"令牌",
                         "refresh_token":"刷新令牌"
                        }

      2 第三方系统调用业务接口 请求头中携带token;Authorization: Bearer {access_token}

      3 第三方系统通过刷新令牌更换令牌
      刷新token接口：http://ip:port/contextPath/api/refresh
      请求方法：POST(headers: { 'content-type': 'application/x-www-form-urlencoded' })
      请求参数：token={refresh_token}
      响应结果：{
                         "expires_refresh":刷新令牌有效期,
                         "expires_in":令牌有效期,
                         "access_token":"令牌",
                         "refresh_token":"刷新令牌"
                        }`
    },
    formBtnClick(evt, btn, { form }) {
      switch (btn.buttonId) {
        case 'save':
          evt.waitUntil(
            new Promise((resolve, reject) => {
              const businessTypeRange = form.getFieldValue('businessTypeRange')
              const businessField = form.getFieldValue('businessField')
              if (businessTypeRange === 'range' && businessField.length === 0) {
                Message.error('授权业务按范围时至少选择一个业务类型。')
                evt.preventDefault()
              }
              const userRange = form.getFieldValue('userRange')
              const systemUserList = form.getFieldValue('systemUserList')
              if (userRange === 'range' && systemUserList === undefined) {
                Message.error('授权用户按范围时至少选择一个用户。')
                evt.preventDefault()
              }
              if (systemUserList !== undefined) {
                const rangeArr = systemUserList.filter(
                  (item) =>
                    item.userBusinessTypeRange === 'range' && item.userBusinessField === '[]'
                )
                if (rangeArr.length !== 0) {
                  Message.error('用户子表中选择按范围时至少选择一个业务类型')
                  evt.preventDefault()
                }
              }
              resolve()
            })
          )
          break
        default:
          break
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.lable {
  width: 20%;
}
.input {
  width: 30%;
}
</style>
