<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <div class="w-2/5 flex justify-end">
          <a-button @click="handleOnAdd" type="primary" class="ml-3"><PlusOutlined />新增版本信息</a-button>
        </div>
      </template>
    </BasicTable>
    <BasicModal @register="registerModal" title="添加新的版本" @ok="handleOnsubmit">
      <BasicForm @register="registerForm" ref="formRef">
        <!-- <template #canLogin="{ model, field }">
          <a-radio-group v-model:value="model[field]" class="ml-4">
            <a-radio-button :value="1">{{ model[field] === 1 ? '已开启' : '开启' }}</a-radio-button>
            <a-radio-button :value="0">{{ model[field] === 0 ? '已禁止' : '禁止' }}</a-radio-button>
          </a-radio-group>
        </template> -->
      </BasicForm>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, nextTick, ref } from 'vue'
  import { BasicTable, useTable } from '/@/components/Table'
  import { getTableColumns } from './tableColumns'
  import { getVersionList, addVersion } from '/@/api/sys/manager'
  import { BasicForm, FormActionType, useForm, FormSchema } from '/@/components/Form'
  import { BasicModal, useModal } from '/@/components/Modal'
  import { VersionItem } from '/@/api/sys/model/managerModel'
  import { useMessage } from '/@/hooks/web/useMessage'
  import { PlusOutlined } from '@ant-design/icons-vue'

  export default defineComponent({
    name: 'ManagerList',
    components: {
      BasicTable,
      BasicForm,
      BasicModal,
      PlusOutlined
    },
    setup() {
      const { createMessage } = useMessage()
      const formRef = ref<Nullable<FormActionType>>(null)
      const schemas = computed<FormSchema[]>(() => [
        {
          field: 'id',
          label: 'Id',
          component: 'Input',
          show: false
        },
        {
          field: 'name',
          label: '版本名称',
          required: true,
          component: 'Input'
        },
        {
          field: 'content',
          label: '用户组',
          component: 'InputTextArea',
          required: false
        }
      ])
      const [registerForm] = useForm({
        schemas,
        showActionButtonGroup: false
      })
      const [registerModal, { openModal }] = useModal()
      async function handleOnEdit(item: VersionItem) {
        openModal()
        await nextTick()
        formRef.value?.setFieldsValue(item)
      }

      async function handleOnAdd() {
        openModal()
        await nextTick()
        formRef.value?.resetFields()
      }
      function reloadTable() {
        reload()
      }
      const [registerTable, { reload }] = useTable({
        columns: getTableColumns((item: VersionItem) => handleOnEdit(item), reloadTable),
        canResize: true,
        api: getVersionList
      })

      function handleOnsubmit() {
        formRef.value?.validate().then((values: Omit<VersionItem, 'id'>) => {
          try {
            addVersion(values)
            createMessage.success('新增成功')
          } catch (error) {
            return
          } finally {
            reload()
            openModal(false)
          }
        })
      }
      return { registerTable, registerForm, registerModal, formRef, handleOnsubmit, handleOnAdd }
    }
  })
</script>
