<!-- 
 * @Description: 预警管理
 * @Author: huguodong 
 * @Date: 2023-12-15 15:44:05
!-->
<template>
  <div class="table-box">
    <div class="abilityBox">
      <TreeFilter
        ref="treeFilter"
        title="摄像头分组"
        label="name"
        id="id"
        width="300px"
        :request-api="monitorLIVEApi.groupList"
        @change="changeGroup"
      >
      </TreeFilter>

      <TreeFilter
        ref="treeFilters"
        title="摄像头列表"
        label="sensorName"
        id="sensorId"
        :isData="true"
        width="300px"
        :data="videoList"
        @change="changeVideo"
      >
      </TreeFilter>

      <div class="card content-main">
        <el-collapse accordion>
          <el-collapse-item :name="ins" v-for="(item, ins) in warnGroupList" :key="item.code">
            <template #title>
              <div class="collapse-title" @click.stop="">
                <div class="titlemodel">
                  <div style="width: 220px; text-align: left">{{ item.name }}</div>
                  <div style="margin-left: 20px">
                    <el-button @click="pushPerson(FormOptEnum.VideoPushPerson, item)" type="primary" size="small">设置推送人</el-button>
                  </div>
                </div>
                <div class="btns">
                  <el-switch v-model="item.state" @change="stateChange" />
                </div>
              </div>
            </template>
            <div class="collapse-content">
              <!-- <div class="contentinfo" v-for="(v, index) in item.subset" :key="v.code">
            <div class="modellabel">{{ v.name }}</div>

            <div class="btns">
              <el-switch v-model="v.state" active-text="开启" inactive-text="关闭" />
            </div>
          </div> -->
              <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="6" v-for="v in item.subset" :key="v.code">
                  <div class="contentinfo">
                    <div class="modellabel">{{ v.name }}</div>

                    <div class="btns">
                      <el-switch :disabled="item.state == false" v-model="v.state" @change="stateChange" />
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 人员选择 -->
      <userForm ref="userFormRef" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="ability">
import { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { ElMessage } from "element-plus";
import { abilityApi, userManageClassManageApi, monitorLIVEApi,SysOrg } from "@/api";
// import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums";
import userForm from "./components/userForm.vue";

enum FormOptEnum {
   /** 新增 */
   ADD = "新增",
  /** 编辑 */
  EDIT = "编辑",
  /** 查看 */
  VIEW = "查看",
  /** 删除 */
  DELETE = "删除",
  // 分组推送人
  GroupPushPerson = "分组推送人",
  // 视频推送人
  VideoPushPerson = "视频推送人",
  // 移动
  MOVE = "移动",
  // 分组
  GROUP = "分组"
}
onMounted(() => {
  // 在这里执行其他需要在组件挂载后运行的代码
  getwarnGroup('');
  getVideoList('')
});
const treeFilter = ref<InstanceType<typeof TreeFilter> | null>(null);
  const treeFilters = ref<InstanceType<typeof TreeFilter> | null>(null);
function changeGroup(val: number | string) {
  getVideoList(val)
}
const videoList = ref<any>();
function getVideoList(id:any) {
  console.log(id,11)
  setTimeout(async () => {
    await monitorLIVEApi.list({ pageNum: 1, pageSize: 1000, groupId:id }).then(res => {
      videoList.value = res.data.list;
    });
  });
}
function changeVideo(val: number | string) {
  console.log(val)
  getwarnGroup(val);
  // personSetId.value = val
  // proTable.value!.pageable.pageNum = 1;
  // proTable.value!.searchParam.personSetId = val;
  // proTable.value!.search();
  // getVideoList(val.id)
}
// 获取配置树

// 获取配置树
let warnGroupList = ref<any>([]);
function getwarnGroup(id) {
let sid:any = id ? id : null;
  setTimeout(async () => {
    await abilityApi.warnGroup({cameraId: sid}).then((res:any) => {
      let { code, data } = res;
      if (code == 200) {
        warnGroupList.value = data;
        console.log("warnGroupList", warnGroupList.value);
      }
    });
  });
}
const userFormRef = ref<any>(null);
function pushPerson(opt: FormOptEnum, record: {} | SysOrg.SysOrgInfo = {}) {
  userFormRef.value?.onOpen({ opt: opt, record: record, successful: getwarnGroup });
}
// 开关
function stateChange() {
  let params: string = JSON.stringify(warnGroupList.value);
  setTimeout(async () => {
    await abilityApi.setWarnGroup({ configJson: params }).then((res:any) => {
      let { code, data, msg } = res;
      if (code == 200 && data) {
        // warnGroupList.value = data;
        ElMessage.success(msg);
        console.log("warnGroupList", warnGroupList.value);
      }
    });
  });
}
</script>

<style lang="scss" scoped>
.abilityBox {
  display: flex;
  width: 100%;
  height: 100%;

  // 配置列表
  .content-main {
    width: calc(100% - 630px);
    ::v-deep(.el-collapse-item__header) {
      flex: 1 0 auto;
      order: -1;
      height: 50px;
      line-height: 50px;
    }
    .collapse-title {
      display: flex;
      flex: 1 0 90%;
      align-items: center;
      justify-content: space-between;
      order: 1;
      .titlemodel {
        display: flex;
        align-items: center;
        margin-right: 40px;
        font-size: 18px;
      }
      .btns {
        margin-left: 40px;
      }
    }
    .collapse-content {
      padding: 20px;
      .contentinfo {
        box-sizing: border-box;
        padding: 20px;
        margin-top: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 1px rgb(0 0 0 / 10%), 0 0 8px rgb(0 0 0 / 10%), 0 -1px 1px #ffffff, 0 0 0 #ffffff, 0 0 16px #ffffff;
        .modellabel {
          font-size: 16px;
        }
        .btns {
          margin-top: 20px;
          margin-right: 0;
          text-align: right;
        }
      }
    }
  }
}
</style>
