var vms = Vue.component("Company-amplify-sbyxdt", {
    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="position: relative;">
                                <div :style="{'height': height+'px'}" ref="warningPieCharts">
                     
                                </div>
                                <div class="company-amplify-chart-gif" v-if="typedata.length > 0" style="top: 75px;left: 345px;position: absolute"></div>
                            </div>
                            
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {
        businessdata:{
            type:Object
        }
    },
    data() {
        return {
            show:false,
            height:460,
            active:0,
            option:{},
            typedata:[]
        }
    },
    mounted(){
        console.log(this.businessdata)
    },
    methods: {
        openAmplify(){
            this.show = true
            this.getTypeDistribution()
        },
        closeAmplify(){
            this.show = false
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
            }
        },

        //设备运行动态
        getTypeDistribution(){
            var that = this
            axios.post(this.businessdata.requestUrl+"getRunningDynamics?deptId="+this.businessdata.deptId+"&projectId="+this.businessdata.projectIdStr, {
            }).then(res => {
                that.getDeviceList(res.data.data);
            }).catch(err => {
            })
        },
        //塔机运行状态
        getDeviceList(typeDistributionData){
            var that = this;
            axios.post("https://aqzg.makalu.cc/api/statistics/getDeviceList",{dept_id: 131}, {
            }).then(res => {
                let dataArray = [];
                let array = [
                    {
                        "name":"运行",
                        "value":0
                    },
                    {
                        "name":"静止",
                        "value":0
                    },
                    {
                        "name":"怠速",
                        "value":0
                    }
                ]
                for(let i = 0;i<array.length;i++){
                    let name = array[i].name;
                    //机械处获取的设备状态
                    for(let j = 0;j<typeDistributionData.length;j++){
                        //机械设备状态
                        let nameData =typeDistributionData[j].name;
                        if(name == "运行" && nameData == "运行"){
                            dataArray.push({"name":"运行","value":parseInt(typeDistributionData[j].value)+parseInt(res.data.length)});
                        }else if(name == "静止" && nameData == "静止"){
                            dataArray.push({"name":"静止","value":typeDistributionData[j].value});
                        }else if(name == "怠速" && nameData == "怠速"){
                            dataArray.push({"name":"怠速","value":typeDistributionData[j].value});
                        }
                    }
                }
                that.typedata = dataArray;
                console.log(that.typedata)
                this.getChartData()
            }).catch(err => {
            })
        },

        getChartData(){
            //品类金额占比 饼图

            var chChartPie = echarts.init(this.$refs.warningPieCharts);

            this.echartPie(chChartPie,this.typedata)
        },
        echartPie(chChart,chartData){
            let newPromise = new Promise((resolve) => {
                resolve()
            })

            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var total_datas = 0;
                var data = [];
                var legendData = [];
                var color = ['#4474fa','#52aef7','#2075ae']
                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);*/

                this.option =  {
                    title: {
                        text: total_datas,
                        subtext: "台",
                        x: "center",
                        y: "160",
                        textStyle: {
                            color: "#0dd2fd",
                            fontSize: 28,
                            fontWeight: "normal",
                            align: "center",
                            width: "200px",
                        },
                        subtextStyle: {
                            color: "#a5b5f0",
                            fontSize: 16,
                            fontWeight: "normal",
                            align: "center",
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} <br/>{c} ({d}%)"
                    },
                    legend:  {
                        width:'100%',
                        left: "center",
                        right: "0",
                        bottom: "5",
                        //icon: "circle",
                        itemWidth: 15,
                        itemGap:35,
                        textStyle: {
                            fontSize: 14,
                            rich: {
                                name: {
                                    color: "#c3dbfd",
                                    padding: [10, 5, 30, 5],
                                    // align: 'right'
                                    // width: 60
                                },
                                percent: {
                                    color: "#18DB9F",
                                    fontSize: 16,
                                    padding: [0, 5, 0, 5],
                                    // 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(2);
                            return "{name| " + name + "}\n{percent|" + res[0].value + "}{percent|" + percent + "%}";
                        },
                    },
                    series: [
                        {
                            name: "品类金额占比",
                            type: "pie",
                            center: ["50%", "40%"],
                            radius: ["42%", "60%"],
                            data: data,
                            label: {
                                show: false,
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 5,
                                    borderColor: "#051a36"
                                }
                            },

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

    },
    watch:{
        typedata: function (n,o) {

        }
    }

})