<template>
  <div>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="140px"
      v-loading="formLoading"
    >
      <el-form-item label="招聘会标题" prop="title">
        <el-input v-model="formData.title" :rows="3" type="textarea" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="招聘会背景色" prop="backgroundColour">
        <div>
          <el-color-picker v-model="formData.backgroundColour" size="large" />
          <div>为了页面的美观性，请勿选择白色（#FFF / #FFFFFF）作为页面背景颜色</div>
        </div>
      </el-form-item>
      <el-form-item label="PC封面海报" prop="pcPreviewImg">
        <div>
          <UploadImg v-model="formData.pcPreviewImg" height="150px" width="300px" :fileSize="10" :validSpecifications="true" :maxWidth="800" :maxHeight="300" />
          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽800px*高300px规格的图片</div>
        </div>
      </el-form-item>
      <el-form-item label="小程序封面海报" prop="previewImg">
        <div>
          <UploadImg v-model="formData.previewImg" height="150px" width="300px" :fileSize="10" :validSpecifications="true" :maxWidth="750" :maxHeight="350" />
          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽750px*高350px规格的图片</div>
        </div>
      </el-form-item>
      <el-form-item label="PC顶部banner" prop="pcHeadImg">
        <div>
          <UploadImgs v-model="formData.pcHeadImg" :limit="20" />
          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽1920px*高553px规格的图片</div>
        </div>
      </el-form-item>
      <el-form-item label="小程序顶部banner" prop="headImg">
        <div>
          <UploadImgs v-model="formData.headImg" :limit="20" />
          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽750px*高350px规格的图片</div>
        </div>
      </el-form-item>
      <el-form-item label="招聘会分享海报" prop="shareImg">
        <div>
          <UploadImg v-model="formData.shareImg" height="300px" width="250px" :fileSize="10" />
          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽1080px*高1920px规格的图片</div>
        </div>
      </el-form-item>
      <el-form-item label="企业分享海报" prop="contentImg">
        <div>
          <UploadImg v-model="formData.contentImg" height="300px" width="250px" :fileSize="10" :validSpecifications="true" :maxWidth="540" :maxHeight="788" />
          <div class="flex" style="color: orange; align-items: center;"><Icon :size="20" icon="ep:warning" class="mr-3px" />提示：请上传宽540px*高788px规格的图片</div>
        </div>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="formData.startTime" type="date" value-format="x" placeholder="选择开始时间" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="formData.endTime" type="date" value-format="x" placeholder="选择结束时间" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio
            v-for="dict in getIntDictOptions(DICT_TYPE.MENDUNER_STATUS)"
            :key="dict.value"
            :label="dict.value.toString()"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    
		<div class="text-right">
			<el-button @click="emit('close')">返回</el-button>
			<el-button @click="submitForm" type="primary" :disabled="formLoading">保存</el-button>
		</div>
  </div>
</template>

<script setup lang="ts">
/** 招聘会管理 信息设置 */
defineOptions({ name: 'JobFairManageInfoSettings' })
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { JobFairManageApi, JobFairManageVO } from '@/api/menduner/system/jobFair/manage'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { cloneDeep } from 'lodash-es'

const { push, currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作

const props = defineProps({ formType: String, info: Object })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  type: 1,
  title: undefined,
  headImg: [],
  pcHeadImg: [],
  backgroundColour: undefined,
  pcPreviewImg: undefined,
  previewImg: undefined,
  startTime: undefined,
  endTime: undefined,
  shareImg: undefined,
  contentImg: undefined,
  status: '0',
  category: undefined,
  tag: []
})
const formRules = reactive({
  backgroundColour: [{ required: true, message: '招聘会背景颜色不能为空', trigger: 'change' }],
  previewImg: [{ required: true, message: 'PC封面海报不能为空', trigger: 'change' }],
  pcPreviewImg: [{ required: true, message: '小程序封面海报不能为空', trigger: 'change' }],
  headImg: [{ required: true, message: '小程序顶部banner图片不能为空', trigger: 'change' }],
  pcHeadImg: [{ required: true, message: 'PC顶部banner图片不能为空', trigger: 'change' }],
  shareImg: [{ required: true, message: '招聘会分享海报不能为空', trigger: 'change' }],
  contentImg: [{ required: true, message: '企业分享海报不能为空', trigger: 'change' }],
  title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref

onMounted(() => {
  if (props.info && Object.keys(props.info).length > 0) {
		formLoading.value = true
		formData.value = cloneDeep(props.info)
		formLoading.value = false
  }
})

/** 提交表单 */
const emit = defineEmits(['close'])
const submitForm = async () => {
  if (['#ffffff', '#FFFFFF'].indexOf(formData.value.backgroundColour) !== -1) return message.warning('请勿将白色作为页面背景色')
  // 校验表单
  await formRef.value.validate()
  
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as JobFairManageVO
		if (props.formType === 'create') {
			const result = await JobFairManageApi.createJobFair(data)
			message.success(t('common.createSuccess'))
			delView(unref(currentRoute))
			push({ name: 'JobFairDetail', params: { id: result } })
		} else {
			await JobFairManageApi.updateJobFair(data)
			message.success(t('common.updateSuccess'))
		}
  } finally {
    formLoading.value = false
  }
}

</script>