<template>
  <div
    v-loading="isLoading"
    style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100%"
  >
    <div
      style="
        height: 50px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      "
    >
      <div style="margin-left: 5%; font-size: 22px; font-weight: bold">{{ this.jh }} 工况</div>
      <div style="flex: 1"></div>
      <a-range-picker @change="onPickDate" format="YYYY-MM-DD" :defaultValue="dateRange" allowClear />
      <a-button @click="getData" style="margin-left: 8px; margin-right: 16px">查询</a-button>
    </div>
    <condition-chart @chat-init="initChart" :options="opt" height="85vh"> </condition-chart>
    <!--    <button @click="assembleOptionRandom">生成随机数据</button>-->
  </div>
</template>
<script>
import ConditionChart from '@views/workConditions/conditionChart.vue'
import * as echarts from 'echarts'
import moment from 'moment/moment'
import { conditionList, fakeData, getNewSeriesItem, getRandomInt } from '@views/workConditions/ConditionChartConst'
import { getWorkConditionList } from '@api/workConditionApi'

export default {
  name: 'workConditionsPage',
  components: { ConditionChart },
  props: {
    // curJh: {
    //   type: String,
    //   required: true,
    //   default: ''
    // }
  },
  data() {
    return {
      jh: '丰页3HF(导眼)',
      isLoading: false,
      dateRange: [moment().subtract(6, 'days'), moment()],
      opt: {},
      dayCategoryData: [], //用于组合y轴
      seriesList: [] //用于组合series
    }
  },

  methods: {
    initChart(chart) {
      console.log(chart)
    },
    assembleOptionRandom() {
      let newOption = {}
      // 拼装基础样式 title grid
      Object.assign(newOption, {
        title: {
          text: '滨37-3-斜3 工况demo',
          left: 'center'
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '25%',
          bottom: '10%',
          containLabel: true
        }
      })
      // 设置tooltips
      Object.assign(newOption, {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // console.log(params)
            return (
              params.seriesName +
              '<br/>开始时间: ' +
              moment(params.data[1]).format('HH:mm:ss') +
              '<br/>结束时间: ' +
              moment(params.data[2]).format('HH:mm:ss')
            )
          }
        }
      })

      // 拼装xAxis dataZoom等跟时间相关配置
      // let today = moment().format('YYYY-MM-DD') //'YYYY-MM-DD HH:mm:ss'
      // console.log(today) // set to 12:00 am today
      let todayStart = moment()
        .startOf('day')
        .valueOf()
      let todayEnd = moment()
        .endOf('day')
        .valueOf()

      Object.assign(newOption, {
        xAxis: {
          type: 'time',
          min: todayStart, // 设置x轴最小值为今天0点
          max: todayEnd, // 设置x轴最大值为今天23点59分59秒
          axisLabel: {
            formatter: '{HH}:{mm}' // "{HH}:{mm}:{ss}"  得到的 label 形如：'2020-12-02'
          }
        },
        dataZoom: [
          {
            type: 'slider', // 这是滑块型数据缩放组件
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制着 xAxis 索引为 0 的轴
            start: 0, // 数据窗口范围的起始百分比, 表示一开始展示全部数据
            end: 100,
            filterMode: 'weakFilter', // 数据窗口范围的结束百分比,
            labelFormatter: function (value) {
              return moment(value).format('HH:mm:ss')
            }
          },
          {
            type: 'inside', // 这是内置型数据缩放组件
            xAxisIndex: 0,
            start: 0,
            end: 100,
            filterMode: 'weakFilter' // 数据窗口范围的结束百分比
          }
        ]
      })

      // 设置legend
      let legendList = conditionList.map(item => {
        return item.name
      })
      Object.assign(newOption, {
        legend: {
          data: legendList,
          // 设置图例组件的布局方向
          orient: 'vertical',
          // 设置图例组件的位置
          right: '5%',
          top: 'center',
          height: 'auto',
          type: 'scroll'
        }
      })

      // 拼装yAxis series等跟数据相关配置
      // todo yaxis的data为动态的，需要根据数据动态生成  series的data内的日期的yyyymmdd应替换为今日的日期

      let fakeSeries = []
      conditionList.forEach(item => {
        let seriesItem = getNewSeriesItem(item.name, item.color)
        fakeSeries.push(seriesItem)
      })
      // console.log(fakeSeries)
      let fakeList = fakeData(150)
      for (let i = 0; i < fakeList.length; i++) {
        fakeSeries[i % fakeSeries.length].data.push([0, ...fakeList[i]])
      }

      Object.assign(newOption, {
        yAxis: {
          type: 'category',
          data: ['2024-04-07', '2024-04-08', '2024-04-09', '2024-04-10', '2024-04-11', '2024-04-12', '2024-04-13']
        },
        series: fakeSeries
        // series: [
        //   {
        //     name: legendList[0],
        //     type: "custom",
        //     itemStyle: {
        //       color: "red"
        //     },
        //     renderItem: function(params, api) {
        //       var categoryIndex = api.value(0);
        //       var start = api.coord([api.value(1), categoryIndex]);
        //       var end = api.coord([api.value(2), categoryIndex]);
        //       var height = api.size([0, 1])[1] * 0.6;
        //
        //       return {
        //         type: "rect",
        //         shape: echarts.graphic.clipRectByRect(
        //           {
        //             x: start[0],
        //             y: start[1] - height / 2,
        //             width: end[0] - start[0],
        //             height: height
        //           },
        //           {
        //             x: params.coordSys.x,
        //             y: params.coordSys.y,
        //             width: params.coordSys.width,
        //             height: params.coordSys.height
        //           }
        //         ),
        //         style: api.style()
        //       };
        //     },
        //     encode: {
        //       x: [1, 2], // 表示维度 3、1、5 映射到 x 轴。
        //       y: 0 // 表示维度 2 映射到 y 轴。
        //     },
        //     data: [
        //       // Format: [yAxis index, task start, task end]
        //       // Example: [0, start hour, end hour]
        //       [0, `${today} 08:09:10`, `${today} 09:09:10`], // Task 1
        //       [0, `${today} 18:09:10`, `${today} 19:09:10`] // Task 1
        //     ]
        //   },
        //   {
        //     name: legendList[1],
        //     type: "custom",
        //     itemStyle: {
        //       color: "green"
        //     },
        //     renderItem: function(params, api) {
        //       var categoryIndex = api.value(0);
        //       var start = api.coord([api.value(1), categoryIndex]);
        //       var end = api.coord([api.value(2), categoryIndex]);
        //       var height = api.size([0, 1])[1] * 0.6;
        //
        //       return {
        //         type: "rect",
        //         shape: echarts.graphic.clipRectByRect(
        //           {
        //             x: start[0],
        //             y: start[1] - height / 2,
        //             width: end[0] - start[0],
        //             height: height
        //           },
        //           {
        //             x: params.coordSys.x,
        //             y: params.coordSys.y,
        //             width: params.coordSys.width,
        //             height: params.coordSys.height
        //           }
        //         ),
        //         style: api.style()
        //       };
        //     },
        //     encode: {
        //       x: [1, 2], // 表示维度 3、1、5 映射到 x 轴。
        //       y: 0 // 表示维度 2 映射到 y 轴。
        //     },
        //     data: [
        //       // Format: [yAxis index, task start, task end]
        //       // Example: [0, start hour, end hour]
        //       [1, `${today} 08:09:10`, `${today} 09:09:10`], // Task 1
        //       [1, `${today} 18:09:10`, `${today} 19:09:10`] // Task 1
        //     ]
        //   }
        // ]
      })

      this.opt = newOption
    },
    assembleOption() {
      let newOption = {}
      // 拼装基础样式 title grid
      Object.assign(newOption, {
        // title: {
        //   text: `${this.jh} 工况`,
        //   left: 'center',
        //   top: '2%'
        // },
        grid: {
          top: '2%',
          left: '5%',
          right: '25%',
          bottom: '10%',
          containLabel: true
        }
      })
      // 设置tooltips
      Object.assign(newOption, {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // console.log(params)
            return (
              params.seriesName +
              '<br/>开始时间: ' +
              moment(params.data[1]).format('HH:mm:ss') +
              '<br/>结束时间: ' +
              moment(params.data[2]).format('HH:mm:ss')
            )
          }
        }
      })

      // 拼装xAxis dataZoom等跟时间相关配置
      // let today = moment().format('YYYY-MM-DD') //'YYYY-MM-DD HH:mm:ss'
      // console.log(today) // set to 12:00 am today
      let todayStart = moment()
        .startOf('day')
        .valueOf()
      let todayEnd = moment()
        .endOf('day')
        .valueOf()

      Object.assign(newOption, {
        xAxis: {
          type: 'time',
          min: todayStart, // 设置x轴最小值为今天0点
          max: todayEnd, // 设置x轴最大值为今天23点59分59秒
          axisLabel: {
            formatter: '{HH}:{mm}' // "{HH}:{mm}:{ss}"  得到的 label 形如：'2020-12-02'
          }
        },
        dataZoom: [
          {
            type: 'slider', // 这是滑块型数据缩放组件
            xAxisIndex: 0, // 表示这个 dataZoom 组件控制着 xAxis 索引为 0 的轴
            start: 0, // 数据窗口范围的起始百分比, 表示一开始展示全部数据
            end: 100,
            filterMode: 'weakFilter', // 数据窗口范围的结束百分比,
            labelFormatter: function (value) {
              return moment(value).format('HH:mm:ss')
            }
          },
          {
            type: 'inside', // 这是内置型数据缩放组件
            xAxisIndex: 0,
            start: 0,
            end: 100,
            filterMode: 'weakFilter' // 数据窗口范围的结束百分比
          }
        ]
      })

      // 设置legend
      let legendList = conditionList.map(item => {
        return item.name
      })
      Object.assign(newOption, {
        legend: {
          data: legendList,
          // 设置图例组件的布局方向
          orient: 'vertical',
          // 设置图例组件的位置
          right: '5%',
          top: 'center',
          height: 'auto',
          type: 'scroll'
        }
      })

      // 拼装yAxis series等跟数据相关配置
      // todo yaxis的data为动态的，需要根据数据动态生成  series的data内的日期的yyyymmdd应替换为今日的日期
      Object.assign(newOption, {
        yAxis: {
          type: 'category',
          data: this.dayCategoryData
        },
        series: this.seriesList
      })

      this.opt = newOption
    },
    getData() {
      this.isLoading = true
      getWorkConditionList({
        jh: this.jh, startTime: this.dateRange[0].format('YYYY-MM-DD'), endTime: this.dateRange[1].format('YYYY-MM-DD')
      }).then((res) => {
        this.dayCategoryData = []
        let timeRangeByDayList = []
        res.result.forEach((dayData) => {
          this.dayCategoryData.push(dayData.dateString)
          timeRangeByDayList.push(this.GenTimeRangeByDayRaw(dayData.conditionDateItem, dayData.dateString))
        })

        console.log(timeRangeByDayList)
        this.seriesList = this.genSeriesData(timeRangeByDayList)
        this.assembleOption()
      }).finally(() => {
        this.isLoading = false
      })

    },
    //按照原始数据生成当天的工况时间段
    GenTimeRangeByDayRaw(arr, dayStr) {

      if (arr.length <= 1) {
        console.log('GenTimeRangeByDayRaw len<=1')
        return []
      }

      const newArr = []
      // let startItem = arr[0]
      // let startIndex = 0
      let newItem = null
      let lastTime = null


      for (let i = 0; i <= arr.length; i++) {
        let current = arr[i]
        let next = arr[i + 1]

        if (current && newItem === null) {
          newItem = {
            operatingMode: current.operatingMode,
            motion: current.motion,
            startTime: moment(current.time).format('YYYY-MM-DD HH:mm:ss'),
            endTime: ''
          }
        }
        // 检查当前项目是否存在，以及是否与前一个项目的operatingMode和motion相同
        if (current && next && (next.operatingMode === current.operatingMode && next.motion === current.motion)) {
          // 如果相同，继续检查下一项
          lastTime = next.time
        } else if (current && next && (next.operatingMode !== current.operatingMode || next.motion !== current.motion)) {
          // 加入新的对象到newArr中
          newItem.endTime = moment(next.time).format('YYYY-MM-DD HH:mm:ss')
          newArr.push(newItem)
          newItem = null
          lastTime = null
        } else if (current && !next) {
          // 如果相同，继续检查下一项
          newItem.endTime = moment(lastTime ? current.time : lastTime).format('YYYY-MM-DD HH:mm:ss')
          newArr.push(newItem)
        }
      }

      // console.log('GenTimeRangeByDayRaw ↓↓↓')
      // console.log(newArr)
      return newArr

    },
    //生成series数据
    genSeriesData(timeRangeList) {
      let today = moment().format('YYYY-MM-DD') //'YYYY-MM-DD HH:mm:ss'
      console.log(today) //
      // 生成series结构
      let seriesList = []
      conditionList.forEach(item => {
        let seriesItem = getNewSeriesItem(item.name, item.color)
        seriesList.push(seriesItem)
      })

      timeRangeList.forEach((arr, dayIndex) => {
        arr.forEach((item) => {
          seriesList.forEach((series) => {
            if (item.operatingMode + '-' + item.motion === series.name) {
              let start = moment(item.startTime).format('HH:mm:ss')
              let end = moment(item.endTime).format('HH:mm:ss')
              // [1, `${today} 08:09:10`, `${today} 09:09:10`],
              // 时间重置为今天
              series.data.push([dayIndex, `${today} ${start}`, `${today} ${end}`])
            }
          })
        })
      })
      console.log('genSeriesData ↓↓↓')
      console.log(seriesList)

      return seriesList
    },
    onPickDate(val) {
      this.dateRange = val
    }
  },
  mounted() {
    const curJh = this.$route.query.curJh;
    console.log(curJh);
    if (curJh !== null && curJh !== undefined && curJh !== '') {
      this.jh = curJh;
    }
    this.getData()

  }
}
</script>

<style scoped lang="less">
</style>