import {
  FormInst,
  FormItemRule,
  FormRules,
  NButton,
  NCascader,
  NForm,
  NFormItem,
  NInput,
  NSpace,
  NSpin,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { materialCategorySave, materialCategoryUpdate } from '../api'
import { filterPointCategory } from '@/views/teaching-manage/unit-test'

export default defineComponent({
  name: 'addCategory',
  emits: ['handleSuccess', 'close'],
  props: ['item', 'list', 'isAdd'],
  setup(props, { emit }) {
    const message = useMessage()
    const loading = ref(false)
    const formRef = ref<FormInst | null>(null)
    const parentList = ref([
      { name: '顶级分类', id: '0' },
      ...filterPointCategory(props.list, 'subMaterialCategoryList')
    ] as any)
    const saveModel = reactive({
      id: props?.item?.id ? props?.item?.id : null,
      name: props?.item?.name || '',
      desc: props?.item?.desc || '', //描述
      parentId: props?.item?.parentId || '0'
    })
    const rules: FormRules = {
      name: [{ required: true, message: '请填写素材名称', trigger: ['blur', 'change'] }],
      desc: [{ required: true, message: '请填写素材描述', trigger: ['blur', 'change'] }]
    }
    const submit = () => {
      formRef.value?.validate(async (err) => {
        if (!err) {
          const params: any = {
            ...saveModel
          }
          let res: any = null
          console.log(params)
          if (saveModel.id) {
            res = await materialCategoryUpdate(params)
          } else {
            res = await materialCategorySave(params)
          }
          if (res?.code == 200) {
            message.success('保存成功')
            emit('handleSuccess')
          } else {
            message.warning('保存失败')
          }
        }
      })
    }
    return () => (
      <div>
        <NSpin show={loading.value}>
          <NForm
            ref={formRef}
            onSubmit={submit}
            labelPlacement="top"
            model={saveModel}
            rules={rules}
            require-mark-placement="left"
          >
            {props.isAdd && (
              <NFormItem label="父级分类" path="parentId">
                <NCascader
                  placeholder="请选择父级分类"
                  v-model:value={saveModel.parentId}
                  options={parentList.value}
                  checkStrategy="all"
                  expandTrigger="hover"
                  childrenField="subMaterialCategoryList"
                  valueField="id"
                  labelField="name"
                  clearable
                  filterable
                />
              </NFormItem>
            )}

            <NFormItem label="素材名称" path="name">
              <NInput v-model:value={saveModel.name} />
            </NFormItem>
            <NFormItem label="分类描述" path="desc">
              <NInput v-model:value={saveModel.desc} />
            </NFormItem>
          </NForm>
          <NSpace justify="end">
            <NButton onClick={() => emit('close')}>取消</NButton>
            <NButton type="primary" onClick={submit}>
              保存
            </NButton>
          </NSpace>
        </NSpin>
      </div>
    )
  }
})
