<template>
  <div style="width:100%;height:100%;">
    <div :id="elId"
         :style='initStyle'
         class="innerStyle"></div>
  </div>

</template>
<script>
import uuidv1 from 'uuid/v1'
import groupBy from 'lodash/groupBy'
import values from 'lodash/values'
export default {
  name: 'commonEchart',
  props: {
    height: {// 图表高度
      type: String,
      default: '400px'
    },
    width: {// 图表宽度
      type: String,
      default: '100%'
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    initStyle: {
      type: Object,
      default() {
        return {
        }
      }
    },
    elInfo: {

    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        this.initEchart(newVal)
      },
      deep: true
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  data() {
    return {
      elId: '',
      chart: null,
      setRanderDataTime: 0, // 计数器
      randerData: [], // 分组后的数组
      pageSourceData: []
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },

  mounted() {
    this.initEchart(this.allSourceData)
  },
  methods: {
    initEchart(option) {
      if (!Object.keys(option).length) return
      const { config, sourceData } = JSON.parse(JSON.stringify(option))
      const data = this.dealWithSource(config, sourceData)
      data && this.drowEchart(data)
    },
    // 处理配置和原始数据
    dealWithSource(config, sourceData) {
      if (this.elInfo.el === 'hsLineBar') {
        return this.dealWithSource_lineBar(config, sourceData)
      } else if (this.elInfo.el === 'hsPie') {
        return this.dealWithSource_pie(config, sourceData)
      } else if (this.elInfo.el === 'hsRadar') {
        return this.dealWithSource_radar(config, sourceData)
      }
    },
    // 处理配置和原始数据
    dealWithSource_lineBar(config, sourceData) {
      this.pageSourceData = values(groupBy(sourceData, '_iPage'))
      if (this.setRanderDataTime === this.pageSourceData.length) {
        this.setRanderDataTime = 0
      }
      this.randerData = this.pageSourceData[this.setRanderDataTime]

      const isTransverse = config.isTransverse
      const series = config.series
      if (!series) {
        return
      }
      series.forEach(item => {
        const targetList = this.randerData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        const xData = []
        targetList.forEach(ftem => {
          seriesData.push(ftem.dValue)
          xData.push(ftem.sName)
          this.currentXboxTitle = ftem._sTitle
        })
        item.data = seriesData
        item.xData = xData
        // 支持渐变色
        if (item.itemStyle && item.itemStyle.hsColor) {
          var flage = false
          if (isTransverse) {
            flage = true
          }
          item.itemStyle.color = new this.$echarts.graphic.LinearGradient(
            flage ? 1 : 0, 0, 0, flage ? 0 : 1,
            [
              { offset: 0, color: item.itemStyle.hsColor[0] },
              { offset: 1, color: item.itemStyle.hsColor[1] }
            ]
          )
        }
        // 支持区域填充样式。
        if (item.areaStyle && item.areaStyle.hsColor) {
          item.areaStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item.areaStyle.hsColor[0] },
            { offset: 1, color: item.areaStyle.hsColor[1] }
          ])
        }
        // 这里显示showValue
        if (!item.label) {
          item.label = this.itemLabel
        }
        item.label.formatter = function(params) {
          const { seriesName, data, name } = params
          const target = sourceData.find(jtem => {
            return jtem.sSeries === seriesName && jtem.dValue === data && jtem.sName === name
          })
          return target.sShowValue
        }
      })
      // 如果要横向显示的话 就得设置yAxis
      if (config.isTransverse) {
        config.yAxis[0].data = series[0].xData
      } else {
        config.xAxis.data = series[0].xData
      }
      console.log(config)
      return config
    },
    dealWithSource_pie(config, sourceData) {
      this.pageSourceData = values(groupBy(sourceData, '_iPage'))
      if (this.setRanderDataTime === this.pageSourceData.length) {
        this.setRanderDataTime = 0
      }
      this.randerData = this.pageSourceData[this.setRanderDataTime]
      const series = config.series
      if (!series) {
        return
      }
      const legendDatas = []
      series.forEach(item => {
        const targetList = this.randerData.filter(jtem => {
          // const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        targetList.forEach(ftem => {
          // seriesData.push(ftem.dValue)
          seriesData.push({
            value: ftem.dValue,
            name: ftem.sName
          })
          legendDatas.push(ftem.sName)
          if (config.title) {
            config.title.text = ftem._sTitle
          } else {
            config.title = ''
          }
        })
        item.data = seriesData
      })
      config.legend.data = legendDatas
      return config
    },
    dealWithSource_radar(config, sourceData) {
      const series = config.series
      if (!series) {
        return
      }
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        targetList.forEach(ftem => {
          seriesData.push(ftem.dValue)
        })
        item.data = seriesData
      })
      return config
    },
    // 处理配置和原始数据
    dealWithSource_lineBar1(config, sourceData) {
      const isTransverse = config.isTransverse
      const series = config.series
      if (!series) {
        return
      }
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        const xData = []
        targetList.forEach(ftem => {
          seriesData.push(ftem.dValue)
          xData.push(ftem.sName)
        })
        item.data = seriesData
        item.xData = xData
        // 支持渐变色
        if (item.itemStyle && item.itemStyle.hsColor) {
          var flage = false
          if (isTransverse) {
            flage = true
          }
          item.itemStyle.color = new this.$echarts.graphic.LinearGradient(
            flage ? 1 : 0, 0, 0, flage ? 0 : 1,
            [
              { offset: 0, color: item.itemStyle.hsColor[0] },
              { offset: 1, color: item.itemStyle.hsColor[1] }
            ]
          )
        }
        // 支持区域填充样式。
        if (item.areaStyle && item.areaStyle.hsColor) {
          item.areaStyle.color = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: item.areaStyle.hsColor[0] },
            { offset: 1, color: item.areaStyle.hsColor[1] }
          ])
        }
        // 这里显示showValue
        if (!item.label) {
          item.label = this.itemLabel
        }
        item.label.formatter = function(params) {
          const { seriesName, data, name } = params
          const target = sourceData.find(jtem => {
            return jtem.sSeries === seriesName && jtem.dValue === data && jtem.sName === name
          })
          return target.sShowValue
        }
      })
      // 如果要横向显示的话 就得设置yAxis
      if (config.isTransverse) {
        config.yAxis[0].data = series[0].xData
      } else {
        config.xAxis.data = series[0].xData
      }
      return config
    },
    // 处理配置和原始数据
    dealWithSource_pie1(config, sourceData) {
      const series = config.series
      if (!series) {
        return
      }
      const legendDatas = []
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        targetList.forEach(ftem => {
          seriesData.push({ value: ftem.dValue, name: ftem.sName })
          legendDatas.push(ftem.sName)
        })
        item.data = seriesData
      })
      config.legend.data = legendDatas
      return config
    },
    dealWithSource_radar1(config, sourceData) {
      const series = config.series
      if (!series) {
        return
      }
      series.forEach(item => {
        const targetList = sourceData.filter(jtem => {
          return jtem.sSeries === item.name
        })
        const seriesData = []
        targetList.forEach(ftem => {
          seriesData.push(ftem.dValue)
        })
        item.data = seriesData
      })
      return config
    },
    drowEchart(data) {
      const copyData = JSON.parse(JSON.stringify(data))
      this.draw_complate_options(copyData)
    },
    // 传入完整的配置
    draw_complate_options(options) {
      if (this.chart) {
        this.chart.setOption(options, true)
        return
      }
      this.chart = this.$drawEcharts(this.elId, options)
    }

  }
}
</script>
<style scoped>
.innerStyle {
  width: 100%;
  height: 400px;
}
</style>
