<template>
  <div style="height: 100%;">
    <div
      v-if="data.length !== 0"
      v-loading="loading"
      class="hourlyChartPage"
      element-loading-background="rgba(17,53,67,0.7)"
    >
      <div class="left">
        <div class="imgBox">实时水深：</div>
        <div class="val">{{ realNum }}<span>m</span></div>
      </div>
      <div ref="rainHourChartBox" class="riverLineChart" />
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import _ from 'lodash'
import { hstponding } from '@/api/api-whCloud'
import getEcharts from '../../../../../utils/echarts'

export default {
  props: {
    baseData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const startDate = moment().format('YYYY-MM-DD')
    const endDate = moment().add(1, 'd').format('YYYY-MM-DD')
    // const currentDate = moment()
    // // 当日8点
    // const currentDate9 = moment(`${currentDate.format('YYYY-MM-DD')} 09:00:00`)
    // // 当前时间在当日8点以后，取当日8点到现在
    // if (currentDate.isAfter(currentDate9)) {
    //   startDate = currentDate9.format('YYYY-MM-DD 09:00:00')
    //   endDate = currentDate.format('YYYY-MM-DD HH:mm:ss')
    // } else {
    //   // 当前时间在当日9点以前，取昨日9点到现在9点
    //   startDate = currentDate.subtract(1, 'd').format('YYYY-MM-DD 09:00:00')
    //   endDate = currentDate9.format('YYYY-MM-DD 09:00:00')
    // }
    return {
      startDate,
      endDate,
      myChart: null,
      realNum: null,
      data: {},
      loading: false
    }
  },
  watch: {
    baseData: {
      immediate: true,
      handler(data) {
        if (data) {
          this.depthData()
        }
      }
    }
  },
  created() {},
  destroyed() {
    if (this.myChart) {
      this.myChart.dispose()
    }
  },
  methods: {
    async setLineOption(data) {
      if (data.length === 0) return
      const Echarts = await getEcharts()
      this.myChart = Echarts.init(this.$refs.rainHourChartBox, 'home-stat')
      const time = []
      const ydata = []
      data.forEach(val => {
        // const hour = `${moment(val.TM).format('MM')}-${moment(val.TM).format(
        //   'DD'
        // )} ${moment(val.TM).format('HH')}时`
        const t = moment(val.TM).format('MM-DD HH:mm')
        time.push(t)
        ydata.push(val.Z)
        this.realNum = this.numberFormat(val.Z)
      })
      let max = 0
      if (ydata.length > 0) {
        max = (Math.max(...ydata) + 0.1).toFixed(1)
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 50,
          left: 0,
          right: 40,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#fff',
            fontSize: '14',
            margin: 20,
            formatter: function(value) {
              const time = value.substring(0, 5) + '\n' + value.substring(6)
              return time
              // 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: time
        },
        yAxis: {
          type: 'value',
          name: '水深(m)',
          nameTextStyle: {
            color: '#fff',
            fontSize: 14
          },
          max: max,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#1c87d6'
            }
          },
          axisLabel: {
            color: '#fff',
            fontSize: '14'
            // fontWeigh: '600',
            // lineHeight: '17'
          }
        },
        series: [
          {
            name: '水位线',
            data: ydata,
            type: 'line',
            // symbol: 'circle',
            // symbolSize: 5,
            showSymbol: false,
            barWidth: 20,
            barMinHeight: 10,
            label: {
              show: false
            },
            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
          }
        ]
      }
      this.myChart.setOption(option, true)
      this.myChart.resize()
    },
    numberFormat(value) {
      if (!value && value !== 0) {
        return '--'
      }
      const type = typeof value
      if (type === 'number') {
        return value.toFixed(2)
      }
      return parseFloat(value).toFixed(2)
    },
    async depthData() {
      let startDate = this.startDate
      let endDate = this.endDate
      this.loading = true
      const { stcd } = this.baseData
      startDate = moment(startDate).format('YYYY-MM-DD')
      endDate = moment(endDate).format('YYYY-MM-DD')
      const { data: { result }} = await hstponding({
        searchFilters: {
          begin: startDate,
          endDate: endDate,
          stcd: stcd
        }
      })
      const { data } = JSON.parse(result)
      let obj = {}
      data.forEach(item => {
        if (item.TM) {
          item.TM2 = moment(item.TM).format('DD HH')
        }
        obj = _.groupBy(data, 'TM2')
      })
      const HourDataArr = []
      for (const key in obj) {
        HourDataArr.push(obj[key][0])
      }
      this.data = HourDataArr
      this.$nextTick(() => {
        this.setLineOption(data)
      })
      this.loading = false
    }
  }
}
</script>
<style lang="scss" scoped>
.hourlyChartPage {
  width: 100%;
  height: 100%;
  .choose-time {
    display: flex;
    color: #fff;
    .history-date-picker {
      display: inline-block;
      margin-left: 10px;
      .datettimes {
        border: 1px solid #1d6670 !important;
        width: 75%;
      }
      .datettimes /deep/ input {
        border: none !important;
        color: #fff;
        font-size: 15px;
        background: transparent;
        cursor: pointer;
      }
      .datettimes /deep/ .el-input__prefix {
        left: 0;
      }
      .datettimes /deep/ .el-input__suffix {
        right: -5px;
      }
      .datettimes /deep/ .el-input__inner {
        padding-right: 15px;
      }
    }
    .search {
      display: inline-block;
      margin-left: 15px;
      & /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;
      // }
    }
  }
  .left {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .imgBox {
      flex-shrink: 0;
      color: #ffffff;
      text-align: center;
      border-radius: 50%;
      padding-top: 8px;
      font-size: 22px;
    }
    .val {
      font-size: 38px;
      font-family: DIN-Medium, DIN;
      font-weight: 500;
      color: #ffffff;
      span {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
  .riverLineChart {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>