<template>
  <div class="his-table">
    <div class="choose-time">
      <div class="loggs">
        <span>积水时间：</span>
        <el-select v-model="logTime" placeholder="" style="width: 150px;" popper-class="popperArea" @change="changeTime">
          <el-option v-for="(item, index) in times" :key="index" :label="item.BEGINDATE" :value="item.DATERANGE" />
        </el-select>
      </div>
      <div class="history-date-picker">
        开始：
        <el-date-picker v-model="startDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间" popper-class="popper-date" class="datettimes" @change="startChange" />
      </div>
      <div class="history-date-picker">
        结束：
        <el-date-picker v-model="endDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间" popper-class="popper-date" class="datettimes" @change="endChange" />
      </div>
      <div class="searchBox"><el-button type="primary" @click="search">查询</el-button></div>
    </div>
    <div v-loading="loading" class="hisChartBox" element-loading-background="rgba(17,53,67,1)">
      <div v-if="historyDepthData.length !== 0" ref="loggHourChart" style="width: 100%; height: 100%;" />
      <Empty v-else />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { hstponding, zstjxq, getylhourdata } from '@/api/api-whCloud'
import getEcharts from '../../../../../utils/echarts'
import Empty from '@/views/map/components/all/Empty'

export default {
  components: { Empty },
  props: {
    baseData: {
      type: Object,
      default: () => {}
    },
    rain: {
      type: String,
      default: () => ''
    }
  },
  data() {
    const startDate = moment().format('YYYY-MM-DD')
    const endDate = moment().add(1, 'd').format('YYYY-MM-DD')
    return {
      flag: 0,
      startDate,
      endDate,
      moment,
      tableLoading: false,
      historyDepthData: [],
      currentPage: 1,
      pageSize: 2,
      total: 0,
      myChart: null,
      loading: false,
      logTime: '',
      times: [],
      flagIndex: 0,
      hisRainData: [],
      jsOption: null,
      jsxdata: [],
      jsydata: [],
      ylxdata: [],
      ylydata: []
    }
  },
  watch: {
    baseData: {
      immediate: true,
      handler(data) {
        if (data) {
          this.getTime()
          this.gethstponding(true)
        }
      }
    },
    rain: {
      immediate: true,
      handler(data) {
        if (data) {
          this.flag++
          this.initRain(data)
        } else {
          this.flag = 0
          this.setLineOption()
        }
      }
    }
  },
  created() {
    // this.gethstponding(true)
  },
  destroyed() {},
  methods: {
    // 获取历史积水数据
    async gethstponding(flag) {
      const { stcd, tempType = '', begindate = '', enddate = '' } = this.baseData
      if (flag) this.currentPage = 1
      if (tempType && tempType === 'zstj') {
        // this.startDate = moment(begindate).format('YYYY-MM-DD')
        // this.endDate = moment(enddate).format('YYYY-MM-DD')
        if (this.flagIndex === 0) {
          this.startDate = moment(begindate).format('YYYY-MM-DD')
          this.endDate = moment(enddate).format('YYYY-MM-DD')
          this.flagIndex++
        }
      }
      this.loading = true
      if (stcd) {
        // const { data: { result }} = await hstponDingPage({
        const { data: { result }} = await hstponding({
          // currentPage: 1,
          // pageSize: 100000,
          searchFilters: {
            begin: this.startDate,
            endDate: this.endDate,
            stcd: stcd
            // limit: '100000'
          }
        })
        const { data } = JSON.parse(result)
        this.historyDepthData = data
        this.$nextTick(() => {
          this.setLineOption()
        })
        this.loading = false
      }
    },
    // 加载对应雨量数据修改积水数据展示
    async initRain(val) {
      let newendtime = this.endDate
      if (this.startDate === this.endDate) {
        newendtime = moment(this.endDate).add(1, 'd').format('YYYY-MM-DD')
      }
      const { data: { result }} = await getylhourdata({
        searchFilters: {
          stcd: val,
          begin: this.startDate,
          end: newendtime
        }
      })
      const { data: hourData } = JSON.parse(result)
      this.hisRainData = hourData.reverse()
      const newJsxdata = []
      const newJsydata = []
      this.ylxdata = []
      this.ylydata = []
      this.hisRainData.forEach(el => {
        const hour = `${moment(el.TM).format('MM')}-${moment(el.TM).format('DD')} ${moment(el.TM).format('HH')}时`
        this.ylxdata.push(hour)
        this.ylydata.push(el.DRP)
        const obj = this.historyDepthData.find(item => item.TM === el.TM)
        if (obj) {
          const jshour = `${moment(obj.TM).format('MM')}-${moment(obj.TM).format('DD')} ${moment(obj.TM).format('HH')}时`
          newJsxdata.push(jshour)
          newJsydata.push(obj.Z)
        } else {
          newJsxdata.push(hour)
          newJsydata.push(null)
        }
      })
      const rainSeries = {
        type: 'bar',
        name: '降雨(mm)',
        barMaxWidth: 20,
        barMinHeight: 10,
        yAxisIndex: 1,
        xAxisIndex: 1,
        label: {
          position: 'top',
          show: false,
          formatter: function(value, index) {
            return value.data
          }
        },
        barGap: '30%',
        data: this.ylydata,
        smooth: true
      }
      const yRian = {
        type: 'value',
        name: '降雨(mm)',
        // position: 'left',
        nameTextStyle: {
          color: '#fff',
          fontSize: 13
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#fff',
          fontSize: '14'
        }
      }
      const xRain = {
        type: 'category',
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          show: false,
          interval: Math.floor(this.ylydata.length / 10),
          color: '#fff',
          fontSize: '14',
          margin: 30,
          formatter: function(value) {
            var ret = '' // 拼接加\n返回的类目项
            var maxLength = 5 // 每项显示文字个数
            var valLength = value.length // X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
          }
        },
        data: this.ylxdata
      }
      if (this.flag > 1) {
        this.$set(this.jsOption.xAxis[1], 'data', this.ylxdata)
        this.$set(this.jsOption.series[1], 'data', this.ylydata)
      } else {
        this.jsOption.xAxis.push(xRain)
        this.jsOption.yAxis.push(yRian)
        this.jsOption.series.push(rainSeries)
      }
      this.$set(this.jsOption.xAxis[0].axisLabel, 'interval', 1)
      this.$set(this.jsOption.xAxis[0], 'data', newJsxdata)
      this.$set(this.jsOption.series[0], 'data', newJsydata)
      this.myChart.setOption(this.jsOption, true)
      this.myChart.resize()
    },
    // 积水原始数据加载线图
    async setLineOption() {
      const data = this.historyDepthData
      if (data.length === 0) return
      const Echarts = await getEcharts()
      this.myChart = Echarts.init(this.$refs.loggHourChart, 'home-stat')
      this.jsxdata = []
      this.jsydata = []
      data.forEach(val => {
        // const hour = `${moment(val.TM).format('MM')}-${moment(val.TM).format('DD')} ${moment(val.TM).format('HH')}时`
        const hour = moment(val.TM).format('MM-DDHH:mm')
        this.jsxdata.push(hour)
        this.jsydata.push(val.Z)
      })
      console.log(this.jsydata)
      let max = 0
      if (this.jsydata.length > 0) {
        const maxValue = Math.max(...this.jsydata)
        if (maxValue < 0.15) {
          max = maxValue
        } else {
          const temp = maxValue * 1.2
          max = parseFloat(temp.toFixed(2))
        }
        
      }
      this.jsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        textStyle: {
          fontSize: 20
        },
        grid: {
          top: 30,
          left: 10,
          right: 30,
          bottom: 10,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          splitLine: {
            show: false
          },
          axisLabel: {
            interval: Math.floor(this.jsydata.length / 10),
            color: '#fff',
            fontSize: '14',
            // fontWeigh: '600',
            margin: 30,
            formatter: function(value) {
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 5 // 每项显示文字个数
              var valLength = value.length // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于5,
                for (var i = 0; i < rowN; i++) {
                  var temp = '' // 每次截取的字符串
                  var start = i * maxLength // 开始截取的位置
                  var end = start + maxLength // 结束截取的位置
                  // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            }
          },
          data: this.jsxdata
        }],
        yAxis: [{
          type: 'value',
          name: '水深(m)',
          max: max,
          nameTextStyle: {
            color: '#fff',
            fontSize: 13
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: '14'
            // fontWeigh: '600',
            // lineHeight: '17'
          }
        }],
        series: [
          {
            name: '水深(m)',
            data: this.jsydata,
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            barWidth: 20,
            barMinHeight: 10,
            connectNulls: true,
            label: {
              show: false,
              position: 'bottom'
            },
            lineStyle: {
              color: '#199EFC'
            },
            itemStyle: {
              color: '#fff',
              borderType: 'solid',
              shadowColor: 'rgba(255,255,255,0.8)',
              shadowBlur: 8
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#3872C6' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#245683' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            smooth: true
          }
        ]
      }
      console.log(max)
      this.myChart.setOption(this.jsOption, true)
      this.myChart.resize()
    },
    search() {
      this.gethstponding(true)
      setTimeout(() => {
        if (this.rain) {
          this.initRain(this.rain)
        }
      }, 500)
    },
    startChange() {
      this.logTime = ''
    },
    endChange() { this.logTime = '' },
    changeTime(val) {
      this.startDate = moment(val[0]).format('YYYY-MM-DD')
      this.endDate = moment(val[1]).format('YYYY-MM-DD')
      this.gethstponding(true)
      setTimeout(() => {
        if (this.rain) {
          this.initRain(this.rain)
        }
      }, 500)
    },
    // 获取积水时间
    async getTime() {
      const { stcd } = this.baseData
      const begin = '2023-03-01 09:00:00'
      const end = '2023-12-31 09:00:00'
      // const begin = moment().startOf('year').format('YYYY-MM-DD HH:mm:ss')
      // const end = moment().format('YYYY-MM-DD HH:mm:ss')
      const param = {
        searchFilters: {
          begindate: begin,
          enddate: end,
          beginz: 0.15,
          endz: 10,
          stcd: stcd
        }
      }
      const { data } = await zstjxq(param)
      const arrs = this.getHourscz(data)
      this.times = arrs
    },
    getHourscz(arr) {
      if (!arr.length) return []
      const datas = []
      let date = this.$moment(arr[0].TM).format('YYYY-MM-DD HH:00:00')
      let hours = 0
      let index = 0
      let z = 0
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].Z > z) {
          z = arr[i].Z
        }
        if (this.$moment(arr[i].TM).format('YYYY-MM-DD HH:00:00') === this.$moment(date).format('YYYY-MM-DD HH:00:00') || this.$moment(arr[i].TM).format('YYYY-MM-DD HH:00:00') === this.$moment(date).add(1, 'h').format('YYYY-MM-DD HH:00:00')) {
          if (i !== arr.length - 1) {
            if (this.$moment(arr[i + 1].TM).format('YYYY-MM-DD HH:00:00') !== this.$moment(date).format('YYYY-MM-DD HH:00:00')) {
              date = this.$moment(arr[i].TM).format('YYYY-MM-DD HH:00:00')
            }
          }
        } else {
          hours = this.$moment(arr[i - 1].TM).diff(arr[index].TM, 'minute')
          if (hours >= 30) {
            const begin = arr[index].TM
            const end = arr[i - 1].TM
            const beginLable = moment(begin).format('YYYY年MM月DD日')
            datas.push({ STCD: arr[0].STCD, STNM: arr[0].STNM, DATERANGE: [begin, end], BEGINDATE: beginLable, HOURS: hours, Z: z })
          }
          z = 0
          date = this.$moment(arr[i].TM).format('YYYY-MM-DD HH:00:00')
          index = i
        }
      }
      const da = this.$moment(arr[arr.length - 1].TM).diff(arr[index].TM, 'minute')
      if (z === 0) {
        z = arr[arr.length - 1].Z
      }
      if (da >= 30) {
        const begin = arr[index].TM
        const end = arr[arr.length - 1].TM
        const beginLable = moment(begin).format('YYYY年MM月DD日')
        datas.push({ STCD: arr[0].STCD, STNM: arr[0].STNM, DATERANGE: [begin, end], BEGINDATE: beginLable, HOURS: da, Z: z })
      }
      return datas
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../common/css/allElement';
.his-table {
  width: 100%;
  height: 100%;
  .choose-time {
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    .logs {
      font-size: 18px;
    }
    .history-date-picker {
      display: inline-block;
      width: 220px;
      margin-left: 10px;
      font-size: 18px;
      .datettimes {
        border: 1px solid #1d6670 !important;
        width: 65%;
      }
      .datettimes /deep/ input {
        border: none !important;
        color: #fff;
        font-size: 18px;
        background: transparent;
        cursor: pointer;
      }
    }
    .searchBox {
      display: inline-block;
      & /deep/ .el-button--primary {
        color: #fff;
        background-color: #0a7e89;
        border-color: #0a7e89;
      }
      & /deep/ .el-button--primary:hover {
        color: #FFF;
        background-color: #41E8E9;
        border-color: #0a7e89;
      }
    }
  }
  & /deep/ .el-input--prefix {
    .el-input__inner {
      padding-left: 20%;
    }
  }
  & /deep/ .el-input--suffix {
    .el-input__inner {
      padding-right: 10%;
    }
  }
  .hisChartBox {
    height: calc(100% - 34px);
    width: 100%;
  }
}
</style>

<style lang="scss">
// 日期下拉框
.popper-date {
  border: 1px solid rgb(70, 237, 219);
  border-radius: 4px;
  background-color: rgb(30, 89, 112);
  box-shadow: 0 2px 10px 0 #0d7985;
  color: #fff;
  .el-date-picker__time-header {
    // border-bottom: 1px solid #3680e4;
    border: none !important;
    .el-date-picker__editor-wrap {
      // border: none !important;
      .el-input--small {
        .el-input__inner {
          background-color: #11323b !important;
          border: 1px solid #102e37 !important;
          color: #41e8e9;
          font-size: 15px;
          background: transparent;
        }
      }
      .el-time-panel {
        border: 1px solid rgb(70, 237, 219);
        border-radius: 2px;
        background-color: rgb(30, 89, 112);
        .el-time-panel__content .el-time-spinner__item {
          color: #fff;
        }
        .el-time-spinner__item:hover:not(.disabled):not(.active) {
          background: rgba(15, 45, 53, 0.9) !important;
        }
        .el-time-panel__footer .el-time-panel__btn.cancel {
          color: #fff;
        }
      }
    }
  }
  .el-date-picker__header {
    .el-picker-panel__icon-btn,
    .el-date-picker__header-label {
      color: #fff;
    }
  }
  .el-picker-panel__content .el-date-table th {
    color: #fff;
  }
  .el-picker-panel__footer {
    background-color: rgba(15, 45, 53, 0.9);
    border-top: 1px solid #3ddadb;
    .is-plain {
      color: #3bd2d5;
      background: #0a7e89;
      border: 1px solid #0a7e89;
    }
  }
  .popper__arrow {
    border-bottom-color: #3ddadb;
  }
  .popper__arrow::after {
    border-bottom-color: #3ddadb;
  }
}
</style>