<template>
  <el-dialog :title="t('mp.createNewVideo')" v-model="showDialog" width="600px">
    <el-upload
      :action="UPLOAD_URL"
      :headers="HEADERS"
      multiple
      :limit="1"
      :file-list="fileList"
      :data="uploadData"
      :before-upload="beforeVideoUpload"
      :on-error="onUploadError"
      :on-success="onUploadSuccess"
      ref="uploadVideoRef"
      :auto-upload="false"
      class="mb-5"
    >
      <template #trigger>
        <el-button type="primary" plain>{{t('mp.selectVideo')}}</el-button>
      </template>
      <template #tip>
        <span class="el-upload__tip" style="margin-left: 10px"
          >{{t('mp.tips0')}}</span
        >
      </template>
    </el-upload>
    <el-divider />
    <el-form :model="uploadData" :rules="uploadRules" ref="uploadFormRef">
      <el-form-item :label="t('mall.title')" prop="title">
        <el-input
          v-model="uploadData.title"
          :placeholder="t('mp.tips1')"
        />
      </el-form-item>
      <el-form-item :label="t('mp.description')" prop="introduction">
        <el-input
          :rows="3"
          type="textarea"
          v-model="uploadData.introduction"
          :placeholder="t('mp.tips2')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showDialog = false">{{t('common.cancel')}}</el-button>
      <el-button type="primary" @click="submitVideo">{{t('common.save')}}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import type {
  FormInstance,
  FormRules,
  UploadInstance,
  UploadProps,
  UploadUserFile
} from 'element-plus'
import { HEADERS, UploadData, UPLOAD_URL, UploadType, beforeVideoUpload } from './upload'
const { t } = useI18n()

const message = useMessage()

const accountId = inject<number>('accountId')

const uploadRules: FormRules = {
  title: [{ required: true, message: t('mp.pleaseEnterTitle'), trigger: 'blur' }],
  introduction: [{ required: true, message: t('mp.pleaseEnterDescription'), trigger: 'blur' }]
}

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits<{
  (e: 'update:modelValue', v: boolean)
  (e: 'uploaded', v: void)
}>()

const showDialog = computed<boolean>({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

const fileList = ref<UploadUserFile[]>([])

const uploadData: UploadData = reactive({
  type: UploadType.Video,
  title: '',
  introduction: '',
  accountId: accountId!
})

const uploadFormRef = ref<FormInstance | null>(null)
const uploadVideoRef = ref<UploadInstance | null>(null)

const submitVideo = () => {
  uploadFormRef.value?.validate((valid) => {
    if (!valid) {
      return false
    }
    uploadVideoRef.value?.submit()
  })
}

/** 上传成功处理 */
const onUploadSuccess: UploadProps['onSuccess'] = (res: any) => {
  if (res.code !== 0) {
    message.error(t('mp.uploadFailed') + res.msg)
    return false
  }

  // 清空上传时的各种数据
  fileList.value = []
  uploadData.title = ''
  uploadData.introduction = ''

  showDialog.value = false
  message.notifySuccess(t('mp.uploadSucceeded'))
  emit('uploaded')
}

/** 上传失败处理 */
const onUploadError = (err: Error) => message.error(`${t('mp.uploadFailed')}上传失败: ${err.message}`)
</script>
