import { NForm, NFormItem, NInput, NInputNumber, NSpace, NButton, useMessage } from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { lessonPlanSave, lessonPlanUpdate } from '../api'
export default defineComponent({
  emits: ['close', 'getList'],
  props: ['actvieRow'],
  name: 'eidt-plan',
  setup(props, { emit }) {
    const route = useRoute()
    const orchestraId = route.query.orchestraId || ''
    const message = useMessage()
    const formRef = ref()
    const state = reactive({
      loading: false,
      dataList: [] as any,
      btnLoading: false
    })
    const forms = reactive({
      id: '',
      name: '',
      lessonTargetDesc: '',
      sortNo: '',
      semesterNo: '',
      enableFlag: false
    } as any)
    const getData = async () => {}

    const onSubmit = async () => {
      console.log('formRef', formRef.value)
      formRef.value?.validate(async (errors: any) => {
        if (!errors) {
          try {
            if (props?.actvieRow?.id) {
              const { data } = await lessonPlanUpdate({ ...forms })
              emit('getList')
              message.success('修改成功')
            } else {
              const { data } = await lessonPlanSave({ ...forms })
              emit('getList')
              message.success('添加成功')
            }
          } catch (error) {}
        } else {
          // console.log(errors)
          // message.error(errors)
        }
      })
    }
    onMounted(() => {
      console.log(props?.actvieRow?.id, '查询id')
      if (props?.actvieRow?.id) {
        for (let key in props?.actvieRow) {
          forms[key] = props?.actvieRow[key]
          console.log(key , props?.actvieRow[key])
        }
      }
    })
    return () => (
      <div>
        <NForm ref={formRef} model={forms}>
          <NFormItem
            label="教学计划名称"
            rule={[
              {
                required: true,
                message: '请输入教学计划名称',
                trigger: ['blur', 'input']
              }
            ]}
            path="name"
          >
            <NInput
              v-model:value={forms.name}
              placeholder="请输入教学计划名称"
              maxlength={50}
              clearable
            ></NInput>
          </NFormItem>
          <NFormItem
            label="学期数"
            rule={[
              {
                required: true,
                pattern: /^[1-6]$/,
                message: '请输入数字为1-6的学期数',
                trigger: ['blur', 'input']
              }
            ]}
            path="sortNo"
          >
            <NInputNumber
              style={{ width: '100%' }}
              v-model:value={forms.sortNo}
              placeholder="请输入学期数"
              maxlength={50}
              clearable
            ></NInputNumber>
          </NFormItem>
          {/* <NFormItem
            label="排序值"
            rule={[
              {
                required: true,
                pattern: /^\d+$/,
                message: '请输入排序值',
                trigger: ['blur', 'input']
              }
            ]}
            path="sortNo"
          >
            <NInputNumber
              style={{ width: '100%' }}
              v-model:value={forms.sortNo}
              placeholder="请输入排序值"
              maxlength={50}
              clearable
            ></NInputNumber>
          </NFormItem> */}
          <NFormItem
            label="教学目标"
            rule={[
              {
                required: true,
                message: '请输入教学目标',
                trigger: ['blur', 'input']
              }
            ]}
            path="lessonTargetDesc"
          >
            <NInput
              v-model:value={forms.lessonTargetDesc}
              type="textarea"
              placeholder="请输入教学目标"
              maxlength={500}
              clearable
            ></NInput>
          </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>
    )
  }
})
