<template>
  <div class="hum-page-container">
    <el-row :gutter="10">
      <el-col :span="18">
        <Simulation
          ref="simulation"
          :siteId="siteId"
          :positions="positions"
          :measureLine="measureLine"
          :siteRealTime="siteRealTime"
          :task="task"
          :waterlevel="waterlevel"
          :location="location"
          :isplay="isplay"
          @play="play"
          @stop="stop"
          @refresh="$emit('refresh')" />
        <el-row :gutter="20" style="margin-top: 10px">
          <el-col :span="8">
            <Site :siteRealTime="siteRealTime" />
          </el-col>
          <el-col :span="8">
            <Car :carInfo="carInfo" />
          </el-col>
          <el-col :span="8">
            <Message :messages="messages" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <Movie />
        <Flow ref="flow" :positions="positions" :measureLine="measureLine" style="margin-top: 10px" />
        <Water ref="water" :waterlevelList="waterlevelList" style="margin-top: 10px" />
      </el-col>
    </el-row>
    <Report :measureLine="measureLine" style="margin-top: 10px" />
  </div>
</template>

<script>
import Simulation from './simulation'
import Site from './site'
import Car from './car'
import Message from './message'
import Movie from './movie'
import Flow from './flow'
import Water from './water'
import Report from './report'
import {
  getCarInfo,
  getSiteRealTime,
  getTaskNotice,
  listMeasureLine,
  listWaterLevel,
  getCarLocation,
} from "@/api/analysis/achievement";

export default {
  components: {
    Simulation,
    Site,
    Car,
    Message,
    Movie,
    Flow,
    Water,
    Report,
  },
  props: {
    task: Object,
  },
  data() {
    return {
      siteId: this.$route.params.siteId,
      positions: [],
      siteRealTime: {},
      carInfo: {},
      initcarInfo: {},
      carInfoHistory: [],
      messages: [],
      messagesHistory: [],
      measureLine: [],
      measureLineHistory: [],
      location: Number.MIN_VALUE,
      initlocation: Number.MIN_VALUE,
      locationHistory: [],
      waterlevel: 0,
      initwaterlevel: 0,
      waterlevelList: [],
      waterLevelHistory: [],
      isplay: false,
    }
  },
  methods: {
    loadCarInfo() {
      getCarInfo({
        siteId: this.siteId,
        startTime: this.task.createTime,
        endTime: this.task.endtime,
      }).then((res) => {
        const history = res.data || [];
        if (history.length > 0) {
          this.carInfoHistory = history;
          this.carInfo = history[history.length - 1];
          this.initcarInfo = history[history.length - 1];
        }
      })
    },
    loadMeasureLine() {
      const params = {
        siteId: this.siteId,
        taskId: this.task.taskid,
      }
      listMeasureLine(params).then((res) => {
        const measureLine = res.data || [];
        this.measureLine = measureLine;
        this.measureLineHistory = measureLine;
        this.positions = measureLine.map(({ pointX }) => ({ x: pointX }));
      })
    },
    loadTaskNotice() {
      getTaskNotice(this.siteId, this.task.taskid).then((res) => {
        const messagesHistory = res.data.records || [];
        this.messages = messagesHistory;
        this.messagesHistory = messagesHistory;
      })
    },
    loadSiteRealTime() {
      getSiteRealTime(this.siteId).then((res) => {
        this.siteRealTime = res.data || {};
      })
    },
    loadWaterLevel() {
      const params = {
        startTime: this.task.starttime,
        endTime: this.task.endtime,
        siteId: this.siteId,
        type: 1,
        page: 1,
        size: 10000
      }
      listWaterLevel(params).then((res) => {
        const waterLevelHistory = res.data?.records || [];
        if (waterLevelHistory.length > 0) {
          this.waterlevel = waterLevelHistory[waterLevelHistory.length - 1].avgWaterlevel;
          this.waterlevelList = waterLevelHistory;
          this.waterLevelHistory = waterLevelHistory;
        } else {
          this.waterlevel = this.task.waterlevel;
        }
        this.initwaterlevel = this.waterlevel;
      })
    },
    loadCarLocation() {
      getCarLocation({ siteId: this.siteId, startTime: this.task.starttime, endTime: this.task.endtime }).then((res) => {
        const locationHistory = res.data || [];
        if (locationHistory.length > 0) {
          this.locationHistory = locationHistory;
        }
      })
    },
    play() {
      this.isplay = true;
      const dis = Date.now() - new Date(this.task.starttime);

      this.timer = setInterval(() => {
        const time = this.parseTime(new Date(Date.now() - dis))

        if (time > this.task.endtime) {
          this.stop();
          return;
        }

        this.messages = this.messagesHistory.filter(({ createTime }) => createTime < time);
        this.measureLine = this.measureLineHistory.filter(({ createTime }) => createTime < time);
        // this.waterlevelList = this.waterLevelHistory.filter(({ createTime }) => createTime < time);

        let location = {};
        this.locationHistory.forEach((item) => {
          if (item.createTime > time) {
            return
          }
          if (!location.createTime || item.createTime > location.createTime) {
            location = { ...item }
          }
        })
        if (location.position) {
          this.location = location.position;
        }

        let carInfo = this.carInfoHistory[0];
        this.carInfoHistory.forEach((item) => {
          if (item.createTime > time) {
            return
          }
          if (!carInfo.createTime || item.createTime > carInfo.createTime) {
            carInfo = { ...item };
          }
        })
        this.carInfo = carInfo;

        if (this.waterLevelHistory.length > 0) {
          let waterlevel = this.waterLevelHistory[0];
          this.waterLevelHistory.forEach((item) => {
            if (item.createTime > time) {
              return
            }
            if (!waterlevel.createTime || item.createTime > waterlevel.createTime) {
              waterlevel = { ...item };
            }
          })
          this.waterlevel = waterlevel.avgWaterlevel;
        }
      }, 500)
    },
    stop() {
      this.isplay = false;
      this.messages = [...this.messagesHistory];
      this.measureLine = [...this.measureLineHistory];
      this.waterlevelList = [...this.waterLevelHistory];
      this.location = this.initlocation;
      this.carInfo = this.initcarInfo;
      this.waterlevel = this.initwaterlevel;
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
  },
  mounted() {
    this.loadCarInfo();
    this.loadMeasureLine();
    this.loadTaskNotice();
    this.loadSiteRealTime();
    this.loadWaterLevel();
    this.loadCarLocation();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped>

</style>
