<template>
  <SysDialog
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <el-form
        ref="stopEndDateFormRef"
        :model="beginAndEndDateForm"
        :rules="rules"
        label-width="120px"
        style="padding: 13px 15px 0 0;"
      >
        <el-form-item label="终止生效时间" prop="stopEndDate">
          <el-date-picker
            v-model="beginAndEndDateForm.stopEndDate"
            type="date"
            placeholder="生效时间"
            style="width: 100%;"
          />
        </el-form-item>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { ref, reactive, unref } from "vue";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { StopEndDateParams } from "@/api/customerfee/CustomerFeeSetModel";
import { formatDateTime } from "@/utils/dateFormate";

const emit = defineEmits(["confirmStopEndDate"]);
// 弹框一些配置
const getBindValue = reactive({
  top: "13vh",
  title: "终止生效时间",
  width: 420,
  height: 0,
});
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 表单ref
const stopEndDateFormRef = ref<FormInstance>();
// 参数
const beginAndEndDateForm = reactive<StopEndDateParams>({
  id: undefined,
  parentId: undefined,
  endDate: undefined,
  stopEndDate: undefined,
  feeSetType: undefined,
});
const rules = reactive({
  stopEndDate: [
    {
      required: true,
      message: '请选择生效时间',
      trigger: 'change',
    }
  ],
});

const { formValidate, resetForm } = useEleFormValidate()
// 显示、隐藏
const show = (data) => {
  if(data) {
    beginAndEndDateForm.id = data.id
    beginAndEndDateForm.parentId = data.parentId
    beginAndEndDateForm.endDate = data.endDate
    beginAndEndDateForm.feeSetType = data.feeSetType
  }
  onShow()
}
const onclose = () => {
  resetForm(unref(stopEndDateFormRef))
  onClose()
}
// 提交
const onconfirm = async () => {
  const isValidate = await formValidate(unref(stopEndDateFormRef))
  if (!isValidate) return;
  beginAndEndDateForm.stopEndDate = formatDateTime(beginAndEndDateForm.stopEndDate)
  setLoading(true)
  emit("confirmStopEndDate", unref(beginAndEndDateForm), onclose, setLoading)
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>