<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"
          @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" style="margin-top: 10px" />
        <Water ref="water" 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,
  getPointConfigByPlanid,
} 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: [],
      carInfo: {},
      siteRealTime: {},
      messages: [],
      measureLine: [],
    }
  },
  methods: {
    loadCarInfo() {
      getCarInfo({ siteId: this.siteId }).then((res) => {
        this.carInfo = res.data?.[0] || {};
      })
    },
    loadMeasureLine() {
      const params = {
        siteId: this.siteId,
        taskId: this.task.taskid,
      }
      listMeasureLine(params).then((res) => {
        const measureLine = res.data || [];
        this.measureLine = measureLine;
        this.$refs.flow.setOptions(measureLine)
        this.$nextTick(() => {
          this.$refs.simulation.setOptions()
        })
      })
    },
    loadTaskNotice() {
      getTaskNotice(this.siteId, this.task.taskid).then((res) => {
        this.messages = res.data.records || [];
      })
    },
    loadSiteRealTime() {
      getSiteRealTime(this.siteId).then((res) => {
        this.siteRealTime = res.data || {};
      })
    },
    loadWaterLevel() {
      const endTime = new Date()
      const startTime = new Date()
      startTime.setHours(0)
      startTime.setMinutes(0)
      startTime.setSeconds(0)
      startTime.setMilliseconds(0)
      const params = {
        startTime: this.parseTime(startTime),
        endTime: this.parseTime(endTime),
        siteId: this.siteId,
        type: 1,
        page: 1,
        size: 10000
      }
      listWaterLevel(params).then((res) => {
        this.$refs.water.setOptions(res.data?.records || [])
      })
    },
    loadPositions() {
      getPointConfigByPlanid(this.siteId, this.task.planid).then((res) => {
        this.positions = JSON.parse(res.data.positions || '[]');
      })
    }
  },
  mounted() {
    this.loadPositions();
    this.loadCarInfo();
    this.timer1 = setInterval(() => this.loadCarInfo(), 5e3)
    this.loadMeasureLine();
    this.timer2 = setInterval(() => this.loadMeasureLine(), 5e3)
    this.loadTaskNotice();
    this.timer3 = setInterval(() => this.loadTaskNotice(), 5e3)
    this.loadSiteRealTime();
    this.timer4 = setInterval(() => this.loadSiteRealTime(), 5e3)
    this.loadWaterLevel();
    this.timer5 = setInterval(() => this.loadWaterLevel(), 5e3)
  },
  beforeDestroy() {
    if (this.timer1) clearTimeout(this.timer1);
    if (this.timer2) clearTimeout(this.timer2);
    if (this.timer3) clearTimeout(this.timer3);
    if (this.timer4) clearTimeout(this.timer4);
    if (this.timer5) clearTimeout(this.timer5);
  }
}
</script>

<style scoped>

</style>
