import { NButton, NForm, NFormItem, NInput, NSelect, NSpace, useMessage } from 'naive-ui'
import { defineComponent, onMounted, PropType, reactive, ref } from 'vue'
import {
  musicalInstrumentSave,
  musicalInstrumentUpdate
} from '@views/system-manage/subject-manage/api'
import UploadFile from '@/components/upload-file'
import styles from './instrument-save.module.less'

export default defineComponent({
  name: 'role-operation',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object as PropType<any>,
      default: () => {}
    }
  },
  emits: ['close', 'getList'],
  setup(props, { slots, attrs, emit }) {
    const forms = reactive({
      name: null,
      code: null as any,
      img: null as any,
      media: null as any,
      enableFlag: null as any,
    })
    const btnLoading = ref(false)
    const formsRef = ref()
    const message = useMessage()

    const onSubmit = async () => {
      formsRef.value.validate(async (error: any) => {
        if (error) return false
        try {
          btnLoading.value = true
          // 多编码支持
          if (forms.code) {
            forms.code = forms.code.replace(/[，]/g, ',')
          }

          if (props.type === 'add') {
            await musicalInstrumentSave({
              ...forms,
            })
            message.success('添加成功')
          } else if (props.type === 'edit') {
            await musicalInstrumentUpdate({
              ...forms,
              id: props.data.id
            })
            message.success('修改成功')
          }

          emit('close')
          emit('getList')
        } catch {}
        btnLoading.value = false
      })
    }

    onMounted(async () => {
      if (props.type === 'edit') {
        const data = props.data
        forms.name = data.name
        forms.code = data.code
        forms.img = data.img
        forms.media = data.media
        forms.enableFlag = data.enableFlag
      }
    })

    return () => (
      <div class={styles.instrumentSave}>
        <NForm model={forms} ref={formsRef} label-placement="left" label-width="100px">
          <NFormItem
            label="乐器名称"
            path="name"
            rule={[
              {
                required: true,
                message: '请输入乐器名称'
              }
            ]}
          >
            <NInput
              v-model:value={forms.name}
              placeholder="请输入乐器名称"
              clearable
              maxlength={10}
              showCount
            ></NInput>
          </NFormItem>
          <NFormItem
            label="乐器编码"
            path="code"
            rule={[
              {
                required: true,
                message: '请输入乐器编码'
              }
            ]}
          >
            <NInput v-model:value={forms.code} placeholder="请输入乐器编码" clearable></NInput>
          </NFormItem>
          <NFormItem
            label="乐器封面"
            path="img"
            rule={[
              {
                required: true,
                message: '请上传乐器封面',
                trigger: ['input', 'blur']
              }
            ]}
          >
            <UploadFile
              v-model:fileList={forms.img}
              accept=".jpg,.jpeg,.png"
              cropper
              size={5}
              class={styles.updateFile}
              bucketName="news-info"
              options={{
                enlarge: 2,
                autoCropWidth: 150, //默认生成截图框宽度
                autoCropHeight: 250 //默认生成截图框高度
              }}
              tips="请上传比例为3:5，JPG、PNG图片"
            />
          </NFormItem>
          <NFormItem
              label="声部音频"
              path="media"
              rule={[
                {
                  required: true,
                  message: '请上传声部音频'
                }
              ]}
          >
            <UploadFile
                size={10}
                v-model:fileList={forms.media}
                listType="image"
                bucketName="gyt"
                tips="请上传音频文件"
                accept=".mp3"
            />
          </NFormItem>
        </NForm>

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