<template>
  <!-- 分布统计 -->
  <div class="distributionChart">
    <div v-for="(item, index) in charts" :key="index" :ref="item.name" class="pieChart" />
  </div>
</template>

<script>
import ChartOption from './module.js'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      charts: [
        new ChartOption('chart1'),
        new ChartOption('chart2'),
        new ChartOption('chart3'),
        new ChartOption('chart4')
      ]
    }
  },
  watch: {
    chartData: {
      handler(nVal, oVal) {
        console.log(nVal, 'watch')
        this.chartFns1(this.charts[0].chart, nVal.cityPeople)
        this.chartFns2(this.charts[1].chart, nVal.newOlds)
        this.chartFns3(this.charts[2].chart, nVal.terminals)
        this.chartFns4(this.charts[3].chart, nVal.newOlds)
      },
      deep: true
    }
  },
  mounted() {
    this.charts.forEach((item) => {
      this.initChart(item)
    })
    this.chartFns1(this.charts[0].chart, this.chartData.cityPeople || [])
    this.chartFns2(this.charts[1].chart, this.chartData.newOlds || [])
    this.chartFns3(this.charts[2].chart, this.chartData.terminals || [])
    this.chartFns4(this.charts[3].chart, this.chartData.newOlds || [])
  },
  methods: {
    initChart(chartObj) {
      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name][0])
      chartObj.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 70,
            lineStyle: {
              color: '#333'
            }
          }
        }
      })
    },
    chartFns1(chart, data) {
      if (!data || !data.length) {
        data = [ { name: '暂无数据', value: 0 } ]
      }
      chart.setOption({
        title: {
          text: '省份分布',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD', '#48B9C1', '#A27DE2', '#32C0D6'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // radius: ["50", "40"],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -120],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    },
    chartFns2(chart, data) {
      if (!data || !data.length) {
        data = [ { name: '暂无数据', value: 0 } ]
      }
      chart.setOption({
        title: {
          text: '访问类型',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    },
    chartFns3(chart, data) {
      if (!data || !data.length) {
        data = [ { name: '暂无数据', value: 0 } ]
      }
      chart.setOption({
        title: {
          text: '终端分布',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    },
    chartFns4(chart, data) {
      if (!data || !data.length) {
        data = [ { name: '暂无数据', value: 0 } ]
      }
      chart.setOption({
        title: {
          text: '操作系统情况',
          x: 'center',
          y: 'bottom'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.distributionChart {
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;

	.pieChart {
		width: 50%;
		height: 300px;
	}
}
</style>
