<template>
  <div style='width:100%;height:100%;'>
    <div :id="elId"
         :style='style'></div>
      <el-dialog :close-on-click-modal=false
               title="配置"
               width='90%'
               :visible.sync="jsoneditorVisible">
      <jsoneditor v-if='jsoneditorVisible'
                  :complatData='complatData'
                  :saveConfigDataFun='saveConfigDataFun'
                  :jsoneditorData='jsoneditorData'
                  :dealWithSourceFun='dealWithSource'>
      </jsoneditor>
    </el-dialog>
  </div>
</template>

<script>
import uuidv1 from 'uuid/v1'
import jsoneditor from '../common/jsoneditor'
export default {
  name: 'hsPie',
  components: {
    jsoneditor
  },
  props: {
    height: {
      type: String,
      default: '100%'
    },
    width: {
      type: String,
      default: '100%'
    },
    margin: {
      type: String,
      default: '0 auto'
    },
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    saveConfigDataFun: {
      type: Function
    },
    complatData: {
      type: Array,
      default() {
        return []
      }
    },
    mock: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    allSourceData: {
      handler: function(newVal, oldVal) {
        this.drowEchart(newVal)
      },
      deep: true
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
        margin: this.margin
      }
    },
    jsoneditorData() {
      return {
        config: this.jsoneditorConfig,
        sourceData: this.jsoneditorSource
      }
    }
  },
  data() {
    return {
      elId: 'el1',
      option: {},
      chart: null,
      jsoneditorVisible: false, // 是否显示动态配置的弹框
      jsoneditorConfig: {}, // 配置
      jsoneditorSource: [], // 原始数据
      editOptions: {},
      config: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
          /* formatter: a => {//编辑器识别不了"x": "right",
            const msg = a.data.msg
            return `<div style="text-align: left;width: 100%;color: #BABAFF;font-size: 0.1rem">
                    类型:${msg.type}<br/>
                    产值:${msg.output_value}<br/>
                    产值占比:${msg.output_ratio}<br/>
                    日人均:${msg.per_value}<br/>
                    工时单价:${msg.price_per_hour}<br/>
                    </div>`
          }*/
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['测试1', '测试2']
        },
        color: ['#F5D423', '#47FE75', '#47FDFE', '#325AF0', '#8266F5', '#C566F5', '#F566B5', '#F56666', '#F58566', '#F5A623'],
        calculable: true,
        graphic: [
          { // 设置饼状图内部文字
            type: 'text',
            left: 'center', // 设置偏移量
            top: 180,
            z: 2
          }
        ],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['45%', '70%'],
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outer',
                formatter: params => {
                  return params.data.name
                }
              },
              labelLine: {
                show: false,
                length: 2
              }
            }
          },
          data: []
        }]
      },
      sourceData: [
        {
          name: '测试1',
          sName: '上衣',
          dValue: 30,
          msg: '测试1',
          sSeries: '访问来源',
          sLegendData: ''
        },
        {
          name: '测试2',
          sName: '裤子2',
          dValue: 25,
          msg: '测试2',
          sSeries: '访问来源',
          sLegendData: ''
        }]
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },
  mounted() {
    this.initMockData()
    this.showEditJsonDialog()
  },
  methods: {
    initMockData() {
      if (this.mock) {
        this.initMockPie()
      } else {
        this.drowEchart(this.allSourceData)
      }
    },
    // pie图的模拟数据
    initMockPie() {
      const data = {
        config: this.config,
        sourceData: this.sourceData
      }
      this.drowEchart(data)
    },
    // 弹出可编辑的弹框
    showEditJsonDialog() {
      const out = document.getElementById(this.elId)
      const that = this
      out.onmousedown = function(event) {
        //
        event.stopPropagation()
        if (event.shiftKey && event.altKey && !event.ctrlKey) {
          that.jsoneditorVisible = true
        }
      }
    },
    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)
    },
    // 处理配置和原始数据
    dealWithSource(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
    }

  }
}
</script>

<style>
</style>

