import {
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NSpace,
  NButton,
  useMessage,
  NCascader
} from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { saveMusicSheetCategories, resetMusicSheetCategories } from '../api'
import UploadFile from '@/components/upload-file'
import { filterPointCategory } from '@/views/teaching-manage/unit-test'
export default defineComponent({
  emits: ['close', 'getList'],
  props: ['actvieRow', 'isAdd', 'list'],
  name: 'eidt-categroy',
  setup(props, { emit }) {
    const route = useRoute()
    const orchestraId = route.query.orchestraId || ''
    const message = useMessage()
    const formRef = ref()
    const parentList = ref([
      { name: '顶级分类', id: 0 },
      ...filterPointCategory(props.list, 'musicSheetCategoriesList')
    ] as any)
    const state = reactive({
      loading: false,
      dataList: [] as any,
      btnLoading: false
    })
    const forms = reactive({
      id: '',
      name: '',
      lessonTargetDesc: '',
      sortNo: '',
      semesterNo: '',
      enableFlag: false,
      parentId: 0
    } as any)

    const onSubmit = async () => {
      formRef.value?.validate(async (errors: any) => {
        if (!errors) {
          try {
            if (!props.isAdd) {
              const { data } = await resetMusicSheetCategories({ ...forms })
              emit('getList')
              message.success('修改成功')
            } else {
              const { data } = await saveMusicSheetCategories({ ...forms })
              emit('getList')
              message.success('添加成功')
            }
          } catch (error) {}
        } else {
          // console.log(errors)
          // message.error(errors)
        }
      })
    }
    onMounted(() => {
      if (props?.actvieRow?.id && !props.isAdd) {
        for (let key in props?.actvieRow) {
          forms[key] = props?.actvieRow[key]
        }
      } else if (props?.actvieRow?.id && props.isAdd) {
        forms.parentId = props?.actvieRow.id + ''
      }
    })
    return () => (
      <div>
        <NForm ref={formRef} model={forms}>
          {props.isAdd && (
            <NFormItem label="父级分类" path="parentId">
              <NCascader
                placeholder="请选择父级分类"
                v-model:value={forms.parentId}
                options={parentList.value}
                checkStrategy="all"
                expandTrigger="hover"
                childrenField="musicSheetCategoriesList"
                valueField="id"
                labelField="name"
                clearable
                filterable
              />
            </NFormItem>
          )}

          <NFormItem
            label="教材名称"
            rule={[
              {
                required: true,
                message: '请输入教材名称',
                trigger: ['blur', 'input']
              }
            ]}
            path="name"
          >
            <NInput
              v-model:value={forms.name}
              placeholder="请输入教材名称"
              maxlength={500}
              clearable
            ></NInput>
          </NFormItem>
          <NFormItem
            label="教材封面"
            path="coverImg"
            rule={[
              {
                required: true,
                message: '请上教材封面',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <UploadFile
              v-model:fileList={forms.coverImg}
              accept=".jpg,.jpeg,.png"
              cropper
              options={{
                enlarge: 1, //  图片放大倍数
                autoCropWidth: 349, //默认生成截图框宽度
                autoCropHeight: 141 //默认生成截图框高度
              }}
              size={1}
              tips="请上传请上传尺寸为349*141大小1M以内的JPG、PNG图片"
            />
          </NFormItem>
        </NForm>
        <NSpace justify="end">
          <NButton type="default" onClick={() => emit('close')}>
            取消
          </NButton>
          <NButton
            type="primary"
            onClick={() => onSubmit()}
            loading={state.btnLoading}
            disabled={state.btnLoading}
          >
            确认
          </NButton>
        </NSpace>
      </div>
    )
  }
})
