<!-- 
 * @Description: 表单
 * @Author: syy 
 * @Date: 2023-12-15 15:45:59
-->
<template>
  <div>
    <form-container v-model="visibleDormitory" :title="`${sysDormitoryProps.opt}宿舍楼`" form-size="400px" @close="onClose">
      <el-form
        ref="sysDormitoryFormRef"
        :rules="rules"
        :disabled="sysDormitoryProps.disabled"
        :model="sysDormitoryProps.record"
        :hide-required-asterisk="sysDormitoryProps.disabled"
        label-width="auto"
        label-suffix=" :"
      >
        <div>
          <el-row :gutter="16">
            <el-col :span="22">
              <s-form-item label="宿舍楼名称" prop="name">
                <s-input v-model="sysDormitoryProps.record.name"></s-input>
              </s-form-item>
            </el-col>
            <el-col :span="22">
              <s-form-item label="性别" prop="gender">
                <s-radio-group v-model="sysDormitoryProps.record.gender" :options="genderOptions" />
              </s-form-item>
            </el-col>
            <el-col :span="22">
              <s-form-item label="进楼摄像头" prop="insCameraId">
                <s-select
                  v-model="sysDormitoryProps.record.insCameraId"
                  :filterable="true"
                  :options="creamaData"
                  label="sensorName"
                  value="sensorId"
                ></s-select>
              </s-form-item>
            </el-col>
            <el-col :span="22">
              <s-form-item label="出楼摄像头" prop="outCameraId">
                <s-select
                  v-model="sysDormitoryProps.record.outCameraId"
                  :filterable="true"
                  :options="creamaData"
                  label="sensorName"
                  value="sensorId"
                ></s-select>
              </s-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <el-button @click="onClose"> 取消 </el-button>
        <el-button v-show="!sysDormitoryProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </form-container>
  </div>
</template>

<script setup lang="ts" name="SysDormitoryformClass">
import { ref } from "vue";
import { SysDormitory, userManageDormitoryApi, monitorLIVEApi } from "@/api";
import { FormOptEnum } from "@/enums";
import { required } from "@/utils/formRules";
import { FormInstance } from "element-plus";

const visibleDormitory = ref(false); //是否显示表单
const creamaData = ref<any>([]);
const genderOptions = [
  {
    label: "男",
    value: true
  },
  {
    label: "女",
    value: false
  }
];
// 表单参数
const sysDormitoryProps = reactive<FormProps.Base<SysDormitory.DormitoryInfo>>({
  opt: FormOptEnum.ADD,
  record: {},
  disabled: false
});
// 表单验证规则
const rules = reactive({
  name: [required("请输入宿舍楼名称")],
  gender: [required("请选择性别")],
  insCameraId: [required("请选择进楼摄像头")],
  outCameraId: [required("请选择出楼摄像头")]
});

/**
 * 打开表单
 * @param props 表单参数
 */
function onOpen(props: FormProps.Base<SysDormitory.DormitoryInfo>) {
  Object.assign(sysDormitoryProps, props); //合并参数
  visibleDormitory.value = true; //显示表单
  sysDormitoryProps.record = props.record;
}

// 提交数据（新增/编辑）
const sysDormitoryFormRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  sysDormitoryFormRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败
    // sysDormitoryProps.record.name = sysDormitoryProps.record.name;
    //提交表单
    if (sysDormitoryProps.record.id) {
      // sysDormitoryProps.record.id = sysDormitoryProps.record.personSetId;
      await userManageDormitoryApi
        .updateDormitory(sysDormitoryProps.record)
        .then(() => {
          sysDormitoryProps.successful!(); //调用父组件的successful方法
        })
        .finally(() => {
          onClose();
        });
    } else {
      await userManageDormitoryApi
        .addDormitory(sysDormitoryProps.record)
        .then(() => {
          sysDormitoryProps.successful!(); //调用父组件的successful方法
        })
        .finally(() => {
          onClose();
        });
    }
  });
}

/** 关闭表单*/
function onClose() {
  visibleDormitory.value = false;
}
onMounted(() => {
  getCreamaList();
});
const getCreamaList = () => {
  monitorLIVEApi.list({ pageNum: 1, pageSize: 1000 }).then(res => {
    creamaData.value = res.data.list;
  });
};
// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>

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