import Vue from 'vue'

var vms = Vue.component("amplify-sbyxzt", {
    template: `
        <div>
            <div class="amplify-title-icon">
                <img src="http://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 class="amplify-content-pictrue" ref="warningPieChart"></div>
                            <div class="amplify-chart-gif amplify-chart-work-gif" v-if="typeDistributionData.length > 0"></div>
                        </div>  
                    </div>
                </div>
            </transition>
        </div>
    `,
    props: {

    },
    data() {
        return {
            show:false,
            typeDistributionData:[
                {
                    name:'运行',
                    value:'0'
                },
                {
                    name:'静止 ',
                    value:'0'
                }
            ],
        }
    },
    mounted(){

    },
    methods: {
        openAmplify(){
            this.show = true
            this.getDeviceInfoByProjectId()
        },
        closeAmplify(){
            this.show = false
        },
        closeAmplifyAll(e){
            if(e.target.className == 'amplify-fixed'){
                this.show = false
            }
        },
        //设备信息
        getDeviceInfoByProjectId(){
            var that = this;
            axios.post(requestUrl+"getDeviceInfoByProjectId?projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
            }).then(res => {
                let runNumber = 0;
                let notRunNumber = 0;
                let deviceCount = 0;
                for(let i = 0;i<res.data.length;i++){
                    let deviceNum = res.data[i].deviceNum;
                    let deviceId = res.data[i].deviceId;
                    let smartTerminalNumber = res.data[i].smartTerminalNumber;
                    if(smartTerminalNumber != ""){deviceCount++;}
                    axios.post("https://aqzg.makalu.cc/api/statistics/getTowerTorqueData",{"deviceId":smartTerminalNumber.substring(5,smartTerminalNumber.length)}, {
                    }).then(res => {
                        let deviceInfo = res.data.deviceInfo;
                        //监控设备
                        if(smartTerminalNumber != ""){
                            //运行、静止设备
                            if(deviceInfo == undefined || deviceInfo.angleData == undefined){
                                notRunNumber ++;
                            }else{
                                runNumber ++;
                            }
                        }
                        if(deviceId == 71259 || smartTerminalNumber == "aqzg-415"){
                            that.oneData={
                                rentalAngleOne:deviceInfo== undefined?0:deviceInfo.angleData,
                                rentalRangeOne:deviceInfo== undefined?0:deviceInfo.ampData,
                                rentalBrachiumOne:deviceInfo== undefined?0:deviceInfo.foreArmLength,
                                deviceNumOne:deviceNum,
                            }
                        }else if(deviceId == 71258 || smartTerminalNumber == "aqzg-411"){
                            that.twoData={
                                rentalAngleTwo:deviceInfo== undefined?0:deviceInfo.angleData,
                                rentalRangeTwo:deviceInfo== undefined?0:deviceInfo.ampData,
                                rentalBrachiumTwo:deviceInfo== undefined?0:deviceInfo.foreArmLength,
                                deviceNumTwo:deviceNum,
                            }
                        }else if(deviceId == 71257 || smartTerminalNumber == "aqzg-412"){
                            that.threeData={
                                rentalAngleThree:deviceInfo== undefined?0:deviceInfo.angleData,
                                rentalRangeThree:deviceInfo== undefined?0:deviceInfo.ampData,
                                rentalBrachiumThree:deviceInfo== undefined?0:deviceInfo.foreArmLength,
                                deviceNumThree:deviceNum,
                            }
                        }else if(deviceId == 71804 || smartTerminalNumber == "aqzg-413"){
                            that.fourData={
                                rentalAngleFour:deviceInfo== undefined?0:deviceInfo.angleData,
                                rentalRangeFour:deviceInfo== undefined?0:deviceInfo.ampData,
                                rentalBrachiumFour:deviceInfo== undefined?0:deviceInfo.foreArmLength,
                                deviceNumFour:deviceNum,
                            }
                        }else if(deviceId == 71803 || smartTerminalNumber == "aqzg-414"){
                            that.fiveData={
                                rentalAngleFive:deviceInfo== undefined?0:deviceInfo.angleData,
                                rentalRangeFive:deviceInfo== undefined?0:deviceInfo.ampData,
                                rentalBrachiumFive:deviceInfo== undefined?0:deviceInfo.foreArmLength,
                                deviceNumFive:deviceNum,
                            }
                        }else if(deviceId == 71802 || smartTerminalNumber == "aqzg-410"){
                            that.sixData={
                                rentalAngleSix:deviceInfo== undefined?0:deviceInfo.angleData,
                                rentalRangeSix:deviceInfo== undefined?0:deviceInfo.ampData,
                                rentalBrachiumSix:deviceInfo== undefined?0:deviceInfo.foreArmLength,
                                deviceNumSix:deviceNum,
                            }
                        }
                        if(parseInt(runNumber)+parseInt(notRunNumber) == deviceCount){
                            that.getTypeDistribution(runNumber,notRunNumber);
                        }
                    }).catch(err => {
                    })
                }
            }).catch(err => {
                console.log(err);
            })

        },
        //设备运行状态数据接口
        getTypeDistribution(runNumber,notRunNumber){
            var that = this;
            axios.post(requestUrl+"getRunningDynamics?deptId="+deptId+"&projectId="+JSON.parse(localStorage.getItem("data1")).jzgj, {
            }).then(res => {
                let data = res.data.data;

                let array = [];
                if(data.length > 0) {
                    array = data;
                } else {
                    array = [{
                        name:'运行',
                        value:'0'
                    },
                        {
                            name:'静止',
                            value:'0'
                        }];
                }
                console.log(array)
                let dataArray = [];
                for(let i = 0;i<array.length;i++){
                    if(array[i].name == "运行"){
                        dataArray.push({"name":"运行","value":parseInt(array[i].value)+parseInt(runNumber==undefined?0:runNumber)});
                    }else if(array[i].name == "静止"){
                        dataArray.push({"name":"静止","value":parseInt(array[i].value)+parseInt(notRunNumber==undefined?0:notRunNumber)});
                    }else {
                        dataArray.push({"name":array[i].name,"value":array[i].value});
                    }
                }
                console.log(dataArray)
                that.typeDistributionData = dataArray;
                this.getChartData()
            }).catch(err => {
            })
        },

        //数据图
        getChartData(){
            //品类金额占比 饼图
            var chChartPie = echarts.init(this.$refs.warningPieChart);
            this.echartPie(chChartPie,this.typeDistributionData)
        },
        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: "140",
                        textStyle: {
                            color: "#0dd2fd",
                            fontSize: 42,
                            fontWeight: "normal",
                            align: "center",
                            width: "300px",
                        },
                        subtextStyle: {
                            color: "#a5b5f0",
                            fontSize: 25,
                            fontWeight: "normal",
                            align: "center",
                        },
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b} <br/>{c} ({d}%)"
                    },
                    legend:  {
                        width:'100%',
                        left: "center",
                        right: "0",
                        bottom: "5",
                        //icon: "circle",
                        itemWidth: 25,
                        itemGap:52,
                        textStyle: {
                            fontSize: 60,
                            rich: {
                                name: {
                                    color: "#c3dbfd",
                                    padding: [10, 5, 30, 5],
                                    // align: 'right'
                                    // width: 60
                                    fontSize: 25,
                                },
                                percent: {
                                    color: "#18DB9F",
                                    fontSize: 16,
                                    padding: [0, 5, 0, 5],
                                    // align: 'right'
                                    fontSize: 25,
                                },
                            },
                        },
                        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: 10,
                                    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:{

    },

})