<template>
  <div class="indexCon">
    <transition name="slide-fade">
      <div class="main">
        <warn-map :event="latestEvent" :cameraList="eventMapList" :changeJwdData="changeJwdData" @getList="changeType"
          @getAll="changeAct" ref="map"></warn-map>
      </div>
    </transition>
    <section class="leftWapper" ref="leftWap" id="leftWap">
      <!-- <div>
        <actual-event :key="index" @marckClick="marckClick" :eventList="eventList" :typeId="typeId"
          @eventStatus="eventStatus"></actual-event>
        <warn-detail :key="index1" :data="todayWarnDetails" :count="todayWarnCounts" :maxCount="todayMaxCount">
        </warn-detail>
        <handle-total-rate :typeId="typeId"></handle-total-rate>
      </div>
      <img src="@/assets/index/left_hide.png" class="leftHide" @click="hideLeft" /> -->
    </section>
    <section class="centerWrapper" ref="centerWrapper">
      <!-- <img src="@/assets/index/center_hide.png" class="centerHide" alt="" @click="hideCenter" />
      <div class="center-content">
        <warn-trend :data="thirtyGroupData"></warn-trend>
        <result-rate :typeId="typeId"></result-rate>
      </div> -->
    </section>
    <section class="rightWrapper" ref="rightWrapper">
      <img src="@/assets/index/right_hide.png" class="rightHide" @click="hideRight" />
      <event-list :typeId="typeId" @getJwd="changeJwd"></event-list>
    </section>
  </div>
</template>

<script>
// import WarnDetail from "@/components/sectionleft/WarnDetail";
// import ActualEvent from "@/components/sectionleft/ActualEvent";
// import HandleTotalRate from "@/components/sectionleft/HandleTotalRate";
// import WarnTrend from "@/components/sectioncenter/WarnTrend";
import WarnMap from "@/components/sectioncenter/WarnMap";
// import ResultRate from "@/components/sectioncenter/ResultRate";
import EventList from "@/components/sectionright/EventList";
import {
  getGroupData,
  getTodayData,
  // getCameraList,
  cameraByType,
  getEventsData,
  CameraShowOne,
  treeList,
} from "@/api/api";
import { compare } from "@/utils/utils";
// import { config } from "@/utils/request";

export default {
  name: "app",
  components: {
    // WarnDetail,
    // WarnTrend,
    WarnMap,
    // HandleTotalRate,
    // ResultRate,
    EventList,
    // ActualEvent,
  },
  computed: {
    todayMaxCount() {
      return this.todayWarnDetails[0] && this.todayWarnDetails[0].total;
    },
    servenMaxCount() {
      return this.sevenGroupData[0] && this.sevenGroupData[0].total;
    },
  },
  data() {
    return {
      // 所有的摄像头
      allList: [],
      todayWarnCounts: 0, // 当日警告事件总数
      todayWarnDetails: [], // 当日警告详情
      thirtyGroupData: [], // 30天全区城市眼告警指数走势
      sevenGroupData: [], // 七天区处置率
      sevenServiceData: {}, // 七天全区处置率/处置数统计
      latestEvent: {},
      cameraList: [], // 摄像头位置信息
      cameraList1: [], // 摄像头分类列表
      eventMapList: [], // 地图事件列表
      eventList: [], // 实时事件列表
      hideL: false, // 是否隐藏左边
      hideR: false, // 是否隐藏右边
      hideC: false, //是否隐藏中间
      index: 1,
      index1: 1,
      kindSelect: [
        "垃圾堆积",
        "出店",
        "游商",
        "机动车违停",
        "非机动车违停",
        "违规广告",
        "沿街晾晒",
        "人员聚集",

      ],
      operateStatusSelect: [
        {
          name: "待派发",
          backcolor: "rgba(244, 81, 108, 0.3)",
          color: "#F4516C",
        },
        {
          name: "待认领",
          backcolor: "rgba(252, 103, 44, 0.3)",
          color: "#FC672C",
        },
        {
          name: "待处理",
          backcolor: "rgba(255, 199, 43, 0.3)",
          color: "#FFC72B",
        },
        { name: "待审核", backcolor: "rgba(0,62,121, 0.3)", color: "#003E79" },
        {
          name: "已结束",
          backcolor: "rgba(64, 201, 198, 0.3)",
          color: "#40C9C6",
        },
      ],
      timer: null,
      allEventList: [],
      noThing: [],
      unLine: [],
      noRadio: [],
      types: [1, 2, 3, 4],
      typeId: 1,
      changeJwdData: [],
      bottomVisib: true
    };
  },
  created() {
    // if (JSON.parse(localStorage.getItem('accountInfo')).level == 2) {
    //   this.bottomVisib = false
    //   this.kindSelect = [
    //     "未出水",
    //     "绕行未清洗",
    //     "清洗时长不足",
    //     "黑车",
    //     "后盖异常",
    //   ]
    //   this.init();
    // } else {
    //   this.bottomVisib = true
    //   this.init();

    // }
    this.init();
    // this.initEventList({ currentPage: 1, size: 10, typeId: this.typeId }); // 获取事件列表
    // 轮询
    // this.timer = setInterval(() => {
    //   this.init();
    // }, 60 * 1000 * 5);
  },
  // beforeDestroy() {
  //   if (this.timer) {
  //     clearInterval(this.timer);
  //     this.timer = null;
  //   }
  // },
  methods: {
    init() {
      // this.initGroup(); // 获取7、30天数据
      // this.initToday(); // 获取当日告警数据
      // this.initCamera(); // 获取摄像头数据
      this.initCamera1(); //获取所有摄像头分类
      this.getAllList(); // 所有的摄像头和所有的事件列表
    },
    marckClick(value) {
      this.$refs.map.marckClick(value);
    },
    initGroup() {
      getGroupData({ typeId: this.typeId }).then((res) => {
        if (res.success) {
          this.thirtyGroupData = res.data.thirtyReportData;
          if (res.data.sevenReportData) {
            let arr = res.data.sevenReportData.sevenDisposeRate;
            this.sevenGroupData = this.handleData(arr);
            this.sevenServiceData = {
              total: res.data.sevenReportData.total || "",
              disposed: res.data.sevenReportData.disposed,
              waitingDispose: res.data.sevenReportData.waitingDispose,
              disposeRate: res.data.sevenReportData.disposeRate,
            };
          }
        }
      });
    },
    initToday() {
      if (this.typeId) {
        this.todayWarnCounts = 0,
        this.todayWarnDetails = [],
        ++this.index1;
      }
      getTodayData({ typeId: this.typeId }).then((res) => {
        // if (res.success) {
        res.data.items.forEach((val) => {
          if (val.total === null) {
            val.total = 0;
          }
        });
        this.todayWarnCounts = parseInt(res.data.total);
        this.todayWarnDetails = this.handleData(res.data.items);
        // }
      });
    },
    // 获取所有的摄像头列表
    initCamera() {
      let param = {};
      param.typeName = "";
      param.typeId = this.typeId;
      CameraShowOne(param).then((res) => {
        if (res.code === 200) {
          this.cameraList = res.data;
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    // 获取所有的摄像头分类列表
    initCamera1() {
      let param = {};
      param.typeName = "";
      param.typeId = this.typeId;
      treeList(param).then((res) => {
        console.log(res)
        this.cameraList1 = res.data;
      });
    },
    changeJwd(value) {
      this.changeJwdData = [value.lng, value.lat]
    },
    // 类型切换
    changeType(arr) {
      let c = [];
      let b = [];
      let a = [];
      let d = [];
      this.types = arr;

      if (arr.includes(1)) {
        c = this.allEventList.map((i) => {
          return {
            ...i,
            iconType: 1,
          };
        });
      }
      if (arr.includes(2)) {
        b = this.noThing.map((i) => {
          return {
            ...i,
            iconType: 2,
          };
        });
      }
      if (arr.includes(3)) {
        a = this.unLine.map((i) => {
          return {
            ...i,
            iconType: 3,
          };
        });
      }
      if (arr.includes(4)) {
        d = this.noRadio.map((i) => {
          return {
            ...i,
            iconType: 4,
          };
        });
      }
      c = [...c, ...b, ...d, ...a];
      this.eventMapList = c;
    },
    // 路河库长切换
    changeAct(act) {
      console.log(act);
      if (act == 4) {
        this.bottomVisib = false
      } else {
        this.bottomVisib = true
      }
      this.typeId = act;
      // this.initGroup(); // 获取7、30天数据
      // this.initToday(); // 获取当日告警数据
      // this.initCamera(); // 获取摄像头数据
      this.getAllList(); // 所有的摄像头和所有的事件列表
      this.initCamera1();
      let page = {
        cur: 0,
        currentPage: 1,
        size: 10,
        type: 1,
      };
      let type = 1;
      this.initEventList(page, type);
    },
    // 获取所有有事件的和所有摄像头列表
    getAllList() {
      let params = {};
      params.deviceClassifyIds = [];
      params.name = '';
      cameraByType(params).then((res) => {
        console.log(res)
        if (res.code == 200) {
          this.eventMapList = res.data.dataList;
        }
      });
      
    },
    initEventList(page, type) {
      console.log(page);
      let param = {};
      param.currentNo = type === 1 ? 1 : page.currentPage++;
      param.pageSize = page.size;
      param.operateStatus = page.cur ? page.cur : "";
      param.typeId = this.typeId;
      if (page.type && page.type == 1) {
        this.eventList = [];
        ++this.index;
      }
      console.log(this.index);
      getEventsData(param).then((res) => {
        // console.log("实施时间----", res);
        if (res.code === 200) {
          this.eventList = res.data.dataList;
          this.eventList.forEach((value) => {
            value.kindName = this.kindSelect[value.kind - 1];
            value.operateStatusName =
              this.operateStatusSelect[value.operateStatus - 1].name;
            value.operateBackColor =
              this.operateStatusSelect[value.operateStatus - 1].backcolor;
            value.operateColor =
              this.operateStatusSelect[value.operateStatus - 1].color;
            value.picture = `${value.picture}`;
          });
          // console.log("列表---", this.eventList);
        }
      });
    },
    eventStatus(page, type) {
      this.initEventList(page, type);
    },
    handleData(arr) {
      if (arr.length > 0) {
        const newArr = arr.map((item) => {
          switch (item.kind) {
            case 1:
              item.label = "垃圾堆积";
              break;
            case 2:
              item.label = "出店";
              break;
            case 3:
              item.label = "游商";
              break;
            case 4:
              item.label = "机动⻋违停";
              break;
            case 5:
              item.label = "⾮机动⻋违停";
              break;
            case 6:
              item.label = "违规⼴告";
              break;
            case 7:
              item.label = "沿街晾晒";
              break;
            case 8:
              item.label = "⼈员聚集";
              break;
            case 9:
              item.label = "未出水";
              break;
            case 10:
              item.label = "绕行未清洗";
              break;
            case 11:
              item.label = "清洗时长不足";
              break;
            case 12:
              item.label = "黑车";
              break;
            case 13:
              item.label = "后盖异常";
              break;
            case 14:
              item.label = "河上垃圾堆放";
              break;
            case 15:
              item.label = "游泳检测";
              break;
            case 16:
              item.label = "钓鱼检测";
              break;
            case 17:
              item.label = "漂浮物";
              break;
            case 18:
              item.label = "渔船";
              break;
            case 19:
              item.label = "垂钓者";
              break;
            default:
              item.label = '-';
              break;
          }
          item.total = parseInt(item.total);
          return item;
        });
        // console.log('1231321321231',newArr.sort(compare("total")));
        return newArr.sort(compare("total"));
      } else {
        // let a = [{total: 0}]
        return []
      }
    },
    // handleChange(item) {
    //   this.latestEvent = item;
    //   this.init();
    // },
    // handleChangeCenter(item) {
    //   this.latestEvent = item;
    // },
    hideLeft() {
      let isShow = (this.hideL = !this.hideL);
      let testDom = this.$refs.leftWap;
      testDom.style.left = isShow ? "-409px" : "0";
    },
    hideRight() {
      let isShow = (this.hideR = !this.hideR);
      let testDom = this.$refs.rightWrapper;
      testDom.style.right = isShow ? "-409px" : "0";
    },
    hideCenter() {
      let isShow = (this.hideC = !this.hideC);
      let testDom = this.$refs.centerWrapper;
      testDom.style.bottom = isShow ? "-340px" : "-79px";
    },
    // getMapData(content) {
    //   this.eventMapList = content;
    // },
  },
};
</script>

<style lang="stylus" scoped>
.indexCon {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;

  .main {
    width: 1980px;
    height: 1080px;
  }

  .leftWapper {
    position: absolute;
    top: 112px;
    left: 0;
    width: 419px;
    margin-left: 20px;
    display: flex;
    align-items: center;
    transition: 1s;

    .leftHide {
      width: 32px;
      height: 274px;
      margin-left: 1px;
      cursor: pointer;
    }
  }

  .centerWrapper {
    position: absolute;
    bottom: -79px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1078px;
    height: 248px;
    transition: 1s;

    .centerHide {
      width: 274px;
      height: 32px;
      display: block;
      margin: 0 auto 1px;
      cursor: pointer;
    }

    .center-content {
      display: flex;
      justify-content: space-around;
    }
  }

  .rightWrapper {
    position: absolute;
    right: 0;
    top: 112px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    transition: 1s;

    .rightHide {
      width: 32px;
      height: 247px;
      margin-right: 1px;
      cursor: pointer;
    }
  }
}

.slide-fade-enter-active {
  transition: all 0.6s ease-in;
}

.slide-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(1980px);
  opacity: 0;
}
</style>
