<template>
  <a-card>
    <sd-data-table
      ref="table"
      data-url="api/framework/v1/navigator/appInfos/query"
      :columns="columns"
      show-selection
      :actions="actions"
      :row-key="'id'"
      :search-fields="['appName', 'appCode', 'typeName']"
      @rowClick="rowClick"
    >
    </sd-data-table>
    <a-modal
      :visible="visible"
      title="多应用注册管理"
      :width="800"
      destroy-on-close
      :confirm-loading="loading"
      @ok="submit"
      @cancel="handleCancel"
    >
      <sd-form ref="form" :init-values="form" :class="$style.appsForm">
        <template v-slot="{ model }">
          <sd-form-item name="id" hidden />
          <sd-form-item name="typeName">
            <a-select v-model="model.typeName" :options="appTypeList" @change="appTypeChange">
            </a-select>
          </sd-form-item>
          <sd-form-item name="appType">
            <a-input v-model="model.appType" disabled />
          </sd-form-item>
          <sd-form-item name="group">
            <sd-group-picker
              v-model="model.group"
              :root-node="rootNode"
              :hierarchical="false"
              single
              @change="appGroupChange"
            />
          </sd-form-item>
          <sd-form-item name="groupCode">
            <a-input v-model="model.groupCode" disabled />
          </sd-form-item>

          <sd-form-item name="appName" />
          <sd-form-item name="appCode">
            <a-input v-model="model.appCode">
              <a-tooltip
                slot="suffix"
                title="应用id是分布式应用的唯一标识，需要按照应用的实际部署来设置（例如只部署了一个公文应用集群则只需设置一条应用数据，如按照组织机构部署了多套应用则设置多条应用数据，可以将组织机构id做为应用id的组成部分）。应用id与该应用的微服务名称是一一对应的可以参照设置。"
              >
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </a-input>
          </sd-form-item>
          <sd-form-item name="protocolPc" />
          <sd-form-item name="urlPc">
            <a-input
              v-model="model.urlPc"
              placeholder="如https://demo.weoffice.com:8081/xcoa"
            ></a-input>
          </sd-form-item>
          <sd-form-item name="urlRestApi">
            <a-input
              v-model="model.urlRestApi"
              placeholder="如https://demo.weoffice.com:8081/xcoa/api"
            ></a-input>
          </sd-form-item>

          <sd-form-item name="protocolMobile" />
          <sd-form-item name="urlMobile">
            <a-input
              v-model="model.urlMobile"
              placeholder="如https://demo.weoffice.com:8081/xcoa"
            ></a-input>
          </sd-form-item>
          <sd-form-item name="extendField" />
        </template>
      </sd-form>
    </a-modal>
  </a-card>
</template>

<script>
import TableActionTypes from '@/common/services/table-action-types'
import { message } from 'ant-design-vue'
import workbenchService from './workbench-service'
import components from './_import-components/sd-apps-register-manage-import'
const columns = [
  {
    customRender: (text, record, index) => `${index + 1}`,
    title: '序号',
    width: '100px',
  },
  {
    dataIndex: 'id',
    sdHidden: true,
  },
  {
    dataIndex: 'appName',
    title: '应用名',
    sdClickable: true,
  },
  {
    dataIndex: 'typeName',
    title: '应用类型',
  },
  {
    dataIndex: 'urlPc',
    title: 'PC端地址',
  },
  {
    dataIndex: 'urlMobile',
    title: '移动端地址',
  },
  {
    title: '创建时间',
    dataIndex: 'creationTime',
    defaultSortOrder: 'asc',
    sdHidden: true,
  },
]
const typeList = [
  {
    label: 'http',
    value: 'http',
  },
  {
    label: 'https',
    value: 'https',
  },
]
export default {
  name: 'SdAppsRegisterManage',
  metaInfo: {
    title: '多应用注册管理',
  },
  components,
  data() {
    return {
      columns,
      loading: false,
      visible: false,
      typeList: [],
      appTypeList: [],
      actions: [
        {
          label: '新建',
          id: 'new',
          permission: 'setAppInfo-create',
          type: TableActionTypes.primary,
          callback: () => (this.visible = true),
        },
        {
          label: '删除',
          id: 'delete',
          permission: 'setAppInfo-delete',
          type: TableActionTypes.batch,
          callback: (keys) => {
            workbenchService.deleteApps(keys).then((res) => {
              if (res.data) {
                this.$refs.table.refresh()
              }
            })
          },
        },
      ],
      form: [
        {
          name: 'id',
          caption: 'id',
          dataType: 'string',
        },
        {
          name: 'typeName',
          caption: '分布式应用类型',
          dataType: 'strng',
          required: true,
        },
        {
          name: 'appType',
          caption: '分布式应用类型ID',
          dataType: 'string',
          required: true,
        },
        {
          name: 'group',
          caption: '对应的组织',
          dataType: 'selectperson',
          required: true,
          attr: {
            selectionType: 'GROUP',
          },
        },
        {
          name: 'groupName',
          caption: '组织名称',
          dataType: 'string',
          required: true,
        },
        {
          name: 'groupCode',
          caption: '组织ID',
          dataType: 'string',
          required: true,
        },
        {
          name: 'appName',
          caption: '分布式应用名',
          dataType: 'string',
          required: true,
        },
        {
          name: 'appCode',
          caption: '应用ID',
          dataType: 'string',
          required: true,
        },
        {
          name: 'protocolPc',
          caption: 'PC端协议类型',
          dataType: 'selectlist',
          attr: {
            selectListItem: typeList,
          },
          required: true,
        },
        {
          name: 'urlPc',
          caption: 'PC端访问地址',
          dataType: 'string',
          required: true,
        },
        {
          name: 'urlRestApi',
          caption: 'PC管理端访问地址',
          dataType: 'string',
          required: true,
        },
        {
          name: 'protocolMobile',
          caption: '移动端协议类型',
          dataType: 'selectlist',
          attr: {
            selectListItem: typeList,
          },
        },
        {
          name: 'urlMobile',
          caption: '移动端访问地址',
          dataType: 'string',
        },
        {
          name: 'extendField',
          caption: '扩展字段',
          dataType: 'string',
          required: false,
        },
      ],
      rootNode: undefined,
    }
  },
  created() {
    workbenchService.getappTypeList().then((res) => {
      if (res) {
        this.appTypeList = res.map((item) => {
          return {
            label: item.typeName,
            value: item.typeName,
            code: item.typeCode,
          }
        })
      }
    })
    // 获取当前用户可选择的部门(分级)根节点
    workbenchService.getRootNode({ hierarchical: '1' }).then((res) => {
      const root = res.data
      if (root) {
        this.rootNode = { code: root.id, name: root.text }
      }
    })
  },
  methods: {
    rowClick(record) {
      record.group = [{ name: record.groupName, code: record.groupCode, type: 'Group' }]
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.setFieldsValue(record)
      })
    },
    submit() {
      this.$refs.form.validateFields().then(() => {
        this.loading = true
        const params = this.$refs.form.getFieldsValue()
        workbenchService
          .saveApps(params)
          .then((res) => {
            this.visible = false
            this.$refs.table.refresh()
          })
          .catch((err) => {
            message.error(err.response?.data?.message || '保存失败')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    appTypeChange(name) {
      const code = this.appTypeList.find((item) => item.value === name)?.code
      this.$refs.form.setFieldsValue({
        typeName: name,
        appType: code,
        appName: (this.$refs.form.getFieldValue('groupName') || '') + '-' + name,
        appCode: (this.$refs.form.getFieldValue('appCode') || '') + '-' + code,
      })
    },
    appGroupChange([value]) {
      this.$refs.form.setFieldsValue({
        groupName: value.name,
        groupCode: value.code,
        appName: value.name + '-' + (this.$refs.form.getFieldValue('typeName') || ''),
        appCode: value.code + '-' + (this.$refs.form.getFieldValue('appType') || ''),
      })
    },
    handleCancel() {
      this.$refs.form.resetFields()
      this.visible = false
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.apps-form > :global(.ant-form-item .ant-form-item-label) {
  width: 21%;
}
</style>
