<!-- 时间选择弹窗 -->
<script name="TimeSelectDialog" lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
// const $props = defineProps({
//   // 禁用此参数之前的时间
//   disabledTime: {
//     type: String,
//     default: '',
//   },
// })
const emits = defineEmits(['confirm'])
const dialogVisible = ref(false)
const dataFormRef = ref()
// 表单
const areaForm = ref({
  time: '',
})
// 前端校验规则
const rules: FormRules = {
  time: [{ required: true, message: '完成时间必选', trigger: ['blur', 'change'] }],
}
const disabledTime = ref('')
const initDialog = (disabledTime1: any) => {
  // 禁用此参数之前的时间
  disabledTime.value = ''
  dialogVisible.value = true
  areaForm.value.time = ''
  if (disabledTime1) {
    disabledTime.value = disabledTime1
  }
}
const cancel = () => {
  dialogVisible.value = false
}
const disabledDate = (time: any) => {
  if (disabledTime.value) {
    return time.getTime() <= new Date(disabledTime.value).getTime() - 8.64e7
  }
  else {
    return false
  }
}
// return
const saveForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return }
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits('confirm', areaForm.value.time)
      cancel()
    }
  })
}
defineExpose({
  initDialog,
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="400">
    <el-form ref="dataFormRef" :rules="rules" :model="areaForm" label-position="right" label-width="80px">
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="完成时间" prop="time">
            <el-date-picker
              v-model="areaForm.time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss" placeholder="完成时间" style="width: 100%;"
              :disabled-date="disabledDate"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveForm(dataFormRef)">
          保存
        </el-button>
        <el-button @click="cancel">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>