<!-- 
 * @Description: 表单
 * @Author: huguodong 
 * @Date: 2023-12-15 15:45:28
!-->
<template>
  <div>
    <form-container v-model="visible" title="选择分组" form-size="600px">
      <el-form
        ref="liveFormRef"
        :rules="rules"
        :disabled="orgProps.disabled"
        :model="orgProps.record"
        :hide-required-asterisk="orgProps.disabled"
        label-width="auto"
        label-suffix=" :"
      >
        <s-form-item label="摄像头分组" prop="id">
          <org-selector v-model:org-value="orgProps.record.id" :org-tree-api="monitorLIVEApi.groupList" :show-all="false" />
        </s-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onClose"> 取消 </el-button>
        <el-button v-show="!orgProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </form-container>
  </div>
</template>

<script setup lang="ts">
import { SysOrg, monitorLIVEApi, SysUser, bizOrgApi, bizPositionApi, sysRoleApi, bizUserApi } from "@/api";
import { FormOptEnum, SysDictEnum } from "@/enums";
import { required } from "@/utils/formRules";
import { FormInstance } from "element-plus";
import { useDictStore } from "@/stores/modules";

const visible = ref(false); //是否显示表单
const dictStore = useDictStore(); //字典仓库

// 通用状态选项
const statusOptions = dictStore.getDictList(SysDictEnum.COMMON_STATUS);

// 表单参数
const orgProps = reactive<FormProps.Base<any>>({
  opt: FormOptEnum.ADD,
  record: {},
  disabled: false,
  records: []
});

// 表单验证规则
const rules = reactive({
  id: [required("请选择摄像头分组")]
});

/**
 * 打开表单
 * @param props 表单参数
 */
function omMove(props: FormProps.Base<any>) {
  // 合并参数
  Object.assign(orgProps, props); //合并参数
  if (orgProps.opt == FormOptEnum.ADD) {
  }
  visible.value = true; //显示表单
  if (orgProps.record.id) {
  }
}

// 提交数据（新增/编辑）
const liveFormRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  liveFormRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败
    console.log(orgProps);
    let params: any = {
      id: orgProps.record.id,
      ids: orgProps.records
    };
    //提交表单
    await monitorLIVEApi
      .setGroup(params)
      .then(() => {
        orgProps.successful!(); //调用父组件的successful方法
      })
      .finally(() => {
        onClose();
      });
  });
}

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

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

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