<template>
  <div class="dialog" v-if="pzIsShow && fa != null">
    <div class="head_box">
      <span class="title">摄像头配置</span>
      <div>
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="close">返回</el-button>
      </div>
    </div>
    <div class="common-layout">
      <el-container style="height: calc(100vh - 170px)">
        <el-aside class="box_sp" width="300px">
          <div class="sxtz_title">摄像头组列表</div>
          <div class="sxtzList">
            <el-card
              class="box-card"
              style="margin-top: 10px"
              v-for="(sxtz, index) in sxtzList"
              :key="'a' + index"
            >
              <template #header>
                <div class="card-header">
                  <span class="sxtzmc">
                    <span>组名：</span
                    ><el-input v-model="sxtz.sxtzmc" size="mini"></el-input>
                  </span>
                  <el-icon class="close" @click="deleteSxtz(index)">
                    <CloseBold />
                  </el-icon>
                </div>
              </template>
              <div
                v-for="(sxt, ind) in sxtz.sxtList"
                :key="'o' + ind"
                class="sxtList"
              >
                <div class="icon" v-if="sxt.isSelect" />
                <div>
                  <el-input
                    readonly
                    placeholder="点击选择摄像头"
                    size="mini"
                    v-model="sxt.sxtmc"
                    @click="clickInput(index, ind)"
                    class="input"
                  />
                </div>
                <div class="btns">
                  <span class="btn play" @click="openVideo(sxt)">播放</span>
                  <span v-if="fa.falx != '1'" class="btn sz">设置</span>
                </div>
              </div>
            </el-card>
          </div>
          <div class="sxtz_btn">
            <el-button @click="addSxtz">添加摄像头组</el-button>
          </div>
        </el-aside>
        <el-aside class="box_sp box_center_list" width="400px">
          <div class="sxtz_title">摄像头列表</div>
          <div class="search">
            <MOSTY.Department
            width="200px"
            clearable
            filterable
            v-model="queryParams.ssbmdm"
          />
            <el-input
            style="width:180px"
              v-model="queryParams.jsnr"
              placeholder="设备编号、名称"
              clearable
              @clear="search"
            ></el-input>
            <el-button @click="search">查询</el-button>
          </div>
          <div class="sxt_list">
            <div
              class="sxt_item"
              v-for="(item, index) in gzyList"
              :key="index + 'sxt'"
              @click="clickItem(item)"
            >
              <div class="sxtmc">{{ item.sbmc }}</div>
            </div>
          </div>
          <div class="page1">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="queryParams.pageNum"
              :page-size="queryParams.pageSize"
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-aside>
        <el-main class="box_sp box_map">
          <GdMap/>
          <gzy-info @chooseVideo="chooseVideo"></gzy-info>
        </el-main>
      </el-container>
    </div>

    <VideoCnt />
  </div>
</template>
<script setup>
import emitter from "@/utils/eventBus.js";
import * as MOSTY from "@/components/MyComponents/index";
import VideoCnt from "@/components/video/index.vue";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import {
  getSpInfo,
  getSxtList,
  getSxtAll,
  addSxtPz,
  editSxtPz
} from "@/api/videoPatrol/index.js";
import GdMap from "@/components/Map/GdMap/index.vue";
import gzyInfo from "./gzyInfo.vue";
const { proxy } = getCurrentInstance();
const { D_BZ_FALX } = proxy.$dict("D_BZ_FALX");
const fa = ref(null);
const sxtzList = ref([]);
const gzyList = ref([]);
const total = ref(0);
const activeAddSxt = ref(false); //切换新增修改
const activeIndex = reactive({
  sbzIndex: null,
  sbIndex: null
});
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  // sblx:'01',
  jsnr: ""
});
const props = defineProps({
  //获取组件传值
  pzIsShow: {
    default: false,
    type: Boolean
  },
  faid: {
    detault: "1546416261034004481",
    type: String
  }
});
const emit = defineEmits(["change", "delete"]);
function handleCurrentChange(e) {
  queryParams.value.pageNum = e;
  getGzyList();
}
// 查询感知源
function search() {
  queryParams.value.pageNum = 1;
  getGzyList();
  getGzyAll();
}

// 打开视频
function openVideo(item) {
  if (item.isSelect) {
    let params = { sbbh: item.sxtid, splitNum: 1};
    emitter.emit("openGzyVideo", params);
  }
}

// 获取感知源撒点数据
function getGzyAll() {
  emitter.emit("deletePointArea", "sp");
  getSxtAll(queryParams.value).then((res) => {
    if (res.length > 0) {
      let arr = []
      res.forEach(el=>{
        if(el.jd && el.wd){
          arr.push(el)
        }
      })
     emitter.emit("addPoint", {
          coords: arr,
          icon: require("@/assets/point/sp.png"),
          flag: "sp"
        });
    }
  });
}
// 获取感知源列表
function getGzyList() {
  getSxtList(queryParams.value).then((res) => {
    gzyList.value = res.records;
    total.value = res.total;
  });
}
// 删除摄像头组
function deleteSxtz(i) {
  if (sxtzList.value.length <= 1) {
    proxy.$message.error("至少保存一个摄像头组！！");
    return;
  }
  proxy
    .$confirm("确定删除该摄像头组？", "提示")
    .then(() => {
      sxtzList.value = sxtzList.value.filter((item, index) => {
        return index != i;
      });
    })
    .catch((_) => {});
}
// 点击input框
function clickInput(index, ind) {
  sxtzList.value.forEach((item) => {
    item.sxtList.forEach((it) => {
      it.isSelect = false;
    });
  });
  sxtzList.value[index].sxtList[ind].isSelect = true;
  activeIndex.sbzIndex = index;
  activeIndex.sbIndex = ind;
}
// 添加摄像头组
function addSxtz() {
  let sxtList = [];
  for (let i = 0; i < Number(fa.value.fps); i++) {
    sxtList.push({});
  }
  sxtzList.value.push({
    sxtzmc: "摄像头组" + (sxtzList.value.length + 1),
    sxtList: sxtList
  });
}

// 选择视频
function chooseVideo(sxt) {
  if (null != activeIndex.sbzIndex && null != activeIndex.sbIndex) {
    sxtzList.value[activeIndex.sbzIndex].sxtList[activeIndex.sbIndex].sxtmc =
      sxt.sbmc;
    sxtzList.value[activeIndex.sbzIndex].sxtList[activeIndex.sbIndex].sxtid =
      sxt.jkdbgbh;
  }
}
// 点击摄像头定位弹窗 
function clickItem(sxt) {
  // emitter.emit("showGzyInfo", sxt);
  emitter.emit("addPoint", {
    coords: [sxt],
    icon: require(`@/assets/point/sp.png`),
    flag: "sp"
  });
}
// 提交
function submit() {
  const params = {
    faid: props.faid,
    sxtzList: sxtzList.value.map((item) => {
      const sxt = {
        sxtzmc: item.sxtzmc,
        sxtList: item.sxtList.map((e) => {
          return { sxtid: e.sxtid, sxtmc: e.sxtmc };
        })
      };
      return sxt;
    })
  };
  if (activeAddSxt.value) {
    addSxtPz(params).then(() => {
      proxy.$message({ type: "success", message: "新增成功" });
      emit("getIsShow", false);
      props.pzIsShow = false;
    });
  } else {
    editSxtPz(params).then(() => {
      proxy.$message({ type: "success", message: "修改成功" });
      emit("getIsShow", false);
      props.pzIsShow = false;
    });
  }
}
function close() {
  emit("getIsShow", false);
  props.pzIsShow = false;
}
function getFaInfo() {
  getSpInfo(props.faid).then((res) => {
    fa.value = res;
    let sxtList = [];
    if (res.sxtzList.length > 0) {
      activeAddSxt.value = false;
      sxtzList.value = res.sxtzList.map((item) => {
        return {
          sxtzmc: item.sxtzmc,
          sxtList: item.sxtList.map((e) => {
            return {
              sxtid: e.sxtid,
              sxtmc: e.sxtmc
            };
          })
        };
      });
    } else {
      activeAddSxt.value = true;
      for (let i = 0; i < Number(fa.value.fps); i++) {
        sxtList.push({});
      }
      sxtzList.value.push({
        sxtzmc: "摄像头组1",
        sxtList: sxtList
      });
    }
  });
}
onMounted(() => {
  getFaInfo();
  // 查询摄像头列表和撒点
  getGzyList();
  // 获取感知源撒点信息
  getGzyAll();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";
</style>
<style lang="scss" scoped>
.box_center_list {
  .sxt_list {
    height: calc(100vh - 300px);
    overflow: auto;
    .sxt_item {
      cursor: pointer;
      width: 100%;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      border: 1px solid #0065d8;
      margin-top: 10px;
      border-radius: 5px;
      padding: 3px 0;
      box-sizing: border-box;
      min-height: 40px;
      .sxtmc {
        // width: 70%;
      }
      .btns {
        width: 70px;
        text-align: center;
        display: inline-block;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
          margin-left: 5px;
          cursor: pointer;
        }
        .play {
          color: #409eff;
          &:hover {
            color: #79bbff;
            text-decoration: underline;
          }
        }
        .select {
          color: #529b2e;
          &:hover {
            color: #95d475;
            text-decoration: underline;
          }
        }
      }
    }
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
  }
  .page1 {
    width: 100%;
    text-align: center;
  }
}
.box_sp {
  .sxtz_btn {
    margin-top: 20px;
    text-align: right;
  }
  .sxtz_title {
    text-align: center;
  }
  .sxtzList {
    margin-top: 10px;
    height: calc(100vh - 280px);
    overflow: auto;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .sxtzmc {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 230px;
        > span {
          width: 55px;
        }
      }
    }
    .sxtList {
      position: relative;
      margin-top: 5px;
      display: flex;
      .btns {
        width: 70px;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn {
          margin-left: 5px;
          cursor: pointer;
        }
        .play {
          color: #409eff;
          &:hover {
            color: #79bbff;
            text-decoration: underline;
          }
        }
        .sz {
          color: #f56c6c;
          margin-top: 5px;
          &:hover {
            color: #f89898;
            text-decoration: underline;
          }
        }
      }
      .input {
        width: 180px;
        margin-left: 10px;
      }
      .icon {
        position: absolute;
        left: 0;
        top: 15px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: red;
      }
    }
  }
  border-right: 1px solid #07376d;
  padding: 10px;
  box-sizing: border-box;
}
.box_map {
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
::v-deep .el-card__header {
  padding: 10px;
}
::v-deep .el-card__body {
  padding: 10px 5px;
}
</style>
