<template>
  <div style="padding: 0px 35px; display: flex; justify-content: space-between">
    <div style="z-index: 100">
      <border-panel
        height="492px"
        :header-type="4"
        width="544px"
        style="margin-bottom: 6px"
        title="总体情况"
        @click="openBasicModal"
      >
        <TotalityInfo
          :data="ztqkData"
          v-if="ztqkData && ztqkDwtjData"
          :dwData="ztqkDwtjData"
        />
      </border-panel>
      <border-panel
        height="450px"
        :header-type="4"
        width="544px"
        style="margin-bottom: 6px"
        title="视频监控"
      >
        <IotVideo
          :list="caremaData"
          :byList="caremaList"
          v-if="caremaData && caremaData.length > 0"
        />
      </border-panel>
    </div>
    <div class="map-container cover">
      <MapCharts
        :formatter="showLabel"
        :mapHeatData="heatMap"
        :qx="qx"
        @selectArea="(area) => (qx = area)"
      />
      <div style="position: absolute; width: 500px; left: 90px; top: 10px">
        <SearchBox :area.sync="qx" />
      </div>
    </div>
    <div style="z-index: 100">
      <border-panel
        height="469px"
        width="540px"
        :header-type="4"
        style="margin-bottom: 10px"
        title="区域分布"
        @click="openBasicModal1"
      >
        <RegionalDistribution @selectData="selectData" :qx="qx" />
      </border-panel>
      <border-panel
        height="469px"
        width="540px"
        :header-type="4"
        style="margin-bottom: 6px"
        title="告警处置"
      >
        <AlarmHandling :qx="qx" />
      </border-panel>
    </div>
    <basic-modal top="120px" ref="basicInfoModal" name="总体情况">
      <xfwlw :qx="qx" />
    </basic-modal>
    <basic-modal top="120px" ref="basicInfoModal1" name="智慧消防">
      <fxfbCont :qx="qx" />
    </basic-modal>
  </div>
</template>
<script>
import TotalityInfo from "./components/TotalityInfo.vue";
import IotVideo from "./components/IotVideo.vue";
import AlarmHandling from "./components/AlarmHandling.vue";
import RegionalDistribution from "./components/RegionalDistribution.vue";
import MapCharts from "../Home/components/MapCharts.vue";
import SearchBox from "../../components/SearchBox.vue";
import xfwlw from "./components/xfwlw.vue";
import fxfbCont from "./components/fxfbCont.vue";
import { getZtqk, getZtqkDwtj, getGqcz, getDeviceList } from "@/api/iot.js";
import {
		formatCityData
	} from '../../utils'

export default {
  name: "IotPage",
  components: {
    TotalityInfo,
    RegionalDistribution,
    IotVideo,
    AlarmHandling,
    MapCharts,
    SearchBox,
    xfwlw,
    fxfbCont,
  },
  data() {
    return {
      qx: "重庆市",
      ztqkData: null,
      ztqkDwtjData: null,
      caremaData: [],
      caremaList: [],
      heatMap: []
    };
  },
  watch: {
    qx() {
      // 获取总体情况
      const ztqkParam = {
        pageNum: 1,
        pageSize: 100,
        name: this.qx === "重庆市" ? "" : this.qx,
      };
      getZtqk(ztqkParam).then((res) => {
        this.ztqkData = res.data.rows[0];
      });

      // 检测点位统计
      const ztqkDwtjParam = {
        pageNum: 1,
        pageSize: 100,
        name: this.qx === "重庆市" ? "" : this.qx,
      };
      getZtqkDwtj(ztqkDwtjParam).then((res) => {
        this.ztqkDwtjData = res.data.rows[0];
      });
    },
  },
  methods: {
    selectData(val) {
      this.heatMap = formatCityData(val.map(item => ({
        name: item[0],
        value: item[2]
      })))
    },
    showLabel(params) {
      let res = params.name + "<br/>";
      res += `接入终端数<br/><span style="font-size: 24px;color:red;font-weight:bold;">${params.value}</span>个`;
      return res;
    },
    openBasicModal() {
      this.showModal("basicInfoModal");
    },
    openBasicModal1() {
      this.showModal("basicInfoModal1");
    },
    getRandomNo() {},
    async getList() {
      // 获取总体情况
      const ztqkParam = {
        pageNum: 1,
        pageSize: 100,
        name: this.qx === "重庆市" ? "" : this.qx,
      };
      getZtqk(ztqkParam).then((res) => {
        this.ztqkData = res.data.rows[0];
      });

      // 检测点位统计
      const ztqkDwtjParam = {
        pageNum: 1,
        pageSize: 100,
        name: this.qx === "重庆市" ? "" : this.qx,
      };
      getZtqkDwtj(ztqkDwtjParam).then((res) => {
        this.ztqkDwtjData = res.data.rows[0];
      });

      let caremaData = [];
      // 获取视频数据
      const deviceParam = {
        pageNum: 1,
        pageSize: 100,
        qx: this.qx === "重庆市" ? "" : this.qx,
        zt: "在线",
        sblx: "生命通道监测",
      };
      const res = await getDeviceList(deviceParam);
      caremaData = caremaData.concat(res.data.rows);

      const deviceParam2 = {
        pageNum: 1,
        pageSize: 100,
        qx: this.qx === "重庆市" ? "" : this.qx,
        zt: "在线",
        sblx: "消防控制室监控",
      };
      const res2 = await getDeviceList(deviceParam2);
      caremaData = caremaData.concat(res2.data.rows);
      console.log(caremaData);
      if (caremaData && caremaData.length > 0) {
        let randoms = [];
        //随机产生mix-max之间的一个数（避免首末概率不均，采用max+1，向下取整）
        function randomInteger(min, max) {
          let rand = min + Math.random() * (max + 1 - min);
          return Math.floor(rand);
        }
        while (true) {
          //定义一个变量保存是否存在
          var isExists = false;
          // 获取一个1–100之间的数
          var random = randomInteger(0, caremaData.length);
          // 判断当前随机数是否已经存在
          //通过randoms.length来确定要判断几次
          for (let i = 0; i < randoms.length; i++) {
            if (random === randoms[i]) {
              isExists = true;
              break;
            }
          }
          // 如果不存在，则添加进去
          if (!isExists) randoms.push(random);
          // 如果有10位随机数了，就跳出
          if (randoms.length === 10) break;
        }
        console.log(randoms);

        // 随机取10个
        const showCaremarData = caremaData.filter(
          (p, i) => randoms.indexOf(i) >= 0
        );
        this.caremaData = showCaremarData;
        this.caremaList = caremaData;
        console.log(this.caremaData);
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.map-container {
  position: fixed;
  z-index: 50;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  padding-top: 150px;
  align-items: center;
  width: 920px;
}
</style>
