<template>
  <div class="full-w-h eventDataContainer">
    <div style="margin-bottom: 10px; margin-top: 10px" class="custom-form">
      <label class="custom-form-label">时段选择： </label>
      <el-date-picker
        style="margin-right: 10px"
        :clearable="false"
        @change="dateChange"
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <label class="custom-form-label">事件类型： </label>
      <el-select
        class="custom-select"
        style="margin-right: 10px"
        v-model="eventTypeValue"
        placeholder="请选择"
      >
        <el-option
          v-for="item in eventTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        @click="exportLaneExcel()"
        size="mini"
        type="primary"
        class="custom-export-button"
        >导出</el-button
      >
    </div>
    <div class="event-type">
      <div class="table-title">
        <div></div>
        <div>停车事件</div>
      </div>
      <div class="custom-table-container">
        <el-table
          ref="table"
          height="100%"
          header-row-class-name="custom-table-header"
          header-cell-class-name="custom-table-header-cell"
          :data="stopTableData"
          :row-class-name="getRowClassName"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            label="序号"
            prop="index"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="停车类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <!-- {{ occupancyValue(scope.row.xxx) }} -->
              异常停车
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="开始时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="结束时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="持续时长"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.duration) }}
            </template>
          </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.xxx) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="车辆颜色"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.xxx) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="车牌类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.xxx) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="车牌号码"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.plateNo) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <a>回放</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="event-type">
      <div class="table-title">
        <div></div>
        <div>溢出事件</div>
      </div>
      <div class="custom-table-container">
        <el-table
          ref="table"
          height="100%"
          header-row-class-name="custom-table-header"
          header-cell-class-name="custom-table-header-cell"
          :data="overTableData"
          :row-class-name="getRowClassName"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="index"
            label="序号"
            show-overflow-tooltip
          >
            <!-- <template slot-scope="scope">
              {{ occupancyValue(scope.row.xxx) }}
            </template> -->
          </el-table-column>
          <el-table-column
            align="center"
            label="开始时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="结束时间"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="持续时长"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.duration) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="位置" show-overflow-tooltip>
            <template slot-scope="scope">
              {{
                occupancyValue(
                  `${scope.row.dirName && scope.row.dirName + "进口"}`
                )
              }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="溢出区编号"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.dir) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="溢出区车辆数"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.overflowNums) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="平均速度"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.speed) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="空间占有率(%)"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ occupancyValue(scope.row.vehicleNumsRatio) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <a>回放</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getHoloEventList,
  initLaneSort,
  getLaneSnapshotIndex,
  overFlowEvent,
} from "@/dao/optApi";
import { occupancyValue } from "../../../utils";

export default {
  name: "eventData",
  props: ["crossData"],
  data() {
    return {
      dateTimeRange: [],
      eventTypeValue: "",
      eventTypeOptions: [
        { value: "1", label: "停车事件" },
        { value: "2", label: "溢出事件" },
      ],
      stopTableData: [],
      overTableData: [],
    };
  },
  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() - 1000 * 60 * 60)),
        new Date(),
      ];
    }
    // if (this.crossData.crossId) {
    if (this.crossData.id) {
      this.getData();
    }
  },
  methods: {
    dateChange() {
      if (
        new Date(this.dateTimeRange[1]).getTime() -
          new Date(this.dateTimeRange[0]).getTime() >
        30 * 24 * 60 * 60 * 1000
      ) {
        this.$message("选择时段需小于30天");
        return;
      }
      this.getData();
    },
    exportLaneExcel() {
      if (!this.eventTypeValue) {
        this.$message("请选择要导出数据的事件类型");
        return;
      }
      // excel导出下载
      // exportLane({
      //   "crossId": this.crossData.crossId,
      //   "end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
      //   "start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-')
      //   // "end": '2024-02-01 00:00:00',
      //   // "start": '2024-02-01 10:00:00',
      // }).then(response => {
      //   let blob = new Blob([response.data], {type: "application/x-xls"});
      //   let a = document.createElement("a");
      //   a.href = URL.createObjectURL(blob);
      //   let fileName = response.headers['content-disposition'].split('=')[1]
      //   fileName = decodeURI(fileName)
      //   // fileName = fileName+'.xls'
      //   a.download = fileName; //文件名称
      //   a.style.display = "none";
      //   document.body.appendChild(a);
      //   a.click();
      //   a.remove();
      // })
    },
    occupancyValue,
    getData() {
      // 停车事件
      getHoloEventList({
        // crossId: this.crossData.crossId,
        crossId: this.crossData.id,
        end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
        start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
        types: "401,",
      }).then((res) => {
        console.log("event list...", res);
        this.stopTableData = res.content.map((item, index) => {
          item.index = index + 1;
          return item;
        });
      });
      // 溢出事件
      // getLaneSnapshotIndex({
      //   crossId: this.crossData.crossId,
      //   end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
      //   start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
      //   // end: '2024-06-24 18:00:00',
      //   // start: '2024-06-24 00:00:00',
      //   overFlow: true,
      // }).then((res) => {
      //   console.log("溢出 （复用快照", res);
      //   this.overTableData = res.content.map((item, index) => {
      //     item.index = index + 1;
      //     return item;
      //   });
      // });
      overFlowEvent({
        // crossId: this.crossData.crossId,
        crossId: this.crossData.id,
        end: this.dateTimeRange[1].toLocaleString().replaceAll("/", "-"),
        overFlow: true,
        pageNum: 0,
        start: this.dateTimeRange[0].toLocaleString().replaceAll("/", "-"),
      }).then((res) => {
        console.log("溢出事件", res);
        this.overTableData = res.content.map((item, index) => {
          item.index = index + 1;
          return item;
        });
      });
    },
    getRowClassName(e) {
      if (e.rowIndex % 2 !== 0) {
        return "row-odd";
      } else {
        return "row-even";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.custom-form {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  .custom-export-button {
    position: absolute;
    right: 0;
    border-radius: 0;
    background-color: #294372;
    color: white;
    letter-spacing: 1px;
    border: none;
    width: 78px;
    font-size: 14px;
    height: 28px;
  }
  .custom-export-button:hover {
    background-color: #355287;
  }
}

::v-deep .el-input__inner {
  border: 1px solid rgba(90, 144, 238, 0.34);
  color: white;
}

.custom-form-label {
  font-size: 14px;
}

.event-type {
  height: calc(50% - 30px);
  display: flex;
  flex-direction: column;

  .table-title {
    height: 32px;
    margin-bottom: 10px;
    display: flex;

    div:first-child {
      background-color: rgba(0, 153, 255, 1);
      width: 7px;
      height: 100%;
      margin-right: 5px;
    }

    div:last-child {
      width: 236px;
      padding-left: 8px;
      height: 100%;
      background: linear-gradient(
        270deg,
        rgba(33, 209, 255, 0) 0%,
        rgba(0, 153, 255, 0.5) 100%
      );
      display: flex;
      align-items: center;
    }
  }
  .custom-table-container {
    flex: 1;
    margin-bottom: 8px;
  }
}
.eventDataContainer {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
</style>
