<template>
  <div class="container normal-panel">
    <p class="normal-margin normal-title">提报数据</p>
    <div style="width:800px;margin: 0 auto" id="containerSubmit"></div>
  </div>
</template>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
</style>

<script>
// import * as G2 from '@antv/g2';  
import { Pie } from '@antv/g2plot';
export default {
  
  props:['pieDownloadData'],
  data () {
    return {
      piePlot () {},
    }
  },
  
  methods:{
    renderBar () {
      this.piePlot = new Pie('containerSubmit', {
        appendPadding: 10,
        data:[],
        angleField: 'num',
        colorField: 'type',
        color: ['#38C2F6', '#5D76E4'],
        legend: {
          position: 'leftTop'
        },
        radius: 0.9,
        label: {
          type: 'spider',
          labelHeight: 28,
          content: '{name}\n{percentage}',
          style: {
            fontSize: 14,
            textAlign: 'center',
          },
        },
        interactions: [{ type: 'element-active' }],
      });
      this.piePlot.render();
      this.piePlot.on('plot:click', (evt) => {
        const { target } = evt;
      });
    },
    async getSubmitData () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.submitedit.statistics.agent",
        "method": "getData",
        "content": {
            "sat_submiteditmodelid": this.$route.query.id
        }
      })
      this.pieSubmitData = [{type:'已提报',num:res.data.submitNum},{type:'未提报',num:res.data.unSubmitNum}]
      this.piePlot.changeData(this.pieSubmitData)
    },

  },
  mounted() {
    this.renderBar()
    this.getSubmitData()
  }
}
</script>