<template>
  <div style='width:100%;height:100%;'>
    <div :id="elId"
         :style='style'></div>
    <jsoneditor v-model='jsoneditorVisible'
                :elInfo='params'
                :clickFunc="clickFunc"
                :dblclickFunc="dblclickFunc"
                :complatData='complatData'
                :saveConfigDataFun='saveConfigDataFun'
                :jsoneditorData='jsoneditorData'
                :dealWithSourceFun='dealWithSource'>
    </jsoneditor>
  </div>
</template>

<script>
import uuidv1 from 'uuid/v1'
import jsoneditor from '../commonC/jsoneditor'
export default {
  name: 'hsRadar',
  components: {
    jsoneditor
  },
  props: {
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    saveConfigDataFun: {
      type: Function
    },
    complatData: {
      type: Array,
      default() {
        return []
      }
    },
    clickFunc: {
      type: Function
    },
    dblclickFunc: {
      type: Function
    },
    mock: {
      type: Boolean,
      default: false
    },
    params: {
      type: Object,
      default() {
        return {
          el: 'hsRadar',
          page: 'page1',
          position: 'table1'
        }
      }
    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        console.log(newVal)
        this.drowEchart(newVal)
      },
      deep: true
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    },
    jsoneditorData() {
      return {
        config: this.jsoneditorConfig,
        sourceData: this.jsoneditorSource
      }
    },
    title() {
      const title = this.params.page + '页面' + this.params.position + '配置'
      return title
    }
  },
  data() {
    return {
      elId: 'el1',
      option: {},
      chart: null,
      jsoneditorVisible: false, // 是否显示动态配置的弹框
      jsoneditorConfig: {}, // 配置
      jsoneditorSource: [], // 原始数据
      editOptions: {},
      config: {
        grid: {
          left: '20',
          right: '10',
          bottom: '2',
          top: '20',
          containLabel: true
        },
        title: {
          text: '面料（米）',
          bottom: '10px',
          left: 'center',
          textStyle: {
            fontSize: 20,
            color: '#A48463',
            fontFamily: 'myFont',
            fontWeight: 400
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        radar: [{
          triggerEvent: true,
          shape: 'circle',
          center: ['50%', '50%'],
          radius: '55%',
          splitNumber: 4,
          nameGap: 35,
          name: {
            textStyle: {
              fontFamily: 'myFont',
              color: '#A48463',
              fontSize: '20'
            }
          },
          label: { // 坐标轴文本标签，详见axis.axisLabel
            show: true,
            textStyle: {
              color: '#FFC774' // 坐标轴刻度文字的样式
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: 'rgba(167,134,99,0.9)' // 图表背景网格的颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: '#A48463' // 图表背景网格线的颜色
            }
          },
          indicator: [{
            text: '来料',
            max: 10000
          },
          {
            text: '裁剪入库',
            max: 10000
          },
          {
            text: '裁剪下线',
            max: 10000
          },
          {
            text: '已裁',
            max: 10000
          },
          {
            text: '已领',
            max: 10000
          }
          ]
        }],
        calculable: true,
        series: [{
          name: '雷达图',
          type: 'radar',
          data: [],
          itemStyle: {
            normal: {
              lineStyle: {
                width: 1,
                color: '#FFC774' // 图表中各个图区域的边框线颜色
              },
              areaStyle: {
                type: 'default',
                color: '#6495ED',
                opacity: 0.4
              }
            }
          },
          label: {
            normal: {
              show: true,
              position: 'outer',
              textStyle: {
                color: '#6495ED',
                fontSize: 18
              }
            }
          }
        }]
      },
      sourceData: [{
        sSeries: '雷达图',
        dValue: [10000, 4000, 3000, 3100, 4000]
      }],
      outBoxDom: null
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },
  destroyed() {
    this.outBoxDom.removeEventListener('mousedown', this.boxEventMouse)
    this.chart = null
  },
  beforeDestroy() {
    clearInterval(this.timer)// 清除定时器
    if (this.chart) {
      this.chart.dispose()
    }
    this.chart = null
    this.timer = null
  },
  mounted() {
    this.initMockData()
    this.showEditJsonDialog()
  },
  methods: {
    initMockData() {
      if (this.mock) {
        this.initMockRadar()
      } else {
        // this.initMockRadar()
        this.drowEchart(this.allSourceData)
      }
    },
    // 雷达图的模拟数据
    initMockRadar() {
      const data = {
        config: this.config,
        sourceData: this.sourceData
      }
      this.drowEchart(data)
    },
    boxEventMouse(event) {
      const that = this
      event.stopPropagation()
      if (event.shiftKey && event.altKey && !event.ctrlKey) {
        that.jsoneditorVisible = true
        that.$store.commit('set_pause_status', true)
      }
    },
    // 弹出可编辑的弹框
    // 弹出可编辑的弹框
    showEditJsonDialog() {
      this.outBoxDom = document.getElementById(this.elId)
      this.outBoxDom.addEventListener('mousedown', this.boxEventMouse)
    },
    drowEchart(data) {
      const source = JSON.parse(JSON.stringify(data))
      this.jsoneditorConfig = source.config
      this.jsoneditorSource = source.sourceData
      const { config, sourceData } = JSON.parse(JSON.stringify(data))
      if (!Object.keys(config).length) return
      this.dealWithSource(config, sourceData)
      this.editOptions = { config, sourceData }
      this.draw_complate_options(config)
    },
    // 传入完整的配置
    draw_complate_options(options) {
      // 重新绘制的情况
      if (this.chart) {
        this.chart.setOption(options, true)
        return
      }
      this.chart = this.$drawEcharts(
        this.elId,
        options,
        params => { this.clickFunc(params) },
        params => { this.dblclickFunc(params) },
      )
    },
    // 处理配置和原始数据
    dealWithSource(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
    }
  }
}

</script>

<style>
</style>
