<template>
  <div>
    <BasicTable @register="registerTable" />
    <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 { getManagerList, updateBackStageStaff } from '/@/api/sys/manager'
  import { BasicForm, FormActionType, useForm, FormSchema } from '/@/components/Form'
  import { BasicModal, useModal } from '/@/components/Modal'
  import { ManagerItem, PermGroupItem } from '/@/api/sys/model/managerModel'
  import { Radio } from 'ant-design-vue'
  import { useUserStore } from '/@/store/modules/user'
  import { useMessage } from '/@/hooks/web/useMessage'

  export default defineComponent({
    name: 'ManagerList',
    components: {
      BasicTable,
      BasicForm,
      BasicModal,
      ARadioGroup: Radio.Group,
      ARadioButton: Radio.Button
    },
    setup() {
      const { createMessage } = useMessage()
      const formRef = ref<Nullable<FormActionType>>(null)
      const userStore = useUserStore()
      const permGroupList = computed<PermGroupItem[]>(() => userStore.getPermGroupList)
      if (!permGroupList.value.length) {
        userStore.fetchPermGroupList()
      }
      const schemas = computed<FormSchema[]>(() => [
        {
          field: 'id',
          label: 'Id',
          component: 'Input',
          show: false
        },
        {
          field: 'username',
          label: '用户名(cld)',
          required: true,
          component: 'Input',
          componentProps: {
            disable: true
          }
        },
        {
          field: 'groupId',
          label: '用户组',
          component: 'Select',
          required: true,
          componentProps: {
            options: permGroupList.value.map(item => ({ label: item.name, value: item.id }))
          }
        },
        {
          field: 'telephone',
          label: '手机',
          component: 'Input'
        },
        {
          field: 'fixedphone',
          label: '电话',
          component: 'Input'
        },
        {
          field: 'email',
          label: '邮箱',
          component: 'Input'
        },
        {
          field: 'qq',
          label: 'QQ',
          component: 'Input'
        },
        {
          field: 'position',
          label: '职位',
          component: 'Input'
        },
        {
          field: 'canLogin',
          label: '登录使用',
          component: 'Switch',
          required: true,
          slot: 'canLogin'
        }
      ])
      const [registerForm] = useForm({
        schemas,
        showActionButtonGroup: false
      })
      const [registerModal, { openModal }] = useModal()
      async function handleOnEdit(item: ManagerItem) {
        openModal()
        await nextTick()
        formRef.value?.setFieldsValue(item)
      }
      const [registerTable, { reload }] = useTable({
        columns: getTableColumns((item: ManagerItem) => handleOnEdit(item), permGroupList),
        canResize: true,
        api: getManagerList
      })

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