<template>
  <NAV />
  <!--  侧边栏显隐-->
  <div class="aside">
    <ul class="aside-ul">
      <li
        class="aside-li"
        :key="index"
        v-for="(item, index) in asideList"
        @click="toggleDevice(item, index)"
      >
        <img
          :src="deviceIndex === index ? item.select : item.default"
          alt=""
          srcset=""
        />
        <img
          class="aside-li-msg"
          v-if="deviceIndex === index"
          :src="item.rightImg"
          alt=""
          srcset=""
        />
      </li>
    </ul>
  </div>
  <div id="three3D">
    <Three
      ref="three"
      @openRealPlayer="openRealPlayer"
      @openWebPlayer="openWebPlayer"
      :threeAream="threeAream"
    />
  </div>
  <div class="container">
    <div class="container-left">
      <div class="container-left-box">
        <!-- 排班表 -->
        <div class="box3">
          <div class="public-title">
            <span class="font">排班表</span>
            <span class="more" @click="goSchedule"> </span>
          </div>
          <div class="schedule">
            <div class="schedule-date">
              <p>
                <i class="drop"></i>
                日期：
                <span
                  >{{
                    schedule.length != 0
                      ? getTime("日期", schedule[scheduleIndex].ScheduTime)
                      : "无数据"
                  }}
                </span>
              </p>
              <p style="margin-left: 2.37rem">
                <i class="drop"></i>
                时间：
                <span>{{
                  schedule.length != 0
                    ? getTime("时间", schedule[scheduleIndex].ScheduTime)
                    : "无数据"
                }}</span>
              </p>
              <p>
                <i class="drop"></i>
                星期：
                <span>{{
                  schedule.length != 0
                    ? getTime("星期", schedule[scheduleIndex].ScheduTime)
                    : "无数据"
                }}</span>
              </p>
            </div>
            <div class="schedule-person">
              <div class="pre" @click="preClick"></div>
              <div class="next" @click="nextClick"></div>
              <div class="schedule-person-box">
                <div
                  :style="'transform:translateX(' + xVal + ')'"
                  class="schedule-person-swiper"
                >
                  <section
                    v-for="(item, index) in schedule"
                    :key="index"
                    class="schedule-person-item"
                  >
                    <img :src="previewUrl + item.Pic" alt="" />
                    <div>{{ item.Name }}</div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    钥匙柜数据    -->
        <div class="box2">
          <div class="public-title">
            <span class="font">钥匙柜状态总览</span>
            <span class="record-icon" @click="openRecord"> </span>
          </div>
          <div class="keyword">
            <ul class="keyword-state">
              <li v-for="(item, index) in keywordState">
                <i :class="'keyword-state-icon' + index"></i>
                <span>{{ item }}</span>
              </li>
            </ul>

            <div class="keyword-box">
              <section
                v-for="item in keywordList"
                class="keyword-item"
                :key="item.key_name"
                :class="'keyword-item-state' + item.key_status"
              >
                <span>{{ item.key_name }}号锁位</span>
                <span class="position" v-if="item.key_status == 2">被取走</span>
              </section>
            </div>
          </div>
        </div>

        <!-- 门禁进入实况-->
        <div class="box5">
          <div class="public-title">
            <span class="font">门禁进入实况</span>
          </div>
          <div class="access-control">
            <el-collapse
              v-model="activeNames"
              accordion
              @change="getDoorHandle"
            >
              <el-collapse-item
                :title="item.doorName"
                :name="item.doorName"
                v-for="(item, index) in doorNames"
                :key="index"
              >
                <el-timeline>
                  <el-timeline-item
                    v-for="(activity, index) in item.data"
                    :key="index"
                  >
                    <p>{{ activity.no }}</p>
                    <p
                      v-if="!activity.no"
                      class="personMsg"
                      style="display: flex; justify-content: space-between"
                    >
                      <span
                        v-if="activity.inAndOutType"
                        style="margin-left: 0.5rem"
                      >
                        {{ activity.personName }}
                        <span
                          style="
                            margin-left: 0.5rem;
                            color: rgba(233, 244, 255, 0.6);
                          "
                          >{{
                            activity.inAndOutType == -1
                              ? "出库房"
                              : activity.inAndOutType == 1
                              ? "进入库房"
                              : "未知"
                          }}</span
                        >
                      </span>
                      <span
                        style="color: rgba(0, 221, 255, 1); font-size: 0.75rem"
                        >{{ activity.eventTime }}</span
                      >
                    </p>

                    <div class="enterImg" v-if="activity.picUri">
                      <img
                        :src="'https://192.168.17.3:6113' + activity.picUri"
                        alt=""
                      />
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
    <div class="container-right">
      <div class="container-right-box">
        <!--  报警列表  -->
        <div class="box1">
          <div class="public-title">
            <span class="font">报警列表</span>
          </div>
          <div class="alarmList">
            <!-- 区域入侵报警 -->
            <el-carousel indicator-position="none" :autoplay="false">
              <el-carousel-item
                v-for="(item, index) in alarmList.regional"
                :key="index"
              >
                <section class="regional" @click="openBackPlayer(item)">
                  <div class="alarmList-type">区域入侵</div>
                  <div class="alarmList-regional">
                    <div
                      @click.stop="openImg(item)"
                      style="
                        width: 6.75rem;
                        height: 2.75rem;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <el-image
                        style="width: 6.75rem; height: 2.75rem"
                        :src="item.imageUrl"
                        fit="cover"
                      />
                    </div>

                    <div class="alarmList-regional-msg">
                      <div>
                        <i class="drop"></i>
                        <span>位置：</span>
                        <span>{{ item.address }}</span>
                      </div>
                      <div>
                        <i class="drop"></i>
                        <span>时间：</span>
                        <span>{{ item.date }}</span>
                      </div>
                    </div>
                  </div>
                </section>
              </el-carousel-item>
            </el-carousel>
            <!-- 温湿度报警 -->
            <el-carousel indicator-position="none" :autoplay="false">
              <el-carousel-item
                v-for="(item, index) in alarmList.temperatureAlarm"
                :key="index"
              >
                <section class="humidity">
                  <div class="alarmList-type" v-if="item.sensorType == 'temp'">
                    温度告警
                  </div>
                  <div
                    class="alarmList-type"
                    v-else-if="item.sensorType == 'humidity'"
                  >
                    湿度告警
                  </div>
                  <div class="alarmList-content">
                    <div>
                      <i class="drop"></i>
                      <span v-if="item.sensorType == 'temp'">当前温度：</span>
                      <span v-else-if="item.sensorType == 'humidity'"
                        >当前湿度：</span
                      >
                      <span
                        v-if="item.sensorType == 'temp'"
                        class="unit"
                        :style="
                          item.latestValue >= item.alarmHigh
                            ? 'color:red'
                            : 'color:green'
                        "
                        >{{ item.latestValue }}℃</span
                      >
                      <span
                        v-else-if="item.sensorType == 'humidity'"
                        class="unit"
                        :style="
                          item.latestValue >= item.alarmHigh
                            ? 'color:red'
                            : 'color:green'
                        "
                        >{{ item.latestValue }}%</span
                      >
                    </div>
                    <div>
                      <i class="drop"></i>
                      <span v-if="item.sensorType == 'temp'">报警温度：</span>
                      <span v-else-if="item.sensorType == 'humidity'"
                        >报警湿度：</span
                      >
                      <span v-if="item.sensorType == 'temp'" class="unit"
                        >{{ item.alarmHigh }}℃</span
                      >
                      <span
                        v-else-if="item.sensorType == 'humidity'"
                        class="unit"
                        >{{ item.alarmHigh }}%</span
                      >
                    </div>
                    <div>
                      <i class="drop"></i>
                      <span>位置：</span>
                      <span>{{ item.name }}</span>
                    </div>
                    <div>
                      <i class="drop"></i>
                      <span>时间：</span>
                      <span>{{ item.latestTime }}</span>
                    </div>
                  </div>
                </section>
              </el-carousel-item>
            </el-carousel>
            <!-- 紧急告警 -->
            <el-carousel indicator-position="none" :autoplay="false">
              <el-carousel-item
                v-for="(item, index) in alarmList.urgent"
                :key="index"
              >
                <section class="urgent">
                  <div class="alarmList-type">紧急告警</div>
                  <div class="alarmList-content">
                    <div>
                      <i class="drop"></i>
                      <span>报警IP：</span>
                      <span>{{ item.AlarmAddress }}</span>
                    </div>
                    <div>
                      <i class="drop"></i>
                      <span>报警状态：</span>
                      <span style="color: red">{{ item.AlarmContent }}</span>
                    </div>
                    <div class="ellipsis">
                      <i class="drop"></i>
                      <span>位置：</span>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.AlarmName"
                        placement="top-start"
                      >
                        <span>{{ item.AlarmName }}</span>
                      </el-tooltip>
                      <!-- <span>{{ item.AlarmName }}</span> -->
                    </div>
                    <div>
                      <i class="drop"></i>
                      <span>时间：</span>
                      <span>{{ item.AlarmTime }}</span>
                    </div>
                  </div>
                </section>
              </el-carousel-item>
            </el-carousel>
            <!-- 烟感报警 -->
            <el-carousel indicator-position="none" :autoplay="false">
              <el-carousel-item
                v-for="(item, index) in smokeDevice"
                :key="index"
              >
                <section class="urgent">
                  <div class="alarmList-type">烟感告警</div>
                  <div class="alarmList-content">
                    <div>
                      <i class="drop"></i>
                      <span>{{ item.name }}</span>
                    </div>
                    <div>
                      <i class="drop"></i>
                      <span
                        :style="item.state == 1 ? 'color:red' : 'color:green'"
                        >{{ item.state == 1 ? "报警" : "正常" }}</span
                      >
                    </div>
                  </div>
                </section>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>

        <!-- 巡更线监控 -->
        <div class="box4">
          <div class="public-title">
            <span class="font">巡更线监控</span>
          </div>
          <div class="patrol-line">
            <el-table
              :data="tableData"
              style="width: 100%"
              stripe
              :row-class-name="getRowColor"
            >
              <el-table-column
                prop="position"
                min-width="25%"
                label="巡更点"
                show-overflow-tooltip
              />
              <el-table-column prop="state" min-width="25%" label="巡更状态">
                <template #default="scope">
                  <div>
                    <p>
                      <i
                        class="qiu-icon"
                        :style="'background-color:' + getColor(scope.row.state)"
                      ></i
                      >{{ fontState[parseInt(scope.row.state)] }}
                    </p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="history"
                min-width="55%"
                label="打卡记录"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </div>

        <!-- 监控画面 -->
        <!-- <div class="box4">
          <div class="public-title">
            <span class="font">监控画面</span>
          </div>
          <div class="camera">
            <div class="camera-box">
              <iframe
                id="webPlayer"
                src="player/webPlayer.html"
                frameborder="0"
              ></iframe>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
  <!--  底部-->
  <div class="footer">
    <ul class="footer-ul">
      <li
        class="footer-ul-li"
        v-for="(item, index) in footerList"
        :key="index"
        @click="toggleOpen(item, index)"
      >
        <img :src="footerIndex !== index ? item.default : item.select" alt="" />
      </li>
    </ul>
  </div>

  <!-- 底部点击弹框 -->
  <Dialog @close="closeHandle" :title="dialogName" v-if="dialogShow" />
  <!-- 播放器弹窗 -->
  <Player
    @close="closePlayer"
    :title="playerName"
    :videoList="videoList"
    :img="alarmImg"
    v-if="playerShow"
  />
  <!-- 运维状况 -->
  <!-- <div class="iframeBox">
    <iframe
      ref="iframeChart"
      id="iframeChart"
      src='https://192.168.17.3:443/xauthplus-plugin/thirdLogin?type=third&service=https://192.168.17.3:443/nms/views/home'
      frameborder="0"
    ></iframe>
  </div> -->

  <!-- 陌生人报警 -->
  <Linkage v-if="linkageShow" @open="openLinkage" @close="closeLinkage" />
  <!-- 取还记录 -->
  <Record v-if="recordShow" @close="closeRecord" />
</template>
<script setup>
import { v4 as uuidv4 } from "uuid";
import getPath from "@/utils/getPath.js";
import Three from "@/components/Three.vue";
import { ref, onMounted, reactive, nextTick, watch, onUnmounted } from "vue";
import cameraUrl from "@/assets/images/camera.png";
import NAV from "@/components/nav.vue";
import Dialog from "@/components/dialog.vue";
import Player from "@/components/player.vue";
import Linkage from "@/components/linkage.vue";
import moment from "moment";
import {
  getHikvision,
  getScheduleList,
  getToken,
  getEmergencyApi,
  getKeywordMsg,
} from "@/api/index";
import { getTime } from "@/utils/tool.js";
import Record from "@/components/record.vue";
import { useRouter } from "vue-router";
const uuid = uuidv4();
const router = useRouter();
// 侧边栏
const asideList = ref([
  {
    default: getPath.store,
    select: getPath.storeSelect,
    rightImg: getPath.storePrompt,
    title: "仓库",
  },
  {
    default: getPath.monitorPoint,
    select: getPath.monitorPointSelect,
    rightImg: getPath.monitorPointPrompt,
    title: "监控点",
  },
  {
    default: getPath.alarmHost,
    select: getPath.alarmHostSelect,
    rightImg: getPath.alarmHostPrompt,
    title: "报警主机",
  },
  // {
  //   default: getPath.water,
  //   select: getPath.waterSelect,
  //   rightImg: getPath.waterPrompt,
  //   title: "水浸探测器",
  // },
  {
    default: getPath.smoke,
    select: getPath.smokeSelect,
    rightImg: getPath.smokePrompt,
    title: "烟感探测器",
  },
  {
    default: getPath.humidity,
    select: getPath.humiditySelect,
    rightImg: getPath.humidityPrompt,
    title: "温湿度探测器",
  },
  {
    default: getPath.accessControl,
    select: getPath.accessControlSelect,
    rightImg: getPath.accessControlPrompt,
    title: "人脸门禁一体机",
  },
]);
// 底部栏
const footerIndex = ref(-1);
const footerList = ref([
  {
    title: "温湿度记录",
    default: getPath.record,
    select: getPath.recordSelect,
  },
  { title: "枪支离位报警", default: getPath.guns, select: getPath.gunsSelect },
  {
    title: "视频监控",
    default: getPath.monitor,
    select: getPath.monitorSelect,
  },
  {
    title: "运维状况",
    default: getPath.operation,
    select: getPath.operationSelect,
  },
  {
    default: getPath.shipin,
    select: getPath.shipinSelect,
    title: "视频回放",
  },
]);
const dialogName = ref("");
// 运维状况控制隐藏
const iframeShow = ref(false);
const iframeChart = ref(null);
async function toggleOpen(item, index) {
  dialogName.value = item.title;
  playerName.value = item.title;
  footerIndex.value = index;
  // const token = await getToken();
  const token = sessionStorage.getItem("token");
  if (item.title === "枪支离位报警") {
    window.location.assign("qiangzhi://");
  } else if (item.title === "运维状况") {
    location.href =
      "https://192.168.17.3:443/xauthplus-plugin/thirdLogin?type=third&service=https://192.168.17.3:443/nms/views/home&token=" +
      token;
  } else if (item.title === "温湿度记录") {
    location.href =
      "https://192.168.17.3:443/xauthplus-plugin/thirdLogin?type=third&service=https://192.168.17.3:443/pems/environment-monitor&token=" +
      token;
  } else {
    dialogShow.value = true;
  }
}

// 报警列表
const alarmList = ref({
  regional: [],
  temperatureAlarm: [],
  humidity: [],
  urgent: [],
});

// 3d模型区域入侵报警数据
const threeAream = reactive({});
// 钥匙柜
const keywordState = ref(["在位", "不在位"]);
// 钥匙柜
const keywordList = ref([
  {
    keyCapturing: "1",
    keyState: "1",
  },
  {
    keyCapturing: "2",
    keyState: "1",
  },
  {
    keyCapturing: "3",
    keyState: "1",
  },
  {
    keyCapturing: "4",
    keyState: "1",
  },
  {
    keyCapturing: "5",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "6",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "7",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "8",
    keyState: "1",
  },
  {
    keyCapturing: "9",
    keyState: "1",
  },
  {
    keyCapturing: "10",
    keyState: "1",
  },
  {
    keyCapturing: "11",
    keyState: "1",
  },
  {
    keyCapturing: "12",
    keyState: "1",
  },
  {
    keyCapturing: "13",
    keyState: "1",
  },
  {
    keyCapturing: "14",
    keyState: "1",
  },
  {
    keyCapturing: "15",
    keyState: "1",
  },
  {
    keyCapturing: "16",
    keyState: "1",
  },
  {
    keyCapturing: "17",
    keyState: "1",
  },
  {
    keyCapturing: "18",
    keyState: "1",
  },
  {
    keyCapturing: "19",
    keyState: "1",
  },
  {
    keyCapturing: "20",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "21",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "22",
    keyState: "0",
    position: "李柳柳取走",
  },
  {
    keyCapturing: "23",
    keyState: "1",
  },
  {
    keyCapturing: "24",
    keyState: "1",
  },
  {
    keyCapturing: "25",
    keyState: "1",
  },
  {
    keyCapturing: "26",
    keyState: "1",
  },
  {
    keyCapturing: "27",
    keyState: "1",
  },
  {
    keyCapturing: "28",
    keyState: "1",
  },
  {
    keyCapturing: "29",
    keyState: "1",
  },
  {
    keyCapturing: "30",
    keyState: "1",
  },
]);
const recordShow = ref(false);
function openRecord() {
  // hidePlay();
  recordShow.value = true;
}
function closeRecord(bool) {
  // openPlay();
  recordShow.value = bool;
}
// 门禁进入实况
const activeNames = ref([]);
const doorNames = ref([]);
// 排班表
const schedule = ref([{}, {}, {}]);
const scheduleIndex = ref(0);
const xVal = ref(0);
const previewUrl = ref(import.meta.env.VITE_PREVIEW_URL);
// 获取排班表
function getScheduleData() {
  if (handleTimer.timer4) {
    clearTimeout(handleTimer.timer4);
  }
  var getScheduleTime = {
    StartTime: moment(new Date().setHours(0, 0, 0, 0)).format(
      "yyyy-MM-DD HH:mm:ss"
    ),
    EndTime: moment(
      new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 2
    ).format("yyyy-MM-DD HH:mm:ss"),
  };
  // 获取排班表数据
  getScheduleList(getScheduleTime).then((res) => {
    if (res.state == "Success") {
      // let date = moment(new Date()).format("YYYY-MM-DD");
      // let arr = res.data.ds.filter((ele) => {
      //   return moment(ele.ScheduTime).format("YYYY-MM-DD") == date;
      // });
      schedule.value = res.data.ds.sort((a, b) => {
        return moment(a.ScheduTime).unix() - moment(b.ScheduTime).unix();
      });
    }
    handleTimer.timer4 = setTimeout(() => {
      getScheduleData();
    }, 7000);
  });
}

const keywordTimer = ref(null);
// 获取钥匙状态
function getKeywordData() {
  if (keywordTimer.value) {
    clearTimeout(keywordTimer);
  }
  let data = {
    id: "112323",
  };
  getKeywordMsg(data).then((res) => {
    keywordList.value = res.data.list;
    keywordTimer.value = setTimeout(() => {
      getKeywordData();
    }, 10000);
  });
}
// 上一页
function preClick() {
  scheduleIndex.value--;
  if (scheduleIndex.value < 0) {
    // scheduleIndex.value = schedule.value.length - 1;
    return;
  }
  xVal.value = -(100 / 3) * scheduleIndex.value + "%";
}
// 下一页
function nextClick() {
  scheduleIndex.value++;
  if (scheduleIndex.value === schedule.value.length) {
    return;
  }
  xVal.value = -(100 / 3) * scheduleIndex.value + "%";
}
// 定时器
const handleTimer = reactive({
  timer1: null,
  timer2: null,
  timer3: null,
  timer4: null,
  timer5: null,
});
onUnmounted(() => {
  // 清除定时器
  clearTimeout(handleTimer.timer1);
  clearTimeout(handleTimer.timer2);
  clearTimeout(handleTimer.timer3);
  clearTimeout(handleTimer.timer4);
  clearTimeout(handleTimer.timer5);
  if (keywordTimer.value) {
    clearTimeout(keywordTimer);
  }
  if (patrolTimer.value) {
    clearTimeout(patrolTimer.value);
  }
  if (smokeTimer.value) {
    clearTimeout(smokeTimer.value);
  }
});
// 获取区域入侵数据
function getRegionData() {
  if (handleTimer.timer1) {
    clearTimeout(handleTimer.timer1);
  }
  const historyDay = reactive({
    startStamp: moment(
      new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000 * 30
    ).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
    endStamp: moment(
      new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
    ).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
  });
  getHikvision({
    path: "/artemis/api/els/v1/events/search",
    data: {
      ability: "event_vss",
      pageSize: 500,
      pageNo: 1,
      startTime: historyDay.startStamp,
      endTime: historyDay.endStamp,
    },
  }).then((res) => {
    if (res.code == 0) {
      // 3d模型区域入侵报警数据
      threeAream.address = res.result.data.list[0].eventLogSrcList[0].resName;
      threeAream.date = res.result.data.list[0].startTime;
      alarmList.value.regional = res.result.data.list.map((ele) => {
        return {
          title: ele.eventTypeName,
          address: ele.eventLogSrcList[0].resName,
          date: ele.startTime,
          imageUrl: JSON.parse(ele.eventLogSrcList[0].data).fielddetection
            ? JSON.parse(ele.eventLogSrcList[0].data).fielddetection[0].imageUrl
            : JSON.parse(ele.eventLogSrcList[0].data).smokeDetection
            ? JSON.parse(ele.eventLogSrcList[0].data).smokeDetection[0].imageUrl
            : null,
          cameraIndex: JSON.parse(ele.eventLogSrcList[0].data).fielddetection
            ? JSON.parse(ele.eventLogSrcList[0].data).fielddetection[0]
                .targetAttrs.cameraIndexCode
            : JSON.parse(ele.eventLogSrcList[0].data).smokeDetection
            ? JSON.parse(ele.eventLogSrcList[0].data).smokeDetection[0]
                .targetAttrs.cameraIndexCode
            : null,
          startTime: ele.startTime,
          endTime: ele.endTime,
          handleStatus: ele.handleStatus,
        };
      });
    }
    handleTimer.timer1 = setTimeout(() => {
      getRegionData();
    }, 10000);
  });
}
// 获取动环数据
function getRotatingData() {
  if (handleTimer.timer2) {
    clearTimeout(handleTimer.timer2);
  }
  // 分页查询动环传感器
  getHikvision({
    path: "/artemis/api/pems/v1/monitor/search",
    data: {
      pageNo: 1,
      pageSize: 1000,
      isIncludeSonRegion: true,
    },
  }).then((res) => {
    if (res.code == 0) {
      // console.log(res, "分页查询");
      var AlarmNames = [];
      // temperatureAlarm.value = [];
      if (alarmList.value.temperatureAlarm.length > 0) {
        AlarmNames = alarmList.value.temperatureAlarm.map((item) => {
          return item.name;
        });
      }

      for (let i = 0; i < res.result.data.list.length; i++) {
        getHikvision({
          path: "/artemis/api/pems/v1/sensor/search",
          data: {
            pageNo: 1,
            pageSize: 1000,
            parentIndexCode: res.result.data.list[i].indexCode,
          },
        }).then((data) => {
          if ((data.code = 200)) {
            for (let j = 0; j < data.result.data.list.length; j++) {
              if (
                data.result.data.list[j].sensorType == "humidity" ||
                data.result.data.list[j].sensorType == "temp"
              ) {
                if (AlarmNames.indexOf(data.result.data.list[j].name) == -1) {
                  alarmList.value.temperatureAlarm.push(
                    data.result.data.list[j]
                  );
                } else {
                  // temperatureAlarm.value.replace()
                }
              }
            }
            handleTimer.timer2 = setTimeout(() => {
              getRotatingData();
            }, 10000);
          }
        });
      }
    }
  });
}
// 获取紧急报警数据
function getEmergencyData() {
  if (handleTimer.timer3) {
    clearTimeout(handleTimer.timer3);
  }
  var emergencyTime = {
    StartTime: moment(
      new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000 * 30
    ).format("yyyy-MM-DD HH:mm:ss"),
    EndTime: moment(
      new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
    ).format("yyyy-MM-DD HH:mm:ss"),
  };
  getEmergencyApi(emergencyTime).then((res) => {
    if (res.code == 0) {
      alarmList.value.urgent = res.data.sort((a, b) => {
        return moment(b.AlarmTime).unix() - moment(a.AlarmTime).unix();
      });
      // console.log(alarmList.value.urgent,'报警数据xxxx');
      handleTimer.timer3 = setTimeout(() => {
        getEmergencyData();
      }, 10000);
    }
  });
}
// 获取门禁列表
function getDoorList() {
  let doorData = {
    path: "/artemis/api/resource/v1/acsDoor/acsDoorList",
    data: {
      pageNo: 1,
      pageSize: 1000,
    },
  };
  getHikvision(doorData).then((res) => {
    if (res.code == 0) {
      res.result.data.list.forEach((ele) => {
        doorNames.value.push({ doorName: ele.doorName, data: [] });
      });
    }
  });
}
// 获取门禁事件
// 将标准实践格式转化为ios8601
const steamp = reactive({
  startStamp: moment(new Date().setHours(0, 0, 0, 0)).format(
    "YYYY-MM-DDTHH:mm:ss.SSSZ"
  ),
  endStamp: moment(
    new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
  ).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
});
// 实时更新
setInterval(() => {
  (steamp.startStamp = moment(new Date().setHours(0, 0, 0, 0)).format(
    "YYYY-MM-DDTHH:mm:ss.SSSZ"
  )),
    (steamp.endStamp = moment(
      new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
    ).format("YYYY-MM-DDTHH:mm:ss.SSSZ"));
}, 1000);

// 获取门禁事件数据
function getDoorHandle(event) {
  let doorParams = {
    path: "/artemis/api/acs/v2/door/events",
    data: {
      pageNo: 1,
      pageSize: 1000,
      startTime: steamp.startStamp,
      endTime: steamp.endStamp,
      receiveStartTime: steamp.startStamp,
      receiveEndTime: steamp.endStamp,
      doorName: "",
      order: "desc",
    },
  };
  // 默认清除
  doorParams.data.doorName = event;
  getHikvision(doorParams).then((res) => {
    if (res.code == 0) {
      doorNames.value.forEach((el) => {
        if (el.doorName === event) {
          if (!res.result.data.list.length) {
            el.data.push({ no: "无数据" });
          } else {
            el.data = res.result.data.list;
          }
        } else {
          el.data = [];
        }
      });
    }
  });
}
// dom挂载后
onMounted(() => {
  getDoorList();
  getScheduleData();
  // 获取入侵数据
  getRegionData();
  // 动环数据
  getRotatingData();
  // 紧急报警数据
  getEmergencyData();
  // 巡更
  getPatrolData();
  // 烟感
  getSomkeData();
  // 钥匙柜数据
  getKeywordData();
  let token = sessionStorage.getItem("token");
  if (!token) {
    alert("登录过期，请重新登录");
    router.push("/login");
  }
});
// 巡更线
const tableData = ref([
  // {
  //   position: "巡更点1",
  //   state: "1",
  //   history: "刘七七 2020/06/08 14:27:11",
  // },
]);

// 状态文字
const fontState = ref(["准时", "早巡", "晚巡", "补漏巡", "漏巡"]);
// 获取状态颜色
function getColor(state) {
  if (state == 1 || state == 2) {
    return "#f05657";
  } else if (state == 4 || state == 3) {
    return "#FFBF00";
  } else if (state == 0) {
    return "#52e76f";
  }
}
// 弹窗的显影
const dialogShow = ref(false);
function closeHandle(e) {
  // openPlay();
  footerIndex.value = -1;
  dialogShow.value = false;
}
const deviceIndex = ref(0);

const three = ref(null);
// 侧边栏点击事件控制three中设备显隐
function toggleDevice(item, index) {
  deviceIndex.value = index;
  if (three.value) {
    three.value.clearLabelObj(item.title);
  }
}
// 跳转排班表后台
function goSchedule() {
  location.href =
    import.meta.env.VITE_PREVIEW_URL + "/Management/Home.aspx?Id=1";
}

// 关闭播放器弹窗
const playerShow = ref(false);
function closePlayer() {
  // openPlay();
  playerShow.value = false;
}
const videoList = ref("");
const playerName = ref("实时视频");
// 打开播放器弹窗
function openRealPlayer(event, cameraIndexCode) {
  // hidePlay();
  playerShow.value = event;
  videoList.value = { indexCode: cameraIndexCode };
  playerName.value = "实时视频";
}
const alarmImg = ref("");
function openImg(item) {
  playerName.value = "图片预览";
  playerShow.value = true;
  alarmImg.value = item.imageUrl;
  videoList.value = false;
}
// 打开回放播放器
function openBackPlayer(item) {
  playerShow.value = true;
  videoList.value = `${item.cameraIndex},${new Date(
    item.startTime.replace("-", "/").replace("-", "/")
  ).getTime()},${new Date(
    item.endTime.replace("-", "/").replace("-", "/")
  ).getTime()}`;
  playerName.value = "回放视频";
}
// 获取登录凭证
async function getTokenData(service, name) {
  const res = await getToken({
    language: "zh_CN",
    service: service,
    userCode: name,
  });
  // iframeShow.value = true;
  nextTick(() => {
    // iframeChart.value.src = `https://192.168.17.3/bic/ssoService/v1/tokenLogin?token=${res.result.data.token}&service=${service}`
    // console.log(iframeChart.contentWindow);
    // iframeChart.outerHTML = iframeChart.outerHTML;
    // console.log(iframeChart.value,'xxxxxxxxxxxxx');
    location.href = `https://192.168.17.3/bic/ssoService/v1/tokenLogin?token=${res.result.data.token}&service=${service}`;
  });
}
const linkageShow = ref(true);
// 关闭陌生人弹窗
function closeLinkage(event) {
  // openPlay();
  linkageShow.value = event;
}
// 打开陌生人弹窗
function openLinage(event) {
  // hidePlay();
  linkageShow.value = event;
}
const webIndex = ref(0);
const webTimer = ref(null);
// 打开监控画面
function openWebPlayer(data) {
  nextTick(() => {
    let webPlayer = document.querySelector("#webPlayer");
    if (webPlayer.contentWindow.oWebControl) {
      webPlayer.contentWindow.startPlay(data[webIndex.value].cameraIndexCode);
    }
    if (webTimer.value) {
      clearInterval(webTimer.value);
    }
    if (webIndex.value === 0) {
      setTimeout(() => {
        webPlayer.contentWindow.startPlay(data[webIndex.value].cameraIndexCode);
      }, 4000);
    }
    webTimer.value = setInterval(() => {
      if (data.length == webIndex.value) {
        winIndex.value = 0;
      }
      webPlayer.contentWindow.startPlay(data[webIndex.value].cameraIndexCode);
      webIndex.value++;
    }, 10000);
  });
}
// function hidePlay() {
//   let webPlayer = document.querySelector("#webPlayer");
//   if (webPlayer.contentWindow.oWebControl) {
//     webPlayer.contentWindow.oWebControl.JS_HideWnd();
//   }
// }
// function openPlay() {
//   let webPlayer = document.querySelector("#webPlayer");
//   if (webPlayer.contentWindow.oWebControl) {
//     webPlayer.contentWindow.oWebControl.JS_ShowWnd();
//   }
// }
const patrolTimer = ref(null);
// 获取巡更信息
function getPatrolData() {
  if (patrolTimer.value) {
    clearTimeout(patrolTimer.value);
  }
  // 巡更数据接口请求
  getHikvision({
    path: "/artemis/api/gtps/v1/patrolHistory/records",
    data: {
      pageNo: 1,
      pageSize: 1000,
      beginTime: moment(
        new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000
      ).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
      endTime: moment(
        new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
      ).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
    },
  }).then((res) => {
    var scheduleIdList = [];
    for (let i = 0; i < res.result.data.rows.length; i++) {
      scheduleIdList.push(res.result.data.rows[i].scheduleId);
    }
    getHikvision({
      path: "/artemis/api/gtps/v1/historyDetailInfo/records",
      data: {
        scheduleIdList: scheduleIdList,
      },
    }).then((data) => {
      tableData.value = data.result.data.map((ele) => {
        return {
          position: ele.pointDetailHistoryList[0].pointName,
          history:
            ele.routeInfo.personName +
            " " +
            ele.pointDetailHistoryList[0].pointBeginTimeISO,
          state: ele.routeInfo.routeResult,
        };
      });

      setTimeout(() => {
        getPatrolData();
      }, 10000);
    });
  });
}
const smokeDevice = ref([]);
const smokeTimer = ref(null);
// 获取烟感传感器数据
function getSomkeData() {
  if (smokeTimer.value) {
    clearTimeout(smokeTimer.value);
  }
  // 烟感的报警输入
  getHikvision({
    path: "/artemis/api/pems/v1/alarm_in/search",
    data: {
      pageNo: 1,
      pageSize: 1000,
      isIncludeSonRegion: true,
    },
  }).then((res) => {
    smokeDevice.value = res.result.data.list;
    setTimeout(() => {
      getSomkeData();
    }, 10000);
  });
}
</script>
<style lang="scss" scoped>
//门禁进入实况
.access-control {
  padding: vh(16) vw(16);
  box-sizing: border-box;
  height: vh(256);
  overflow-y: scroll;
}
.access-control::-webkit-scrollbar {
  display: none;
}
.ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 使用省略符号表示文本被截断 */
}
.personMsg {
  background-image: url("@/assets/images/personMsg.png");
  background-size: 100% 100%;
  height: vh(26);
}
// 视频画面
.camera {
  box-sizing: border-box;
  padding: vh(16) vw(16);
  margin-bottom: vh(20);
}
.camera-box {
  width: vw(380);
  height: vh(238);
  position: relative;
  background-size: 100% 100%;
  background-image: url("@/assets/images/camera-box.png");
  iframe {
    width: 100%;
    height: 100%;
  }
  // margin: vh(16) 0 vh(20) 0;
}
.iframeBox {
  // width: 100%;
  // height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  iframe {
    width: 100%;
    height: 100%;
  }
}
.enterImg img {
  width: vw(64);
  height: vh(64);
}
.aside {
  //height: vh(380);
  width: vw(44);
  position: fixed;
  bottom: vh(125);
  left: vw(486);
  z-index: 99;
  &-li {
    width: 100%;
    position: relative;
    margin-bottom: 0.6rem;
    &-msg {
      position: absolute;
      left: 107%;
      top: 0;
    }
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  &-left,
  &-right {
    padding-top: vw(60);
    width: vw(412);
    z-index: 999;
    height: 100%;
    position: relative;
    &-box {
      width: 100%;
      height: 100%;
    }
  }
  //标题
  .public-title,
  .access-title {
    height: vh(40);
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-left: 3.5rem;
    padding-right: 1rem;
    align-items: center;
    box-sizing: border-box;
    background-image: url("@/assets/images/title-box.png");
    span:nth-child(1) {
      font-family: pangmen;
      font-size: 1.625rem;
    }
    .more,
    .record-icon {
      background-image: url("@/assets/images/checkMore.png");
      cursor: pointer;
      background-size: 100% 100%;
      width: 4.25rem;
      height: 1.5rem;
    }
    .record-icon {
      background-image: url("@/assets/images/record-icon.png");
    }
  }
  .access-title {
    margin-top: 0.5rem;
    background-image: url("@/assets/images/door-title.png");
  }
  &-left {
    background-image: url("@/assets/images/left-mask.png");
    padding-left: 3.5rem;
    background-size: 100% 100%;

    .schedule {
      padding: vh(16) vw(16);
      box-sizing: border-box;
      margin-bottom: vh(20);
    }
    .schedule-date {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      padding: 0.6rem 0.8rem;
      box-sizing: border-box;
      background-image: url("@/assets/images/schedule-date.png");
      width: 100%;
      height: vh(80);
      margin-bottom: vh(16);
    }
    .schedule-person {
      position: relative;
      width: 100%;

      box-sizing: border-box;
      padding: 0 vw(18);
      &-box {
        position: relative;
        width: 100%;
        height: vh(160);
        overflow: hidden;
      }
      &-swiper {
        transition: all 0.8s ease-in-out;
        display: flex;
      }
      // margin-bottom: vh(15);
      // box-sizing: border-box;
      &-item {
        padding-top: vh(6);
        box-sizing: border-box;
        width: vw(108);
        height: 100%;
        background-image: url("@/assets/images/schedule-person.png");
        background-size: 100% 100%;
        text-align: center;
        margin-right: vw(9);
      }
      &-item:nth-child(3n) {
        // margin-right:0 !important;
      }
      // justify-content: space-between;

      img {
        width: vw(108);
        height: vh(116);
      }
    }
    // &-item:nth-child(3n) {
    //   margin-right: 0;
    // }
    .pre,
    .next {
      position: absolute;
      top: 40%;
      background-size: 100% 100%;
      cursor: pointer;
      width: vw(20);
      height: vh(20);
    }
    .pre {
      left: vw(-10);
      background-image: url("@/assets/images/pre.png");
    }
    .next {
      right: vw(-10);
      background-image: url("@/assets/images/next.png");
    }

    .keyword::-webkit-scrollbar {
      display: none;
    }
    //  钥匙柜
    .keyword {
      width: 100%;
      padding: 0 vw(16);
      box-sizing: border-box;
      &-state {
        display: flex;
        justify-content: flex-end;
        font-size: 0.75rem;
        margin: 1rem 0;
        &-icon0,
        &-icon1 {
          width: 0.875rem;
          height: 0.875rem;
          background-size: 100% 100%;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.5rem;
        }
        &-icon0 {
          background-image: url("@/assets/images/has.png");
        }
        &-icon0 + span {
          color: rgba(0, 220, 183, 1);
        }
        &-icon1 + span {
          color: rgba(255, 255, 255, 1);
        }
        &-icon1 {
          margin-left: 2rem;
          background-image: url("@/assets/images/noHas.png");
        }
      }
      &-box {
        height: vh(180);
        overflow: scroll;
      }
      &-box::-webkit-scrollbar {
        display: none;
      }
      &-item {
        float: left;
        width: vw(88);
        font-size: 0.75rem;
        height: vh(52);
        display: flex;
        align-items: center;
        padding: 0.5rem;
        box-sizing: border-box;
        justify-content: flex-end;
        margin-bottom: 0.5rem;
        background-image: url("@/assets/images/has-bg.png");
        background-size: 100% 100%;
        margin-right: vw(9);
        position: relative;
        .position {
          top: 0;
          position: absolute;
          left: 50%;
          white-space: nowrap;
          font-size: 0.625rem;
          transform: translate(-50%);
        }
        &-state1 {
          background-image: url("@/assets/images/has-bg.png");
          color: rgba(0, 237, 197, 1);
        }
        &-state2 {
          color: rgba(255, 255, 255, 1);
          background-image: url("@/assets/images/noHas-bg.png");
        }
      }
      &-item:nth-of-type(4n) {
        margin-right: 0;
      }
    }
  }

  &-right {
    background-image: url("@/assets/images/right-mask.png");
    padding-right: 3.5rem;
    background-size: 100% 100%;
    .alarmList::-webkit-scrollbar {
      display: none;
    }
    //报警列表
    .alarmList {
      width: 100%;
      height: vh(500);
      padding: vh(16) vw(16);
      box-sizing: border-box;
      overflow: scroll;
      flex-wrap: wrap;
      align-content: space-evenly;
      &-type {
        padding-top: 0.75rem;
        padding-left: 1.3rem;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 1);
      }
      //温湿度告警、紧急告警
      &-content {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0.7rem;
        align-items: center;
        box-sizing: border-box;
        align-content: space-evenly;
        font-size: 0.875rem;
        height: 70%;
        color: rgba(189, 220, 248, 1);
        .unit {
          color: green;
        }
      }
      &-content > div:nth-child(2n-1) {
        width: 40%;
      }
      &-content > div > span:nth-of-type(1) {
        color: rgba(88, 174, 247, 1);
      }
      :deep(.el-carousel__arrow--left) {
        left: vw(-10);
      }

      :deep(.el-carousel__arrow--right) {
        right: vw(-10);
      }
      :deep(.el-carousel) {
        width: 100%;
        height: vh(108);
        margin-bottom: vh(13);
      }
      :deep(.el-carousel:last-child) {
        margin-bottom: 0 !important;
      }
      :deep(.el-carousel__container) {
        height: vh(108);
      }
      section {
        width: 100%;
        background-size: 100% 100%;
        height: vh(108);
        background-image: url("@/assets/images/alarm-item.png");
      }

      // 区域入侵
      &-regional {
        align-items: center;
        display: flex;
        font-size: 0.875rem;
        color: rgba(189, 220, 248, 1);
        padding-left: 0.7rem;
        height: 70%;
        &-msg {
          height: 100%;
          margin-left: 0.75rem;
          display: flex;
          flex-wrap: wrap;
          align-content: space-evenly;
        }
      }
    }
  }
}

.footer {
  width: 100%;
  height: vh(26);
  position: absolute;
  bottom: 0;
  background-image: url("@/assets/images/bottom.png");

  justify-content: center;
  &-ul {
    width: vw(800);
    // width: vw(960);
    display: flex;
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%);
    &-li {
      margin-left: -1.25rem;
      cursor: pointer;
      img {
        width: vw(176);
        height: vh(36);
      }
    }
    &-li:nth-child(1) {
      margin-left: 0;
    }
  }
}
//巡更线列表
.patrol-line {
  height: vh(356);
  width: 100%;
  // margin-top: 1rem;
  padding: vh(16);
  box-sizing: border-box;
  .qiu-icon {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 50%;
  }
}
:deep(.state2) {
  color: #ffbf00;
}

:deep(.state1) {
  color: #f05657;
}

:deep(.state3) {
  color: #52e76f;
}
:deep(.el-table__row--striped) {
  background-image: none !important;
}

:deep(tr.el-table__row td.el-table__cell) {
  background-color: transparent !important;
}

:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table .el-table__cell) {
  padding: 0;
}
:deep(.el-table .cell) {
  height: 100%;
  line-height: 2.4rem;
}
:deep(.el-table tr),
:deep(.el-table),
:deep(.el-table th),
:deep(.el-table td) {
  background-color: transparent;
}
:deep(.el-table__row) {
  height: 2.4rem;
}
:deep(.el-table) {
  color: rgba(233, 244, 255, 1);
  font-size: 0.8rem;
  height: 100%;
}
:deep(.el-table thead) {
  color: rgba(255, 255, 255, 1);
  font-size: 0.8rem;
  background-image: url("@/assets/images/table-header.png");
  height: 2rem;
  line-height: 2rem;
  font-weight: normal;
}
:deep(.el-table th.el-table__cell.is-leaf),
:deep(.el-table td.el-table__cell) {
  border-color: transparent;
}
//门禁
:deep(.el-collapse-item__header) {
  height: 1.75rem;
  padding-left: 0.625rem;
  margin-bottom: vh(10);
  font-size: 0.95rem;
  box-sizing: border-box;
  border: none;
  background-color: transparent;
  color: rgba(233, 244, 255, 1);
  background-image: url("@/assets/images/door-device.png");
}
:deep(.el-collapse-item__content) {
  background-color: transparent;
  border: none !important;
  font-size: 1rem;
  padding-bottom: 0;
}

:deep(.el-collapse-item__wrap) {
  background-color: transparent;
  border: none;
}
:deep(.el-collapse) {
  border: none;
  //border-color: unset;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0.8rem;
}

:deep(.el-timeline) {
  padding-left: 0.3rem;
  box-sizing: border-box;
  padding-top: 0.5rem;
}

:deep(.el-timeline-item) {
  padding-bottom: 0.4rem;
}

:deep(.el-timeline-item__content) {
  color: rgba(233, 244, 255, 1);
  font-size: 0.875rem;
  padding: 0 1rem;
  //background-image: url('@/assets/images/timeline.png');
  //background-size: 100% 100%;
  box-sizing: border-box;
}

:deep(.el-timeline-item__node--normal) {
  width: 0.75rem;
  height: 0.75rem;
  left: 1px;
  top: 0.3rem;
  // background-color: transparent;
  background-image: url("@/assets/images/round-icon.png");
}

:deep(.el-timeline-item__tail) {
  //border-color: #0a6594;
  border: 1px dashed #fff;
  height: 87%;
  top: 1.1rem;
  left: 6px;
}
</style>