<template>
  <el-card>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
  </el-card>
</template>

<script>
import { pieChart } from "@/api/statics"
import { index } from "@/api/system/baseForm";
import * as echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    year: Date,
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      wxAreas: [
        "宜兴市",
        "惠山区",
        "新吴区",
        "梁溪区",
        "江阴市",
        "滨湖区",
        "锡山区",
      ],
      chart: null,
      data: { houseList:[], landList:[] },
    }
  },
  mounted() {
    this.getData().then(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    async getData () {
      const res = await pieChart({ year: this.year.getFullYear() })
      console.log(res)
      this.data = res;
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.setOption()
    },
    setOption () {
      this.chart.setOption({
        title: [
          {
            text: "房产资产",
            left: '20%'
          },
          {
            text: "土地资产",
            left: '70%'
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}m² ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
        },
        series: [
          {
            name: '房产资产',
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['25%', '50%'],
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true
              }
            },
            data: this.data.houseList
          },
          {
            name: '土地资产',
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['75%', '50%'],
            itemStyle: {
              borderRadius: 5
            },
            data: this.data.landsList
          }
        ]
      })
    }
  },
  watch: {
    year () {
      this.getData().then(() => {
        this.initChart()
      })
    }
  }
}
</script>
