<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import type { ContestItem, ContestBookItem, ContestBookUpdateParams } from '../types'
import { ElMessageBox, ElMessage } from 'element-plus'
import { pick } from 'lodash-es'
import AppUpload from '@/components/base/AppUpload.vue'
import { createContestBook, updateContestBook } from '../api'
import { useMapStore } from '@/stores/map'

interface Props {
  data?: ContestBookItem
}
const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const detail = $ref(inject('detail') as ContestItem)

// 数据状态
const status = useMapStore().getMapValuesByKey('system_status')

const formRef = $ref<FormInstance>()
const form = reactive<any>({
  competition_id: detail.id,
  files: [],
  url: '',
  type: '',
  name: '',
  status: '1',
  protocol: false
})
watchEffect(() => {
  if (!props.data) return
  form.files = [JSON.parse(props.data.url)]
  Object.assign(form, { protocol: true }, props.data)
})

const checkProtocol = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请阅读并同意'))
  } else {
    callback()
  }
}
const rules = ref<FormRules>({
  files: [{ type: 'array', required: true, message: '请上传训练指导书' }],
  name: [{ required: true, message: '请输入训练指导书名称', trigger: 'blur' }],
  course_id: [{ required: true, message: '请选择关联训练课程', trigger: 'change' }],
  experiment_id: [{ required: true, message: '请选择关联训练', trigger: 'change' }],
  protocol: [{ validator: checkProtocol, message: '请阅读并同意', trigger: 'change' }]
})
const isUpdate = $computed(() => {
  return !!props.data?.id
})
const title = $computed(() => {
  return isUpdate ? '编辑训练指导书' : '新增训练指导书'
})

function handleBeforeUpload() {
  if (form.files.length) {
    return ElMessageBox.confirm('系统仅支持1个训练指导书，此操作将覆盖原有训练指导书文件，确认上传新文件吗？', '提示')
  }
  return true
}

function handleUploadSuccess(file: any) {
  const [name, type] = file.name.split('.')
  form.name = name
  form.type = type
}
// 提交
function handleSubmit() {
  formRef?.validate().then(() => {
    const [file] = form.files
    const params = Object.assign({}, pick(form, ['competition_id', 'name', 'type', 'status']), {
      url: JSON.stringify({ name: file.name, url: file.url, size: file.size })
    })
    isUpdate ? handleUpdate(params) : handleCreate(params)
  })
}
// 新增
function handleCreate(params: ContestBookUpdateParams) {
  createContestBook(params).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate(params: ContestBookUpdateParams) {
  updateContestBook(params).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @update:modelValue="$emit('update:modelValue')">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="124px">
      <el-form-item label="训练指导书文件" prop="files">
        <AppUpload
          v-model="form.files"
          :limit="1"
          :beforeUpload="handleBeforeUpload"
          accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.pdf,application/pdf,.ppt,.pptx,application/vnd.ms-powerpoint,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          @success="handleUploadSuccess">
          <template #tip>训练指导书文件支持格式包含：doc docx xls xlsx pdf ppt pptx，大小不超过50M</template>
        </AppUpload>
      </el-form-item>
      <el-form-item label="训练指导书名称" prop="name">
        <el-input v-model="form.name"></el-input>
        <p class="form-tips">训练指导书名称自动取值于文件名称，可以进行二次修改。</p>
      </el-form-item>
      <el-form-item label="关联赛项">
        <el-input :value="detail.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="有效状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio v-for="item in status" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="protocol">
        <el-checkbox label="我已阅读并同意" v-model="form.protocol" />
        <a
          href="https://view.officeapps.live.com/op/view.aspx?src=https://webapp-pub.ezijing.com/center_resource/%E7%B4%AB%E8%8D%86%E6%95%99%E8%82%B2%E7%94%A8%E6%88%B7%E5%85%A5%E9%A9%BB%E5%8F%8A%E7%BD%91%E7%BB%9C%E6%95%99%E5%AD%A6%E8%B5%84%E6%BA%90%E5%8D%8F%E8%AE%AE(1).docx"
          target="_blank"
          >《紫荆教育用户入驻及网络教学资源协议》</a
        >
      </el-form-item>
      <el-row justify="center">
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-tips {
  font-size: 12px;
  color: #999;
}
</style>
