import lodash from 'lodash'
import { getMetricTypeValue } from '@/components/common/js/tools'
import { getChart, getMousePoint, setChart } from '@/components/common/js/common'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
export default {
  data () {
    return {
      colorList: [],
      chartDot: 2,
      isInit: true, // 是否是初始化，初始化时为true，图表初始化结束后设为false
      legends: [], // { name, alias, color, statistics: [{type: min, value: xxx}, ...] }
      toolboxIconColor: {
        active: '#53a3cb',
        inactive: '#7e7e7e'
      },
      chartId: '',
      isNoData: true,
      series: []
    }
  },
  props: {
    chartInfo: Object,
    chartData: Array,
    chartOption: Object,
    isFullscreen: Boolean,
    showAllData: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    filterTime () {
      return this.$store.getters.getTimeRange
    },
    nowTimeType () {
      return this.$store.getters.getNowTimeType
    },
    chartListId () {
      return this.$store.getters.getChartListId
    }
  },
  methods: {
    handleTimeSeries (chartInfo, seriesTemplate, originalDatas) {
      const series = []
      let colorIndex = 0
      this.isNoData = true
      originalDatas.forEach((originalData, expressionIndex) => {
        originalData.forEach((data, dataIndex) => {
          if (colorIndex >= 20 && !this.showAllData) {
            colorIndex++
            return
          }
          this.isNoData = false
          const s = lodash.cloneDeep(seriesTemplate)
          if (s) {
            s.data = data.values
            s.name = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name
            if (chartInfo.param.stack) { // 堆叠
              s.stack = 'Total'
            }
            if (chartInfo.param.enable && chartInfo.param.enable.thresholds && !lodash.isEmpty(chartInfo.param.thresholds) && chartInfo.param.thresholds.length) { // 阈值
              s.markLine = {
                symbol: 'circle',
                symbolSize: 5
              }
              s.markLine.data = chartInfo.param.thresholds.map(threshold => {
                return {
                  yAxis: threshold.value || 0,
                  lineStyle: {
                    color: threshold.color,
                    width: 2,
                    type: 'dotted'
                  }
                }
              })
            }
            series.push(s)
            colorIndex++
          }
        })
      })
      this.$emit('chartIsNoData', this.isNoData)
      return series
    },
    // 单个legend
    handleLegend (chartInfo, data, expressionIndexs, dataIndex, colorIndex) {
      let expressionIndex = expressionIndexs
      let legend = '' // up
      let alias = ''
      if (chartInfo.elements && (expressionIndex >= chartInfo.elements.length)) {
        expressionIndex -= chartInfo.elements.length
        // legend += 'Previous '
        alias += 'Previous '
      }
      if (!data.metric) {
        data.metric = data.stream
      }
      if (data.metric.__name__) {
        legend += `${data.metric.__name__}{`
      }
      const tagKeysArr = Object.keys(data.metric)
      tagKeysArr.forEach(tagKey => {
        if (tagKey !== '__name__') {
          legend += `${tagKey}="${data.metric[tagKey]}",`
        }
      })
      if (legend.endsWith(',')) {
        legend = legend.substr(0, legend.length - 1)
      }
      if (data.metric.__name__) {
        legend += '}'
      }
      if (!legend && chartInfo.elements) {
        legend = chartInfo.elements[expressionIndex].expression
        //  legend = ''
      }
      // 处理legend别名
      alias = alias + this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
      if (!alias) {
        alias = chartInfo.elements[expressionIndex].expression
      }
      if (alias == 'Previous ') {
        alias += chartInfo.elements[expressionIndex].expression
      }
      // proj_status_
      const legendIndex = expressionIndex + 'and' + dataIndex
      const name = alias + '-' + legendIndex

      // 若需要统计，处理统计数据
      const statisticsTypes = chartInfo.param.legend ? chartInfo.param.legend.values : ''
      let statistics = []
      if (!lodash.isEmpty(statisticsTypes)) {
        statistics = statisticsTypes.map(type => {
          return { type, value: getMetricTypeValue(data.values, type) }
        })
      }
      if (colorIndex >= 20) {
        const colorRandom = randomcolor()
        this.colorList.push(colorRandom)
      }
      this.legends.push({ name, alias, statistics, color: this.colorList[colorIndex] })
      return {
        name,
        alias
      }
    },
    handleLegendAlias (legend, aliasExpression) {
      if (/\{\{.+\}\}/.test(aliasExpression)) {
        const labelValue = aliasExpression.replace(/(\{\{.+?\}\})/g, function (i) {
          const label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
          // if (!legend) {
          //   return label
          // }
          const reg = new RegExp(label + '=".+?"')
          let value = null
          if (reg.test(legend)) {
            const find = legend.match(reg)[0]
            value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1)
          }
          return value || ''
        })
        return labelValue
      } else {
        if (!aliasExpression) {
          return legend
          // let result =legend.substr(legend.indexOf('"') + 1,legend.lastIndexOf('"') - legend.indexOf('"') - 1);
          // return result
        }
        return aliasExpression
      }
    },
    selectMapping (value, valueMapping, show) {
      let mapping = ''
      if (show && valueMapping) {
        valueMapping.forEach(item => {
          if (item.type === 'value') {
            if (value == item.value) {
              mapping = item
            }
          }
          if (item.type === 'range') {
            if (value >= item.from && value < item.to) {
              mapping = item
            }
          }
          if (item.type === 'regx') {
            const reg = new RegExp(item.regx)
            if (reg.test(value)) {
              mapping = item
            }
          }
        })
      }
      return mapping
    },
    mouseEnterChart () {
      const myChart = getChart(this.chartId)
      if (myChart) {
        setTimeout(() => {
          myChart.setOption({
            toolbox: {
              show: true
            }
          })
        }, 300)
      }
    },
    tooltipPosition (point, params, dom, rect, size) {
      dom.style.transform = 'translateZ(999999)'
      const windowWidth = window.innerWidth// 窗口宽度
      const windowHeight = window.innerHeight// 窗口高度
      const windowMouse = getMousePoint()
      // 提示框位置
      let x = 0
      let y = 0
      // 当前鼠标位置
      const pointX = point[0]
      const pointY = point[1]
      // 外层div大小
      const viewWidth = size.viewSize[0]
      // const viewHeight = size.viewSize[1]
      // 提示框大小
      const boxWidth = size.contentSize[0]
      const boxHeight = size.contentSize[1]
      if (!this.isFullscreen) { // 本地显示
        const chartDom = document.getElementById('chart-local-' + this.chartInfo.id)
        if (chartDom) {
          if (windowMouse.x < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
            x = pointX + 15
          } else {
            x = pointX - boxWidth - 15
          }
          if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
            y = pointY + 15
          } else {
            y = pointY - boxHeight - 10
          }
          return [x, y]
        }
      } else {
        if (pointX < (viewWidth / 2)) { // 说明鼠标在左边放不下提示框
          x = pointX + 10
        } else {
          x = pointX - boxWidth
        }
        if (windowMouse.y + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
          y = pointY + 15
        } else {
          y = pointY - boxHeight - 10
        }
        return [x, y]
      }
    },
    mouseLeaveChart () {
      const myChart = getChart(this.chartId)
      if (myChart) {
        setTimeout(() => {
          myChart.setOption({
            toolbox: {
              show: false
            }
          })
        }, 300)
      }
    },
    resize () {
      setTimeout(() => {
        getChart(this.chartId) && getChart(this.chartId).resize()
      }, 100)
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler (n) {
        if (!this.isInit && this.chartOption.color) {
          this.colorList = this.colorList.slice(0, 20)
          this.chartOption.color = this.chartOption.color.slice(0, 20)
        }
        if (!this.isInit) {
          this.initChart(this.chartOption)
        }
      }
    },
    'chartInfo.loaded': {
      immediate: true,
      deep: true,
      handler (n) {
        if (n) {
          this.initChart && this.initChart(this.chartOption)
        }
      }
    }
  },
  mounted () {

    this.chartId = `${this.chartInfo.id}${this.isFullscreen ? '-fullscreen' : ''}`
  },
  beforeDestroy () {
    getChart(this.chartId) && getChart(this.chartId).dispose()
    setChart(this.chartId, null)
  }
}