<template>
  <div style="height: 100%" class="hourlyChartPage">
    <div ref="rainHourChartBox" class="riverLineChart" />
  </div>
</template>
<script>
import moment from 'moment';
import _ from 'lodash';
import { zshisdatalist } from '@/apiData/api-map';
import * as echarts from 'echarts';

export default {
  props: {
    valueModalNld: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    const startDate = moment().format('YYYY-MM-DD');
    const endDate = moment().add(1, 'd').format('YYYY-MM-DD');

    return {
      startDate,
      endDate,
      myChart: null,
      realNum: null,
      data: {},
      loading: false,
    };
  },
  created() {
    this.depthData();
  },
  destroyed() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    async setLineOption(data) {
      if (data.length === 0) return;
      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: 50,
          right: 40,
          bottom: 50,
          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.valueModalNld;
      startDate = moment(startDate).format('YYYY-MM-DD');
      endDate = moment(endDate).format('YYYY-MM-DD');
      const resultData = await zshisdatalist({
        searchFilters: {
          begin: startDate,
          endDate: endDate,
          stcd: STCD,
        },
        paramMap: {
          stcd: STCD,
        },
      });
      const { result } = resultData;
      let obj = {};
      result.forEach((item) => {
        if (item.TM) {
          item.TM2 = moment(item.TM).format('DD HH');
        }
        obj = _.groupBy(result, 'TM');
      });
      const HourDataArr = [];
      for (const key in obj) {
        HourDataArr.push(obj[key][0]);
      }
      this.data = HourDataArr;
      this.$nextTick(() => {
        this.setLineOption(result);
      });
      this.loading = false;
    },
  },
};
</script>
<style lang="less" 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: 500px;
  }
}
</style>