<script setup>
import { ref } from 'vue'
import { timeToNumber, formatTime } from '@/utils/format'
import { slotAdd } from '@/api/slot'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const dialogVisible = ref(false)
const formRef = ref()
// 禁用时间段表单
const slotForm = ref({
  reservationDate: '',
  slotStart: '',
  slotEnd: '',
  userId: ''
})

// 校验规则
const rules = {
  reservationDate: [
    { required: true, message: '请选择禁用日期', trigger: 'blur' }
  ],

  slotStart: [
    { required: true, message: '请选择开始时间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (
          slotForm.value.slotEnd !== null &&
          timeToNumber(value) >= timeToNumber(slotForm.value.slotEnd)
        ) {
          callback(new Error('错误开始时间'))
        } else {
          // 校验成功，也需要 callback()
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  slotEnd: [
    { required: true, message: '请选择结束时间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (
          slotForm.value.slotStart !== null &&
          timeToNumber(value) <= timeToNumber(slotForm.value.slotStart)
        ) {
          callback(new Error('错误结束时间'))
        } else {
          // 校验成功，也需要 callback()
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 组件对外暴露一个方法 open ，基于 open 传来的参数，区分添加还是编辑
const open = () => {
  slotForm.value.userId = userStore.user.id
  dialogVisible.value = true
}
// 向外暴露
defineExpose({
  open
})
// 关闭弹窗
const closeDrawer = () => {
  slotForm.value = {
    reservationDate: '',
    slotStart: '',
    slotEnd: '',
    userId: ''
  }
  formRef.value.clearValidate()
  dialogVisible.value = false
}

const emit = defineEmits(['success'])
// 提交添加信息
const onSubmit = async () => {
  // 校验是否合理
  await formRef.value.validate()
  ElMessageBox.confirm('是否确认添加此时间段？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // console.log(slotForm.value);
      slotForm.value.reservationDate = formatTime(
        slotForm.value.reservationDate
      )
      await slotAdd(slotForm.value)
      ElMessage({
        type: 'success',
        message: '添加成功'
      })
      closeDrawer()
      emit('success')
    })
    .catch((err) => {
      ElNotification({
        title: 'Error',
        message: err.message,
        type: 'error'
      })
      closeDrawer()
    })
}
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加时间段"
    width="350"
    draggable
    @close="closeDrawer"
  >
    <el-form
      ref="formRef"
      :model="slotForm"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="禁用日期" prop="reservationDate">
        <el-date-picker
          v-model="slotForm.reservationDate"
          type="date"
          placeholder="请选择禁用日期"
          style="width: 170px"
        />
      </el-form-item>
      <el-form-item label="开始时间" prop="slotStart">
        <el-time-select
          v-model="slotForm.slotStart"
          style="width: 170px"
          start="08:00"
          step="01:00"
          end="18:00"
          placeholder="请选择开始时间"
          @change="changeTime"
        />
      </el-form-item>
      <el-form-item label="结束时间" prop="slotEnd">
        <el-time-select
          v-model="slotForm.slotEnd"
          style="width: 170px"
          start="08:00"
          step="01:00"
          end="18:00"
          placeholder="请选择结束时间"
          @change="changeTime"
        />
      </el-form-item>
    </el-form>

    <el-button type="primary" style="margin-left: 30px" @click="onSubmit"
      >点击提交</el-button
    >
  </el-dialog>
</template>
