<template>
  <div style="width: 100%; height: 100%; overflow: auto; padding-top: 76px">
    <!-- 图例 -->
    <div class="legend">
      <div
        class="legend-item"
        :class="{ active: legend.isShow }"
        v-for="(legend, index) in legendList"
        :key="index"
        @click="handleLegendChange(legend)"
      >
        <span class="legend-item-color" :style="{ backgroundColor: legend.color }"></span>
        <span>{{ legend.title }}</span>
      </div>
    </div>
    <!-- 图例结束 -->
    <custom-chart
      ref="customChartRef"
      :option="option"
      :opts="{ notMerge: true }"
      :height="list.length * 295"
      @dataZoom="handleZoomChange"
    ></custom-chart>
    <a-spin style="z-index: 11; position: absolute; top: 45%; left: 48%" :spinning="spinning" />
  </div>
</template>

<script>
import CustomChart from '@/components/CustomChart/index.vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'

const typeList = ['MET', 'SOH', 'QC', 'PHD'] //

// 自定义图例列表
const legendList = [
  {
    title: 'SPHDPREL',
    color: '#17a840',
    isShow: true,
  },
  {
    title: 'SPHDF',
    color: '#0cbfb0',
    isShow: true,
  },
  {
    title: 'QC',
    color: '#1c82eb',
    isShow: true,
  },
  {
    title: 'GASBKPHDPREL',
    color: '#d3ad16',
    isShow: true,
  },
  {
    title: 'GASBKPHDF',
    color: '#db6423',
    isShow: true,
  },
  {
    title: 'SOH/MET',
    color: '#8852da',
    isShow: true,
  },
]

// 图表配置
const initialOption = {
  tooltip: {
    formatter: (params) => {
      return `
        <div>${params.marker}${params.name}</div>
        <div>START：${dayjs(new Date(params.value[4])).format('YYYY-MM-DD HH:mm:ss')}</div>
        <div style="white-space: pre">   END：${dayjs(new Date(params.value[2])).format('YYYY-MM-DD HH:mm:ss')}</div>
      `
    },
  },
  grid: [],
  xAxis: [],
  yAxis: [],
  series: [],
  dataZoom: [],
}

export default {
  props: {
    title: {
      type: String,
    },
    spinning: {
      type: Boolean,
    },
    list: {
      type: Array,
      default: () => [],
    },
    scaleSettings: {
      type: Object,
      required: true,
    },
  },
  components: {
    CustomChart,
  },
  data() {
    return {
      legendList: cloneDeep(legendList),
      option: {},
      zoomDataAll: [],
    }
  },
  methods: {
    handleZoomChange(params) {
      this.zoomDataAll = this.option.dataZoom.map((item) => {
        if (item.id == params.batch[0].dataZoomId) {
          return {
            id: params.batch[0].dataZoomId,
            start: params.batch[0].start,
            end: params.batch[0].end,
          }
        } else {
          return item
        }
      })
    },
    renderItem(params, api) {
      let categoryIndex = api.value(0)
      let start = api.coord([api.value(1), categoryIndex])
      let end = api.coord([api.value(2), categoryIndex])
      let height = 20

      let rectShape = 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,
        }
      )
      return (
        rectShape && {
          type: 'rect',
          shape: rectShape,
          style: api.style(),
        }
      )
    },

    convertStatus(item) {
      switch (item.status) {
        case 'SFULL':
          item.status = 'SPHDF'
          break
        case 'SPREL':
          item.status = 'SPHDPREL'
          break
        case 'GPREL':
          item.status = 'GASBKPHDPREL'
          break
        case 'GFULL':
          item.status = 'GASBKPHDF'
          break
        case 'QC':
          item.status = 'QC'
          break
        case 'SOH':
        case 'MET':
          item.status = 'SOH/MET'
          break
      }
    },

    initChartOption(val) {
      let now = dayjs(new Date())
      now = now.add(1, 'hour').set('minute', 0).set('second', 0).set('millisecond', 0)

      const max = now.valueOf()
      const min = max - this.scaleSettings.cacheTime * 24 * 60 * 60 * 1000
      const option = cloneDeep(initialOption)
      const { grid, xAxis, yAxis, series, dataZoom } = option
      this.list.forEach((item, index) => {
        grid.push({
          left: 70,
          right: 20,
          top: 70 * index + 225 * index,
          height: 225,
        })

        xAxis.push({
          gridIndex: index,
          min,
          max,
          interval: this.scaleSettings.scaleInterval * 60 * 1000,
          axisLabel: {
            show: true,
            formatter: (val) => {
              let dateTime = new Date(val)
              return dayjs(dateTime).format('HH:mm\nMM/DD')
            },
            color: '#ade6ee',
          },
          splitLine: {
            lineStyle: {
              color: '#214751',
            },
          },
        })

        yAxis.push({
          gridIndex: index,
          name: item.title,
          nameLocation: 'middle', // 设置标题位置为中间
          nameTextStyle: {
            // 设置标题样式
            fontSize: 14,
            color: '#5b9cba',
          },
          nameGap: 46,
          data: typeList,
          splitLine: {
            show: true,
            lineStyle: {
              color: '#214751',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#214751',
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#ade6ee',
          },
        })

        const data = []
        item.dataList.forEach((item) => {
          this.convertStatus(item)

          let originalTime = new Date(item.beginTime * 1000).getTime()
          let startTime = new Date(item.beginTime * 1000).getTime()
          if (item.type == 'PHD') {
            startTime = item.endTime * 1000 - 60 * 1000 * 30
          }

          const endTime = new Date(item.endTime * 1000).getTime()
          const duration = endTime - startTime
          const index = typeList.findIndex((type) => item.type == type)
          const find = this.legendList.find((legendItem) => legendItem.title == item.status)
          if (find.isShow) {
            data.push({
              name: item.status,
              value: [index, startTime, endTime, duration, originalTime],
              itemStyle: {
                normal: {
                  color: find.color,
                },
              },
            })
          }
        })

        series.push({
          type: 'custom',
          renderItem: this.renderItem,
          encode: {
            x: [1, 2],
            y: 0,
          },
          data: data,
          xAxisIndex: index,
          yAxisIndex: index,
        })
        if (!val) {
          dataZoom.push({
            type: 'inside',
            id: index,
            xAxisIndex: index,
            start: 100 - (this.scaleSettings.timelineLength / (this.scaleSettings.cacheTime * 24 * 60)) * 100,
            end: 100,
            zoomLock: true,
          })
        }
      })

      this.option = option
    },

    // 图例控制图表
    handleLegendChange(legend) {
      legend.isShow = !legend.isShow
      this.initChartOption()
      this.option.dataZoom = this.zoomDataAll.map((item, index) => {
        return {
          type: 'inside',
          id: item.id,
          xAxisIndex: index,
          start: item.start,
          end: item.end,
          zoomLock: true,
        }
      })
    },

    resize() {
      this.$refs.customChartRef.resize()
    },
  },
  watch: {
    list: {
      handler() {
        this.initChartOption()
      },
      immediate: true,
    },
  },
}
</script>

<style lang="less" scoped>
.legend {
  width: 100%;
  padding: 25px 0;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #022024;
  z-index: 11;

  &-item {
    color: #ade6ee;
    line-height: 12px;
    cursor: pointer;
    user-select: none;
    display: flex;

    &:not(:last-child) {
      margin-right: 30px;
    }

    &-color {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 4px;
      margin-right: 6px;
      vertical-align: baseline;
      filter: grayscale(1);
    }

    &.active {
      .legend-item-color {
        filter: grayscale(0);
      }
    }
  }
}
</style>
