<template>
    <div :id="pieId" class="myPie"></div>
</template>

<script>
    export default {
        name: 'BasePie',
        props: ['pieId'],
        data() {
            return {
                pieData: []
            }
        },
        methods: {


            drawLine(data) {
                let that = this
                // 基于准备好的dom，初始化echarts实例
                let myPie = this.$echarts.init(document.getElementById(this.pieId), 'chalk')

                // 指定图表的配置项和数据
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    calculable: true,
                    roseType: true,
                    series: {
                        name: that.$t('totalAnalysis.ka_title1'),
                        type: 'pie',
                        radius: [40, 140],
                        center: ['45%', '50%'],
                        max: 100, // for funnel
                        sort: 'ascending', // for funnel
                        data: data
                    }
                }

                // 绘制图表
                myPie.setOption(option)

                window.addEventListener('resize', function() {
                    myPie.resize()
                })
            }
        },
        mounted() {
            if (this.getPieData) {
                console.log(this.getPieData)
                    if (this.getPieData.pointList.length) {
                            let pointList = this.getPieData.pointList
                            let valList = this.getPieData.per
                            let arr = []
                            pointList.forEach((item, index) => {
                                let o = {}
                                o.name = item
                                o.value = valList[index].replace('%', '')
                                arr.push(o)
                            })
                            this.drawLine(arr)
                    }
                    
                    
            }
        },
        computed: {
            // 获取最新知识点占比饼图数据
            getPieData() {
                let curSubjectIndex = this.$store.state.totalAnalysis.analysisJson.subjects.map(i => i.name).indexOf(this.$store.state.totalAnalysis.currentSubject)
                return this.$store.state.totalAnalysis.analysisJson.pointLevelKey[curSubjectIndex].pointKey
            }
        },
        watch: {
            getPieData: {
                deep: true,
                handler(val) {
                    // this.drawLine(newName)
                    console.log(val)
                    let pointList = val.pointList
                    let valList = val.per
                    let arr = []
                    pointList.forEach((item, index) => {
                        let o = {}
                        // 测试使用 后面需要接口换取名称
                        o.name = item
                        o.value = valList[index]
                        arr.push(o)
                    })
                    this.drawLine(arr)
                }
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .myPie {
        width: 100%;
        height: 450px;
        margin: 0 auto;
        display: block;
    }
</style>
