import {
  NButton,
  NCascader,
  NForm,
  NFormItem,
  NInput,
  NRadio,
  NRadioGroup,
  NSpace,
  NTreeSelect
} from 'naive-ui'
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  name: 'operation-forms',
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  emits: ['close', 'getList'],
  setup(props, { emit }) {
    const forms = reactive({
      appId: null,
      parentId: '',
      type: '',
      name: ''
    })
    const formsRef = ref()
    const btnLoading = ref(false)

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        btnLoading.value = true
        try {
          emit('close')
          emit('getList')
        } catch {}
        btnLoading.value = false
      })
    }
    return () => (
      <div style="background: #fff; padding-top: 12px">
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="100">
          <NFormItem
            label="应用分类"
            path="appId"
            rule={[
              {
                required: true,
                message: '请选择应用分类'
              }
            ]}
          >
            <NCascader
              v-model:value={forms.appId}
              options={[]}
              showPath={true}
              allowCheckingNotLoaded={false}
              checkStrategy="child"
              valueField="id"
              labelField="appName"
              childrenField="bizApps"
              placeholder="请选择应用分类"
              expandTrigger="hover"
              clearable
            ></NCascader>
          </NFormItem>
          <NFormItem
            label="上级菜单"
            path="parentId"
            rule={[
              {
                required: true,
                message: '请选择上级菜单'
              }
            ]}
          >
            <NTreeSelect
              v-model:value={forms.parentId}
              placeholder="请选择上级菜单"
              checkStrategy="parent"
              options={[]}
              showPath={false}
              keyField="id"
              labelField="name"
              virtualScroll
            />
          </NFormItem>
          <NFormItem
            label="菜单类型"
            path="type"
            rule={[{ required: true, message: '请选择上级菜单' }]}
          >
            <NRadioGroup v-model:value={forms.type}>
              <NSpace>
                <NRadio value={true}>菜单</NRadio>
                <NRadio value={false}>按钮</NRadio>
              </NSpace>
            </NRadioGroup>
          </NFormItem>

          <NFormItem
            label="菜单名称"
            path="name"
            rule={[
              {
                required: true,
                message: '请输入菜单名称',
                trigger: ['blur', 'input']
              }
            ]}
          >
            <NInput
              v-model:value={forms.name}
              placeholder="请输入菜单名称"
              clearable
              maxlength={100}
            ></NInput>
          </NFormItem>
        </NForm>

        <NSpace justify="end">
          <NButton type="default" onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton type="primary" onClick={() => onSubmit()} loading={btnLoading.value}>
            保存
          </NButton>
        </NSpace>
      </div>
    )
  }
})
