<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-date-picker @change="onPickDate" :defaultValue="date" allowClear />
      <!--      <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,
  getNewSeriesItemByHour,
  getRandomInt
} from '@views/workConditions/ConditionChartConst'
import { getWorkConditionList } from '@api/workConditionApi'
import _ from 'lodash'

export default {
  name: 'dayWorkConditionsPage',
  components: { ConditionChart },
  props: {
    // curJh: {
    //   type: String,
    //   required: true,
    //   default: ''
    // }
  },
  data() {
    return {
      jh: 'YK20-16D4',
      isLoading: false,
      date: 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()
        .hours(0).minutes(0).seconds(0).milliseconds(0)
        .valueOf()

      let todayEnd = moment()
        .hours(1).minutes(0).seconds(0).milliseconds(0)
        .valueOf()

      Object.assign(newOption, {
        yAxis: {
          type: 'time',
          min: todayStart, // 设置x轴最小值为今天0点
          max: todayEnd, // 设置x轴最大值为今天1点
          axisLabel: {
            formatter: '{HH}:{mm}' // "{HH}:{mm}:{ss}"  得到的 label 形如：'2020-12-02'
          }, splitLine: { // 分隔线
            show: true
          }
        },
        xAxis: {

          type: 'category',
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
            '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        },
        dataZoom: [
          {
            type: 'slider', // 这是滑块型数据缩放组件
            yAxisIndex: 0, // 表示这个 dataZoom 组件控制着 xAxis 索引为 0 的轴
            start: 0, // 数据窗口范围的起始百分比, 表示一开始展示全部数据
            end: 100,
            left: 10,
            filterMode: 'weakFilter', // 数据窗口范围的结束百分比,
            labelFormatter: function(value) {
              return moment(value).format('HH:mm:ss')
            }
          },
          {
            type: 'inside', // 这是内置型数据缩放组件
            yAxisIndex: 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, {
        // series: fakeSeries
        series: [
          {
            name: legendList[0],
            type: 'custom',
            itemStyle: {
              color: 'red'
            },
            renderItem: function(params, api) {
              var categoryIndex = api.value(0)
              // 注意这里x, y的顺序相对之前代码进行了调整
              var start = api.coord([categoryIndex, api.value(1)])
              var end = api.coord([categoryIndex, api.value(2)])
              // 计算宽度时，根据类别的数量调整矩形的宽度
              var width = api.size([1, 0])[0] * 0.6

              return {
                type: 'rect',
                shape: echarts.graphic.clipRectByRect({
                  x: start[0] - width / 2, // 确保矩形在类别坐标中居中
                  y: end[1], // 因为图表是自下而上绘制，y轴的结束点作为矩形的起点
                  width: width, // 根据类别调整的矩形宽度
                  height: start[1] - end[1] // 正确计算矩形的高度
                }, {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
                }),
                style: api.style()
              }
            },
            encode: {
              x: 0, // 类别映射到 x 轴
              y: [1, 2] // 时间范围映射到 y 轴
            },
            data: [
              // Format: [yAxis index, task start, task end]
              // Example: [0, start hour, end hour]
              [0, `${today} 00:09:10`, `${today} 00:15:10`], // Task 1
              [0, `${today} 00:21:10`, `${today} 00:26:10`] // Task 1
            ]
          }
          // {
          //   name: legendList[1],
          //   type: "custom",
          //   itemStyle: {
          //     color: "green"
          //   },
          //   renderItem: function(params, api) {
          //     var categoryIndex = api.value(0);
          //     var start = api.coord([categoryIndex, api.value(1)]);
          //     var end = api.coord([categoryIndex, api.value(2)]);
          //     var width = api.size([1, 0])[0] * 0.6;
          //
          //     return {
          //       type: "rect",
          //       shape: echarts.graphic.clipRectByRect(
          //         {
          //           x: start[0] - width / 2, // 确保矩形在类别坐标中居中
          //           y: end[1], // 因为图表是自下而上绘制，y轴的结束点作为矩形的起点
          //           width: width, // 根据类别调整的矩形宽度
          //           height: start[1] - end[1] // 正确计算矩形的高度
          //         },
          //         {
          //           x: params.coordSys.x,
          //           y: params.coordSys.y,
          //           width: params.coordSys.width,
          //           height: params.coordSys.height
          //         }
          //       ),
          //       style: api.style()
          //     };
          //   },
          //   encode: {
          //     x: 0, // 类别映射到 x 轴
          //     y: [1, 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, {
        grid: {
          top: '2%',
          left: '5%',
          right: '20%',
          bottom: '5%',
          containLabel: true
        }
      })
      // 设置tooltips
      Object.assign(newOption, {
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            console.log(params)
            return (
              params.seriesName +
              '<br/>开始时间: ' +params.value[0]+":"+
              moment(params.data[1]).format('mm:ss') +
              '<br/>结束时间: ' +params.value[0]+":"+
              moment(params.data[2]).format('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()
        .hours(0).minutes(0).seconds(0).milliseconds(0)
        .valueOf()

      let todayEnd = moment()
        .hours(1).minutes(0).seconds(0).milliseconds(0)
        .valueOf()

      Object.assign(newOption, {
        yAxis: {
          type: 'time',
          min: todayStart, // 设置x轴最小值为今天0点
          max: todayEnd, // 设置x轴最大值为今天1点
          axisLabel: {
            formatter: '{mm}:{ss}' // "{HH}:{mm}:{ss}"  得到的 label 形如：'2020-12-02'
          }, splitLine: { // 分隔线
            show: true
          }
        },
        xAxis: {

          type: 'category',
          data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
            '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
        },
        dataZoom: [
          {
            type: 'slider', // 这是滑块型数据缩放组件
            left: 10,
            yAxisIndex: 0, // 表示这个 dataZoom 组件控制着 xAxis 索引为 0 的轴
            start: 0, // 数据窗口范围的起始百分比, 表示一开始展示全部数据
            end: 100,
            filterMode: 'weakFilter', // 数据窗口范围的结束百分比,
            labelFormatter: function(value) {
              return moment(value).format('HH:mm:ss')
            }
          },
          {
            type: 'inside', // 这是内置型数据缩放组件
            yAxisIndex: 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  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.date.format('YYYY-MM-DD'), endTime: this.date.format('YYYY-MM-DD')
      }).then((res) => {
        // this.dayCategoryData = []
        let timeRangeByDayList = []

        if (res.result.length === 1) {
          let dayData = res.result[0]
          //因为查询的是某日 因此只有一条数据
          // console.log("dayData ↓")
          // console.log(dayData)
          let rawList = this.GenTimeRangeByDayRaw(dayData.conditionDateItem, dayData.dateString)
          timeRangeByDayList = this.splitListByHour(rawList)
        }


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

    },
    //按照原始数据生成当天的工况时间段
    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 = getNewSeriesItemByHour(item.name, item.color)
        seriesList.push(seriesItem)
      })

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

      return seriesList
    },
    onPickDate(val) {
      this.date = val
    },
    splitListByHour(rawList) {
      //生成0-23小时数组
      let hoursList = Array.from({ length: 24 }, () => [])

      // rawList=[{operatingMode: '起下钻', motion: '坐卡', startTime: '2024-05-02 10:26:23.000', endTime: '2024-05-02 15:07:44'}]
      rawList.forEach((item) => {
          if (moment(item.endTime).hours() - moment(item.startTime).hours() > 0) {
            console.log('跨越n小时的工况↓')
            console.log(item)
            // 结束时间-开始时间>0 说明此工况跨小时 拆成n个 放到对应的小时数组

            let timeStartFlag = item.startTime
            while (moment(timeStartFlag).isBefore(item.endTime)) {

              let nextHourStart = moment(timeStartFlag).add(1, 'hours').startOf('hour')
              let segmentEnd = nextHourStart.isBefore(item.endTime) ? nextHourStart.format('YYYY-MM-DD HH:mm:ss') : item.endTime

              let itemSection = _.cloneDeep(item)
              itemSection.startTime = moment(timeStartFlag).format('YYYY-MM-DD HH:mm:ss')

              if (moment(segmentEnd).hour() - moment(timeStartFlag).hour() === 1) {
                // 当结束时间为整点时 改为xx:59:59
                itemSection.endTime = moment(timeStartFlag).minute(59).second(59).format('YYYY-MM-DD HH:mm:ss')
              }else {
                itemSection.endTime = moment(segmentEnd).format('YYYY-MM-DD HH:mm:ss')
              }

              hoursList[moment(itemSection.startTime).hours()].push(itemSection)

              console.log('itemSection')
              console.log(itemSection)

              timeStartFlag = segmentEnd
            }
          }

          else {
            //放到对应小时的数组里
            hoursList[moment(item.startTime).hours()].push(item)
          }
        }
      )
      return hoursList
    }
  },
  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>