var vms = Vue.component("Company-amplify-jypx", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="https://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.png"  @click="openAmplify">
            </div>
            <transition name="el-zoom-in-top">
                <div class="amplify-fixed" v-show="show"  style="display: none" @click="closeAmplifyAll">
                    <div class="amplify-max">
                        <div class="amplify-title">
                            <div>教育培训</div>
                            <div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
                        </div>   
                        <div class="amplify-content">
                            <!--内容区域-->  
                            
                            <div style="padding: 50px 0 ;">
                                 <div style="position: relative">
                                    <div :style="{'height': height+'px'}" ref="warningPieChart">
                         
                                    </div>
                                    <div class="amplify-chart-gif amplify-chart-overview-gif" style="top: 128px;left: 128px" v-if="typedata.length > 0"></div>
                                </div>
                            </div>
                            
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {
        projectid:{
            type:Array
        }
    },
    data() {
        return {
            show:false,
            height:450,
            typedata:[
                { name:'三级安全教育', value:'0' },
                { name:'应急演练', value:'0' },
                { name:'班前讲话', value:'0' },
                { name:'专项培训', value:'0' },
            ],
            text:"培训次数",
            //公司级下所有项目
            projectDataList:[]
        }
    },
    created(){


    },
    mounted(){

    },
    methods: {
        openAmplify(){
            this.show = true
            this.getJYPXTimes()

        },
        closeAmplify(){
            this.show = false
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
            }
        },

        // projectClick(id){
        //
        //     /**
        //      * 若让公司级页面只显示项目级别数据则将使用以下代码
        //      */
        //     if(id != undefined) {
        //         var data  =JSON.parse(localStorage.getItem("projectList")).filter(item=>item.type == 2);
        //         var list2 = []
        //         for (let i = 0; i <data.length ; i++) {
        //             if(data[i].aqzg == id) {
        //                 list2.push(data[i]);
        //                 break;
        //             }
        //         }
        //         this.projectDataList = list2
        //         this.todayProjetNum = list2.length;
        //         for (let i = 0; i < list2.length ; i++) {
        //             if(list2[i].aqzg == id){
        //                 localStorage.setItem("data",JSON.stringify(list2[i]))
        //                 this.init()
        //                 break;
        //             }
        //         }
        //     }
        //
        // },

        //获取培训次数
        getJYPXTimes() {
            //1.获取三级安全教育次数
            //2.获取应急演练次数
            //3.获取专项培训次数
            //4、班前讲话

            var list = this.projectid;


            if(list.length > 0) {
                var projectList= list.map((item) =>item.id)
                console.log(projectList)
                var temp = projectList.join(",");
                console.log(temp)
                axios.post("/api/building/listCultivateByProjectId?projectList="+temp).then(res => {

                    if(res.data.code == 200) {
                        var data = res.data.data
                        this.typedata =[
                            { name:'三级安全教育', value:data.sjaq },
                            { name:'应急演练', value:data.yjyl},
                            { name:'班前讲话', value:data.bqjh},
                            { name:'专项培训', value:data.zxpx},
                        ]
                        this.getChartData()
                    }
                }).catch(res=>{
                    console.log(res)})
            } else {
                this.typedata =[
                    { name:'三级安全教育', value:0 },
                    { name:'应急演练', value:0},
                    { name:'班前讲话', value:0},
                    { name:'专项培训', value:0},
                ]
            }

        },


        getChartData(){
            //品类金额占比 饼图
            var chChartPie = echarts.init(this.$refs.warningPieChart);
            this.echartPie(chChartPie,this.typedata)
        },
        echartPie(chChart,chartData){
            var that = this
            let newPromise = new Promise((resolve) => {
                resolve()
            })

            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var total_datas = 0;
                var data = [];
                var legendData = [];
                var color = ['#4974ff','#52aef7','#6863d7','#1d5d89','#20e6ff','#67feef']
                for (let i = 0; i <chartData.length ; i++) {
                    total_datas += Number(chartData[i].value);
                    legendData.push(chartData[i].name)
                    data.push(
                        {
                            value: chartData[i].value,
                            name:  chartData[i].name,
                            itemStyle: {
                                normal: {
                                    //颜色渐变
                                    color: color[i]
                                },
                            },
                        },
                    )
                }
                /*     let total = chartData.reduce((a, b) => {
                         return a + b.value;
                     }, 0);*/

                let legendOption = {
                    top: "center",
                    orient: "vertical",
                    icon: "circle",
                    itemWidth: 24,
                    itemHeight: 24,
                    itemGap: 32,
                    textStyle: {
                        fontSize: 25,
                        rich: {
                            name: {
                                color: "#c3dbfd",
                                padding: [20, 10, 20, 10],
                                // align: 'right'
                                // width: 60
                                fontSize: 25,
                            },
                            percent: {
                                color: "#18DB9F",
                                fontSize: 25,
                                padding: [0, 10, 0, 10],
                                // align: 'right'
                            },
                        },
                    },
                    formatter: function (name) {
                        let res = chartData.filter((v) => v.name === name);
                        let percent = total_datas == 0 ?0:(((res[0].value * 100) / total_datas).toFixed(1));
                        return "{name| " + name + "}\n{percent|" + res[0].value + "}{percent|" + percent + "%}";
                    },
                };
                this.option =  {
                    title: {
                        text: total_datas,
                        subtext: this.text,
                        x: "185",
                        y: "189",
                        textStyle: {
                            color: "#0dd2fd",
                            fontSize: 36,
                            fontWeight: "bold",
                            align: "center",
                            width: "200px",
                        },
                        subtextStyle: {
                            color: "#a5b5f0",
                            fontSize: 25,
                            align: "center",
                        },
                    },
                    tooltip: {
                        show: false,
                        trigger: 'item',
                        formatter: "{b} <br/>{c} ({d}%)"
                    },
                    legend: [
                        {
                            right: 20,
                            data: legendData,
                            align: "left",
                            ...legendOption,
                        },
                    ],

                    series: [
                        {
                            name: "品类金额占比",
                            type: "pie",
                            center: ["25%", "50%"],
                            radius: ["46%", "63%"],
                            data: data,
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 10,
                                    borderColor: "#051a36"
                                }
                            },

                        },
                        {
                            name: "外边框",
                            type: "pie",
                            clockWise: false, //顺时加载
                            hoverAnimation: false, //鼠标移入变大
                            center: ["25%", "50%"],
                            radius: ["70%", "70%"],
                            label: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: [
                                {
                                    value: 9,
                                    name: "",
                                    itemStyle: {
                                        normal: {
                                            borderWidth: 3,
                                            borderColor: "#152c65",
                                        },
                                    },
                                },
                            ],
                        },
                    ],
                }
                chChart.setOption(this.option);
                window.onresize = chChart.resize;

                chChart.off('click')

                chChart.on('click', function (params) {
                    for(let i= 0;i<chartData.length;i++){
                        if(params.name == chartData[i].name){
                            that.$emit('ledger',chartData[i]);
                            break
                        }
                    }
                })
            })
        },
    },
    watch:{

    },

})