<template>
  <div class="text-right">
    <el-button type="success" plain @click="emit('refresh', info.id)">刷新</el-button>
  </div>
  <div class="mb-50px !w-400px color-orange text-16px">
    <Icon :size="20" icon="ep:warning" class="mr-3px" />
    提示：不需要设置门票限制时则不需要填写以下内容
  </div>
  <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="110px"
      class="!w-350px"
      v-loading="formLoading"
    >
      <el-form-item label="门票金额" prop="admissionPrice">
        <el-input-number v-model="formData.admissionPrice" :precision="2" :min="0.01" :step="100" />
        <span class="mx-10px">元</span>
        <Icon @click="formData.admissionPrice = null" class="cursor-pointer" :size="25" icon="ep:circle-close-filled" /> 
      </el-form-item>
      <el-form-item label="可发布职位数量" prop="allowedJobNum">
        <el-input-number v-model="formData.allowedJobNum" :min="0" :step="10" />
        <span class="mx-10px">个</span>
        <Icon @click="formData.allowedJobNum = null" class="cursor-pointer" :size="25" icon="ep:circle-close-filled" /> 
      </el-form-item>
    </el-form>
    
    <div class="mt-50px">
      <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: 'JobFairManageTicketSettings' })
import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'

const message = useMessage() // 消息弹窗
const emit = defineEmits(['refresh', 'close'])
const props = defineProps({ info: Object })

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  admissionPrice: undefined,
  allowedJobNum: undefined
})
const formRef = ref() // 表单 Ref

onMounted(() => {
  if (props.info && Object.keys(props.info).length > 0) {
    const { id, admissionPrice: price, allowedJobNum } = props.info
    formData.value = {
      id,
      admissionPrice: price > 0 ? (price / 100) : null,
      allowedJobNum
    }
  }
})


/** 提交表单 */
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()

	const { id, admissionPrice, allowedJobNum } = formData.value
	const params = {
		id,
		admissionPrice: admissionPrice > 0 ? (admissionPrice * 100) : null,
		allowedJobNum
	}

  // 提交请求
  formLoading.value = true
  try {
    await JobFairManageApi.updateTicketSettings(params)
    message.success('设置成功')
    // 发送操作成功的事件
  } finally {
    formLoading.value = false
  }
}
</script>