<!-- 
 * @Description: 表单
 * @Author: syy 
 * @Date: 2023-12-15 15:45:59
-->
<template>
  <div>
    <form-container v-model="visible" :title="`${propsInfo.opt}查询`" form-size="600px" @close="onClose">
      <el-form
        ref="formRef"
        :rules="rules"
        :disabled="propsInfo.disabled"
        :model="propsInfo.record"
        :hide-required-asterisk="propsInfo.disabled"
        label-width="auto"
        label-suffix=" :"
      >
        <el-tabs v-model="activeName">
          <Basic ref="addFromRef" v-model="propsInfo.record"></Basic>
        </el-tabs>
      </el-form>
      <template #footer>
        <el-button @click="onClose"> 取消 </el-button>
        <el-button v-show="!propsInfo.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </form-container>
  </div>
</template>

<script setup lang="ts">
import { AttendancePassenger, attendancePassenger } from "@/api";
import { FormOptEnum } from "@/enums";
import { required } from "@/utils/formRules";
import { FormInstance } from "element-plus";
import Basic from "./form_basic.vue";
import { formatDate } from "@/utils";

const visible = ref(false); //是否显示表单
const activeName = ref("basic");
// 弹框参数
const propsInfo = reactive<FormProps.Base<AttendancePassenger.PassengerInfo>>({
  opt: FormOptEnum.ADD,
  record: {},
  disabled: false
});

// 表单验证规则
const rules = reactive({
  timeSlot: [
    required("请选择查询时间段"),
    {
      validator: (rule, value, callback) => {
        value = value.map(e => e.valueOf());
        if (86400000 * 7 < value[1] - value[0]) {
          callback(new Error("时间跨度不能大于七天"));
        } else {
          callback();
        }
      },
      trigger: "change"
    }
  ],
  cameraIds: [required("请选择摄像头")]
});

/**
 * 打开表单
 * @param props 表单参数
 */
function onOpen(props: FormProps.Base<AttendancePassenger.PassengerInfo>) {
  Object.assign(propsInfo, props); //合并参数
  if (props.opt == FormOptEnum.ADD) {
    //如果是新增,设置默认值
    propsInfo.record.timeSlot = [];
    propsInfo.record.cameraIds = [];
  }
  visible.value = true; //显示表单
  if (props.record.id) {
    //如果传了id，就去请求api获取record
    attendancePassenger.detail({ id: props.record.id }).then(res => {
      propsInfo.record = res.data;
    });
  }
}

// 提交数据（新增/编辑）
const formRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  formRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败
    let record = {
      startTime: formatDate(propsInfo.record.timeSlot[0]),
      endTime: formatDate(propsInfo.record.timeSlot[1]),
      cameraIds: propsInfo.record.cameraIds,
      split: propsInfo.record.split,
      cameraNames: propsInfo.record.cameraNames
    };
    await attendancePassenger
      .add(record)
      .then(() => {
        propsInfo.successful!(); //调用父组件的successful方法
      })
      .finally(() => {
        onClose();
      });
  });
}

/** 关闭表单*/
function onClose() {
  visible.value = false;
  activeName.value = "basic";
}

// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>

<style lang="scss" scoped></style>
