<script setup>
import { ref } from 'vue'
import { typeCreateService, typeUpdateService } from '@/api/type'
import { timeToNumber } from '@/utils/format'
const dialogVisible = ref(false)
const formModel = ref({
  venueName: '',
  type: ''
})
const isAdd = ref(false)
const formRef = ref()

const rules = {
  vname: [
    { required: true, message: '请输入场馆名称', trigger: 'blur' },
    {
      pattern: /^\S{1,15}$/,
      message: '必须是 1~15 位的非空字符',
      trigger: 'blur'
    }
  ],
  location: [
    { required: true, message: '请输入场地位置', trigger: 'blur' },
    {
      pattern: /^\S{1,15}$/,
      message: '必须是 1~10 位的非空字符',
      trigger: 'blur'
    }
  ],
  openTime: [
    { required: true, message: '请选择开馆时间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (
          formModel.value.closeTime !== null &&
          timeToNumber(value) >= timeToNumber(formModel.value.closeTime)
        ) {
          callback(new Error('错误开馆时间'))
        } else {
          // 校验成功，也需要 callback()
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  closeTime: [
    { required: true, message: '请选择闭馆时间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (
          formModel.value.openTime !== null &&
          timeToNumber(value) <= timeToNumber(formModel.value.openTime)
        ) {
          callback(new Error('错误闭馆时间'))
        } else {
          // 校验成功，也需要 callback()
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 组件对外暴露一个方法 open ，基于 open 传来的参数，区分添加还是编辑
const open = (row) => {
  dialogVisible.value = true
  formModel.value = { ...row }
  if (!row.id) {
    isAdd.value = true
  }
}
// 向外暴露
defineExpose({
  open
})
const emit = defineEmits(['success'])
const onSubmit = async () => {
  await formRef.value.validate()
  ElMessageBox.confirm('确认提交？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      isAdd.value
        ? await typeCreateService(formModel.value)
        : await typeUpdateService(formModel.value)
      ElMessage.success('编辑成功')
      emit('success')
      onClose()
    })
    .catch(() => {})
}

const onClose = () => {
  dialogVisible.value = false
  isAdd.value = false
  formRef.value.clearValidate()
  formModel.value = {
    venueName: '',
    type: ''
  }
}
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="formModel.id ? '编辑场馆' : '添加场馆'"
    width="30%"
  >
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="场馆名称" prop="vname">
        <el-input
          placeholder="请输入场馆名称"
          v-model="formModel.vname"
        ></el-input>
      </el-form-item>

      <el-form-item label="位置信息" prop="location">
        <el-input
          placeholder="请输入位置"
          v-model="formModel.location"
        ></el-input>
      </el-form-item>

      <el-form-item label="开馆时间" prop="openTime">
        <el-time-select
          v-model="formModel.openTime"
          style="width: 240px"
          start="08:00:00"
          step="01:00:00"
          end="18:00:00"
          placeholder="请选择开馆时间"
          @change="changeTime"
        />
      </el-form-item>

      <el-form-item label="闭馆时间" prop="closeTime">
        <el-time-select
          v-model="formModel.closeTime"
          style="width: 240px"
          start="08:00:00"
          step="01:00:00"
          end="18:00:00"
          placeholder="请选择闭馆时间"
          @change="changeTime"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
