<!-- 
 * @Description: 表单
 * @Author: syy 
 * @Date: 2023-12-15 15:45:59
-->
<template>
  <div>
    <form-container v-model="visible" :title="`${sysUserProps.opt}点名`" form-size="900px" @close="onClose">
      <el-form
        ref="sysUserFormRef"
        :rules="rules"
        :disabled="sysUserProps.disabled"
        :model="sysUserProps.record"
        :hide-required-asterisk="sysUserProps.disabled"
        label-width="auto"
        label-suffix=" :"
      >
        <div>
          <el-row :gutter="16">
            <el-col :span="12">
              <s-form-item label="摄像头分组" prop="cameraGroudId">
                <org-selector
                  @change="handleChange"
                  v-model:org-value="sysUserProps.record.cameraGroudId"
                  :org-tree-api="monitorLIVEApi.groupList"
                  :show-all="false"
              /></s-form-item>
            </el-col>
            <el-col :span="12">
              <s-form-item label="摄像头" prop="cameraId">
                <s-select v-model="sysUserProps.record.cameraId" :options="CameraList" label="sensorName" value="sensorId"></s-select>
              </s-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <s-form-item label="所属系部" prop="depId">
                <s-select v-model="sysUserProps.record.depId" :options="departmentOptions" label="name" value="id"></s-select
              ></s-form-item>
            </el-col>
            <el-col :span="12">
              <s-form-item label="所属专业" prop="majorId">
                <s-select v-model="sysUserProps.record.majorId" :options="majorOptions" label="name" value="id"></s-select>
              </s-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <s-form-item label="所属班级" prop="personSetId">
                <s-select v-model="sysUserProps.record.personSetId" :options="classOptions" label="personSetName" value="personSetId"></s-select>
              </s-form-item>
            </el-col>
            <el-col :span="12">
              <s-form-item label="持续时间" prop="continueTime">
                <el-slider v-model="sysUserProps.record.continueTime" />
              </s-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="16">
            <el-col :span="12">
              <s-form-item label="相似度" prop="similarity">
                <el-slider v-model="sysUserProps.record.similarity" :min="0.3" :max="0.8" :step="0.01" />
              </s-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="onClose"> 取消 </el-button>
        <el-button v-show="!sysUserProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </form-container>
  </div>
</template>

<script setup lang="ts" name="SysUserPersonnelForm">
import { attendanceRoolcallApi, monitorLIVEApi } from "@/api";
import { required } from "@/utils/formRules";
import { FormInstance } from "element-plus";
import { getMajorList, getDepartmentList, getClassList } from "@/mixin";
const visible = ref(false); //是否显示表单
const CameraList = ref<any>([]);
const departmentOptions = ref<any>([]);
const majorOptions = ref<any>([]);
const classOptions = ref<any>([]);
/** 表单操作类型枚举 */
enum FormOptEnums {
  /** 发起 */
  INITIATE = "发起"
}
// 表单参数
const sysUserProps = reactive<FormProps.Base<any>>({
  opt: FormOptEnums.INITIATE,
  record: {},
  disabled: false
});

// 表单验证规则
const rules = reactive({
  cameraGroudId: [required("请选择摄像头分组")],
  similarity: [required("请选择相似度")],
  cameraId: [required("请选择摄像头")],
  continueTime: [required("请选择持续时间")],
  personSetId: [required("请选择所属班级")]
  // depId: [required("请选择系部")],
  // majorId: [required("请选择专业")]
});

/**
 * 打开表单
 * @param props 表单参数
 */
async function onOpen(props: FormProps.Base<any>) {
  departmentOptions.value = await getDepartmentList();
  // 获取班级
  classOptions.value = await getClassList("");
  Object.assign(sysUserProps, props); //合并参数
  visible.value = true; //显示表单
  /* 监听系部、专业 */
  watch(
    () => [sysUserProps.record?.depId, sysUserProps.record?.majorId],
    async ([newDepId, newMajorId], [oldDepId, oldMajorId]) => {
      if (newDepId != oldDepId) {
        majorOptions.value = await getMajorList(newDepId);
        classOptions.value = [];
        sysUserProps.record.personSetId = "";
        sysUserProps.record.majorId = "";
      }
      if (newMajorId && newMajorId != oldMajorId) {
        classOptions.value = await getClassList(newMajorId);
      }
    },
    { deep: true, immediate: false }
  );
}

const handleChange = async (val: any, data: any) => {
  let res = await monitorLIVEApi.list({ pageNum: 1, pageSize: 1000, groupId: data.id });
  CameraList.value = res.data.list;
};
// 提交数据（新增/编辑）
const sysUserFormRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  sysUserFormRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败
    //提交表单
    if (sysUserProps.record.personId) {
      await attendanceRoolcallApi
        .update(sysUserProps.record)
        .then(() => {
          sysUserProps.successful!(); //调用父组件的successful方法
        })
        .finally(() => {
          onClose();
        });
    } else {
      await attendanceRoolcallApi
        .add(sysUserProps.record)
        .then(() => {
          sysUserProps.successful!(); //调用父组件的successful方法
        })
        .finally(() => {
          onClose();
        });
    }
  });
}

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

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

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