<template>
  <div class="full-w-h" style="display: flex; flex-direction: column">
    <div class="custom-form">
      <label class="custom-form-label">事件类型： </label>
      <el-select
        highlight-current-row
        style="width: 120px; margin-right: 10px"
        @change="filterDataByType"
        v-model="value"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item"
          :label="
            $store.state.dicts.EventType.find((it) => {
              return it.code == item;
            })?.name || item
          "
          :value="item"
        >
        </el-option>
      </el-select>
      <label class="custom-form-label">时段选择： </label>
      <el-date-picker
        @change="getData"
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <el-table
      element-loading-spinner="el-icon-loading"
      element-loading-text="数据加载中..."
      element-loading-background="rgba(3, 11, 25, 0.8)"
      v-loading="loading"
      cell-class-name="custom-table-cell"
      header-row-class-name="custom-table-header"
      header-cell-class-name="custom-table-header-cell"
      @row-click="rowClick"
      :data="listDataCopy"
      ref="multipleTable"
      :row-class-name="getRowClassName"
      style="width: 100%; flex: 1"
      height="100%"
      @selection-change="handleSelectionChange"
    >
      <!--      <el-table-column-->
      <!--          show-overflow-tooltip-->
      <!--          align="center"-->
      <!--          label="事件编号">-->
      <!--        <template slot-scope="scope">{{ occupancyValue(scope.row.eventId) }}</template>-->
      <!--      </el-table-column>-->
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column width="100" align="center" label="事件编号" type="index">
      </el-table-column>
      <el-table-column
        prop="eventType"
        align="center"
        label="事件类型"
        show-overflow-tooltip
      >
        <template slot-scope="scope">{{
          translateDict(scope.row.eventType, "EventType")
        }}</template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        align="center"
        label="时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" label="位置" show-overflow-tooltip>
        <template slot-scope="scope">{{
          occupancyValue(scope.row.placeDesc)
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="备注" show-overflow-tooltip>
        <template slot-scope="scope">{{
          occupancyValue(scope.row.remark)
        }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Vue from "vue";
import * as mapTool from "@/utils/mapboxTools";
import { getHoloEventList } from "@/dao/optApi";
import { occupancyValue } from "@/utils";
import eventPopupVue from "../../mapPopup/eventPopup.vue";

const EventPopupVue = Vue.extend(eventPopupVue);
export default {
  name: "eventComp",
  props: ["crossData"],
  data() {
    return {
      options: [],
      value: "",
      dateTimeRange: [],
      tableData: [],
      listDataCopy: [],
      loading: true,
      multipleSelection: [],
    };
  },
  mounted() {
    if (time_config.homepage_eventTime) {
      this.dateTimeRange = [
        new Date(time_config.homepage_eventTime[0]),
        new Date(time_config.homepage_eventTime[1]),
      ];
    } else {
      this.dateTimeRange = [
        new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
        new Date(),
      ];
    }
    this.getData();
  },
  methods: {
    showEventPoint(events){
      let features = []
      for (let item of events) {
        if (item.lng && item.lat) {
          features.push(turf.point([item.lng, item.lat], item))
        }
      }
      // features.push(turf.point([map.getCenter().lng,map.getCenter().lat],{a:1}))
      let geo = turf.featureCollection(features)
      mapTool.addOrUpdateEventPoint1(window.map, geo)
      window.map.off('click', 'eventPoint1', this.eventPointClick)
      window.map.on('click', 'eventPoint1', this.eventPointClick)
    },
    eventPointClick(e) {
      mapTool.addPopupEvent(window.map, e.features[0].properties)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.showEventPoint(this.multipleSelection)
    },
    translateDict(value, type) {
      let result = value;
      let target = this.$store.state.dicts[type].find((dict) => {
        return dict.code == value;
      });
      if (target) {
        result = target.name;
      }
      return result;
    },
    occupancyValue,
    sliceTableAndRender(){
      let sliceSelection = this.listDataCopy.slice(0, 10);
      this.$nextTick(() => {
        for (let i = 0; i < this.listDataCopy.length; i++) {
          if (i <= 9) {
            this.$refs.multipleTable.toggleRowSelection(this.listDataCopy[i], true);
          }
        }
        this.showEventPoint(sliceSelection)
      });
    },
    filterDataByType() {
      this.listDataCopy = this.tableData.filter((item) => {
        return this.value === item.eventType;
      });
      this.sliceTableAndRender()
    },
    getData() {
      this.loading = true;
      getHoloEventList({
        crossId: this.crossData.id,
        end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
        start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
      }).then((res) => {
        this.loading = false;
        this.tableData = res.content;
        this.listDataCopy = JSON.parse(JSON.stringify(this.tableData));
        this.options = res.content.reduce((a, b) => {
          if (!a.includes(b.eventType)) {
            a.push(b.eventType);
          }
          return a;
        }, []);
        this.sliceTableAndRender()
      });
    },
    rowClick(row) {
      mapTool.addPopupEvent(window.map, row);
    },
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
        return "row-even";
      } else {
        return "row-odd";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.custom-form {
  height: 40px;
  display: flex;
  align-items: center;
}

::v-deep .el-range-input,
::v-deep .el-input__inner {
  background-color: transparent;
  color: white;
}

@import url("../../../../assets/less/elementTable.less");

::v-deep .el-input__inner {
  color: white;
}
</style>
