<template>
  <div>
    <div id="water-level">
      <el-date-picker
        v-model="timeRange.time1"
        type="datetime"
        placeholder="请选择"
        size="small"
        popper-class="date-popper"
        class="date-picker-custom1"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="handlePickTime"
      />
      <span class="time-select-divider">至</span>
      <el-date-picker
        v-model="timeRange.time2"
        type="datetime"
        placeholder="请选择"
        size="small"
        popper-class="date-popper"
        class="date-picker-custom1"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="handlePickTime"
      />
      <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="water_play">播放</span>
      <span class="play-btn" v-show="playState===1||playState===2" @click="water_stop">结束</span>
      <span class="play-btn" v-show="playState===1" @click="water_pause">暂停</span>
      <span class="play-btn" v-show="playState===2" @click="water_resume">继续</span>
      <span class="play-btn" :class="{'btn-disabled': playState===-1}" @click="handleShowChart">图表</span>
    </div>
    <div id="water-level-chart" v-show="chartShow">
      <span class="dialog-close" @click="chartShow = false"></span>
      <div class="wlc-header">
        <span class="title-dialog">潮位高度</span>
        <div>
          <span class="wlch-label">当前最高：</span><span class="wlch-value1">{{ chartSta.currentMax }}</span>
        </div>
        <!-- <div>
          <span class="wlch-label">全天最高：</span><span class="wlch-value2">{{ chartSta.dayMax }}</span>
          <span class="wlch-label">最低：</span><span class="wlch-value2">{{ chartSta.dayMin }}</span>
        </div> -->
      </div>
      <div id="wlc-chart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WaterLevel'
}
</script>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import bus from '@/utils/bus'
import { useDateFormat } from '@vueuse/core'
import { ElDatePicker } from 'element-plus'
import 'element-plus/es/components/date-picker/style/css'
import {
  ueCallQueryWater, ueCallPlayWater, ueCallStopWater, ueCallContinueWater, ueCallResetWater, ueCallSetWaterSpeed, ueCallFlyToSW
} from '@/utils/UIInteractions'
import { GetTideHeight } from '@/apis/other'
import { setWaterLevel } from '@/echarts/options'

onMounted(() => {
  ueCallFlyToSW()
  timeRange.time1 = useDateFormat((new Date).getTime() - 24 * 60 * 60 * 1000, 'YYYY-MM-DD HH:mm:00').value
  timeRange.time2 = useDateFormat((new Date).getTime(), 'YYYY-MM-DD HH:mm:00').value
  handlePickTime()
})

onBeforeUnmount(() => {
  ueCallResetWater()
})

const timeRange = reactive({
  time1: '',
  time2: ''
})

const playState = ref(0)    /* 0--未开始/已结束； 1--播放中； 2--已暂停; -1--禁用状态 */

function handlePickTime() {
  if(timeRange.time1&&timeRange.time2) {
    /* if(timeRange.time1.slice(0,10) === timeRange.time2.slice(0,10)) {
      GetWaterLevel(timeRange.time1.slice(0,10)+' 00:00:00', timeRange.time1.slice(0,10)+' 23:59:59').then(res => {
        if(res.data?.Rows.length>0) {
          let dayMax = 0
          let dayMin = number.MAX_SAFE_INTEGER
          let dayMaxTime
          let dayMinTime
          res.data.Rows.forEach(row => {
            if(+row.b1 > dayMax) {
              dayMax = row.b1
              dayMaxTime = row.wtime.slice(11,16)
            }
            if(+row.b1 < dayMin) {
              dayMin = row.b1
              dayMinTime = row.wtime.slice(11,16)
            }
          })
          chartSta.dayMax = dayMax + 'cm (' + dayMaxTime + ')'
          chartSta.dayMin = dayMin + 'cm (' + dayMinTime + ')'
        }else {
          chartSta.dayMax = '-'
          chartSta.dayMin = '-'
        }
      })
    } */
    GetTideHeight(timeRange.time1, timeRange.time2).then(res => {
      chartData.value = []
      if(res.data?.Rows.length>0) {
        playState.value = 0
        let currentMax = 0
        res.data.Rows.forEach(row => {
          if(+row.tide > currentMax) {
            currentMax = row.tide
          }
          chartData.value.push({
            time: row.time+ ':00',
            value: row.tide
          })
        })
        chartSta.currentMax = currentMax + 'cm'
      } else {
        chartSta.currentMax = '0cm'
        playState.value = -1
      }
    })
  }
}

const chartShow = ref(false)

const chartData = reactive({value: []})

function handleShowChart() {
  if(chartShow.value===false) {
    if(playState.value===-1) { return }
    chartShow.value = true
    nextTick(() => {
      setWaterLevel(document.getElementById('wlc-chart'), chartData.value)
    })
  } else {
    chartShow.value = false
  }
}

const chartSta = reactive({
  currentMax: '146cm',
  dayMax: '-',
  dayMin: '-'
})

bus.on('ueRec_WaterFinish', () => {
  playState.value = 0
  ueCallResetWater()
})

bus.on('ueRec_QueryWaterFinish', () => {
  playState.value = 0
})

function water_play() {
  if(playState.value===-1) { return }
  ueCallQueryWater(timeRange.time1, timeRange.time2)
  playState.value = -1
  let timer = setInterval(() => {
    if(playState.value===0) {
      ueCallPlayWater()
      playState.value = 1
      clearInterval(timer)
    }
  }, 500);
}
function water_stop() {
  ueCallResetWater()
  playState.value = 0
}
function water_pause() {
  ueCallStopWater()
  playState.value = 2
}
function water_resume() {
  ueCallContinueWater()
  playState.value = 1
}
</script>

<style lang="scss" scoped>
#water-level {
  position: absolute;
  height: 40px;
  bottom: -37px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;

  .time-select-divider {
    margin: 0 10px;
    font-size: 16px;
  }

  .play-btn {
    width: 100px;
    height: 40px;
    margin-left: 10px;
    background: url('../../../assets/imgs/header/bg-sw-btn.png');
    background-size: 100% 100%;
    cursor: pointer;
    line-height: 40px;
    font-size: 18px;
    font-family: YSBTH;
    color: #a9c1d8;
  }

  :deep(.date-picker-custom1) {
    height: 40px;
    .el-input__wrapper {
      box-sizing: border-box;
      width: 209px;
      height: 40px;
      padding-left: 20px;
      border: none;
      background: url('../../../assets/imgs/header/bg-cg-timepicker.png');
      background-size: 100% 100%;
    }
    .el-input__inner {
      font-size: 16px;
      color: #d9d9d9;
      font-weight: 700;
    }
  }
  
}

#water-level-chart {
  position: absolute;
  width: 819px;
  height: 374px;
  bottom: -420px;
  left: 50%;
  transform: translateX(-50%);
  background: url('../../../assets/imgs/waterlevel-bg.png') no-repeat;
  background-size: contain;

  .dialog-close {
    top: 12px;
    right: 12px;
  }
  .wlc-header {
    display: flex;
    align-items: flex-start;
    margin: 20px 20px 10px;
    &>div:nth-child(2) {
      margin: 0 10px 0 30px;
    }
    .wlch-label {
      font-size: 14px;
      line-height: 24px;
    }
    .wlch-value1, .wlch-value2 {
      font-size: 14px;
      line-height: 24px;
      font-weight: bold;
      margin-right: 10px;
    }
    .wlch-value1 {
      color: #fefe1f;
    }
    .wlch-value2 {
      color: #4dd1fe;
    }
  }

  #wlc-chart {
    box-sizing: border-box;
    width: 100%;
    height: 300px;
  }
}

</style>