var vms = Vue.component("Company-amplify-aqgl", {
    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">
                            <!--内容区域-->  
                            
                            <!--tab栏切换-->
                            <div class="amplify-survey_title" style="padding: 20px 15px">
                                <div class="survey_title_btn">
                                    <div :class="overview==0?'amplify-survey_title_btn_min active':'amplify-survey_title_btn_min'" @click="onClickoOverview(0)">基坑监测</div>
                                </div>
                                <div class="survey_title_btn">
                                    <div :class="overview==1?'amplify-survey_title_btn_min active':'amplify-survey_title_btn_min'" @click="onClickoOverview(1)">塔机总数</div>
                                </div>
                                <div class="survey_title_btn">
                                    <div :class="overview==2?'amplify-survey_title_btn_min active':'amplify-survey_title_btn_min'" @click="onClickoOverview(2)">爬架监测</div>
                                </div>
                            </div>
                            
                            <div class="czz-max" v-if="overview == 0">
                            <div class="amplify-czz-number"  style="padding:30px 20px;">
                                <div class="amplify-czz-number-content">
                                    <div class="amplify-czz-number-img czz-number-img-blue">
                                        <img src="/images/circle_icon_1.png">
                                    </div>
                                    <div class="amplify-survey_content_number">
                                        <p>监测点位数</p>
                                        <div class="amplify-survey_content_value"><span v-html="deviceTtotal"></span> 个</div>
                                    </div>
                                </div>
                                <div class="amplify-czz-number-content">
                                    <div class="amplify-czz-number-img czz-number-img-green">
                                        <img src="/images/circle_icon_2.png">
                                    </div>
                                    <div class="amplify-survey_content_number">
                                        <p>在线点位数</p>
                                        <div class="amplify-survey_content_value survey_content_value_color_green"><span v-html="zxDeviceTtotal"></span> 个</div>
                                    </div>
                                </div>
                            </div>
<!--                                     <certificate-bar-chart :data="certificateData" :height="160" ></certificate-bar-chart>-->

                                 <div :style="{'height': height+'px'}" ref="charts"></div>

                        </div>
                            <div class="czz-max" v-if="overview == 1">
                                <div class="amplify-czz-number" style="padding:30px 20px;" v-if="overview == 1">
                                    <div class="amplify-czz-number-content">
                                        <div class="amplify-czz-number-img czz-number-img-blue">
                                            <img src="/images/survey_icon_6.png">
                                        </div>
                                        <div class="amplify-survey_content_number">
                                            <p>塔机总数</p>
                                            <div class="amplify-survey_content_value"><span v-cloak>{{towerCount}}</span> 组</div>
                                        </div>
                                    </div>
                                    <div class="amplify-czz-number-content" @click="getCertInfoList(2)">
                                        <div class="amplify-czz-number-img czz-number-img-green">
                                            <img src="/images/circle_icon_9.png">
                                        </div>
                                        <div class="amplify-survey_content_number">
                                            <p>监控总数</p>
                                            <div class="amplify-survey_content_value survey_content_value_color_green"><span v-cloak>{{jkTowerCount}}</span> 组</div>
                                        </div>
                                    </div>
                                </div>
                                <certificate-bar-chart :data="certificateData" :height="160"></certificate-bar-chart>
                            </div>
                            <div class="czz-max" v-if="overview == 2">
                               <div class="amplify-czz-number"  style="padding:30px 20px;">
                                    <div class="amplify-czz-number-content">
                                        <div class="amplify-czz-number-img czz-number-img-blue">
                                            <img src="/images/circle_icon_1.png">
                                        </div>
                                        <div class="amplify-survey_content_number">
                                            <p>监测机位数</p>
                                            <div class="amplify-survey_content_value"><span v-html="deviceTotalPJ"></span> 个</div>
                                        </div>
                                    </div>
                                    <div class="amplify-czz-number-content">
                                        <div class="amplify-czz-number-img czz-number-img-green">
                                            <img src="/images/circle_icon_2.png">
                                        </div>
                                        <div class="amplify-survey_content_number">
                                            <p>在线机位数</p>
                                            <div class="amplify-survey_content_value survey_content_value_color_green"><span v-html="zxDeviceTotalPJ"></span> 个</div>
                                        </div>
                                    </div>
                                </div>
                                <certificate-bar-chart :data="certificateData" :height="160" ></certificate-bar-chart>
                           </div>  
                    </div>
                   </div>
                </div>
            </transition>
        </div>
    `,
    props: {
        projectid:{
            type:Array
        }
    },
    data() {
        return {
            show:false,
            overview:0,
            certificateData:[
                {
                    text:"在线数量",
                    value:0
                },{
                    text:"离线数量",
                    value:0
                }
            ],
            height:160,
            option1:{},
            //爬架监测
            deviceTotalPJ:0,
            zxDeviceTotalPJ:0,
            pjCertificateData:[
                {
                    text:"在线数量",
                    value:0
                },{
                    text:"离线数量",
                    value:0
                }
            ],
            //基坑监测
            deviceTtotal:0,
            zxDeviceTtotal:0,
            jkCertificateData:[
                {
                    text:"在线数量",
                    value:0
                },{
                    text:"离线数量",
                    value:0
                }
            ],
            //塔机总数
            towerCount:0,
            jkTowerCount:0,
            tjCertificateData:[
                {
                    text:"在线数量",
                    value:0
                },{
                    text:"离线数量",
                    value:0
                }
            ],
        }
    },
    mounted(){
        console.log(this.projectid)
    },
    methods: {
        openAmplify() {
            this.show = true
            this.getDeepExcavation()
            this.getDeepExcavationPJ()
            this.getDeviceSourceCensus()
        },
        closeAmplify() {
            this.show = false
        },
        closeAmplifyAll(e) {
            if (e.target.className == 'amplify-fixed') {
                this.show = false
            }
        },

        //安全监测切换
        onClickoOverview(n) {
            this.overview = n
            if (n == 0) {
                this.certificateData = this.jkCertificateData
                this.getDeepExcavation()
            } else if (n == 1) {
                this.certificateData = this.tjCertificateData;
            } else {
                this.certificateData = this.pjCertificateData;
            }
        },

        //基坑监测
        getDeepExcavation() {
            this.jkCertificateData = [{text: "在线数量", value: 0}, {text: "离线数量", value: 0}];
            var deviceTtotal = 0;
            var zxDeviceTtotal = 0;
            var projectList = this.projectid;
            var chenjiang = 0;
            var zxchenjiang = 0;
            var qingxie = 0;
            var zxqingxie = 0;
            var yingli = 0;
            var zxyingli = 0;
            if (projectList.length > 0) {
                for (let i = 0; i < projectList.length; i++) {
                    axios.post("https://aqzg.makalu.cc/weixin/structProjectSensorInfo/select/sensorInfo?projectId=" + projectList[i].aqzg + "&sensorType=4", {}).then(res => {
                        if (res.data.code == 200) {
                            var data = res.data.data
                            deviceTtotal += data.length
                            for (let j = 0; j < data.length; j++) {
                                if (data[j].status != 2) {
                                    zxDeviceTtotal += 1
                                }
                            }
                            data.map(x => {
                                x.state = true;
                                if (x.sensorType == 'CollWeiyiPoint') {
                                    chenjiang++;
                                    if (x.status != 2) {
                                        zxchenjiang++;
                                    }
                                } else if (x.sensorType == 'CollQingxiePoint') {
                                    qingxie++;
                                    if (x.status != 2) {
                                        zxqingxie++;
                                    }
                                } else if (x.sensorType == 'YingLi') {
                                    yingli++;
                                    if (x.status != 2) {
                                        zxyingli++;
                                    }
                                }
                                return x
                            })
                        }
                        var zxTotalCount = zxchenjiang + zxqingxie + zxyingli;
                        var allTotalCount = chenjiang + qingxie + yingli;
                        var lxTotalCount = allTotalCount - zxTotalCount;
                        var certificateData = [];
                        certificateData.push({text: "在线数量", value: zxTotalCount})
                        certificateData.push({text: "离线数量", value: lxTotalCount})
                        this.deviceTtotal = deviceTtotal;
                        this.zxDeviceTtotal = zxDeviceTtotal;
                        this.jkCertificateData = certificateData;
                        if (this.overview == 0) {
                            this.certificateData = this.jkCertificateData
                        }
                        this.getChartData()
                    })


                }
            } else {
                this.deviceTtotal = deviceTtotal;
                this.zxDeviceTtotal = zxDeviceTtotal;
            }
        },
        //塔机监测
        getDeviceSourceCensus() {
            var certificateData = [];
            certificateData.push({text: "在线数量", value: 0})
            certificateData.push({text: "离线数量", value: 0})
            this.tjCertificateData = certificateData;
            var projectList = this.projectid;
            var towerToalCount = 0;
            var jkTowerCount = 0;
            var zxTotalCount = 0
            if (projectList.length > 0) {
                for (let i = 0; i < projectList.length; i++) {
                    if (projectList[i].aqzg != '' && projectList[i].aqzg != null) {
                        axios.post("https://aqzg.makalu.cc/api/statistics/getDeviceSourceCensus", {
                            "projectId": projectList[i].aqzg
                        }).then(res => {
                            var data = res.data
                            towerToalCount += data.total;
                            jkTowerCount += data.jkTotal;
                            zxTotalCount += data.zxTotal;
                            this.towerCount = towerToalCount;
                            this.jkTowerCount = jkTowerCount;
                            certificateData = [];
                            certificateData.push({text: "在线数量", value: zxTotalCount})
                            certificateData.push({text: "离线数量", value: towerToalCount - zxTotalCount})
                            this.tjCertificateData = certificateData;
                            if (this.overview == 1) {
                                this.certificateData = this.tjCertificateData;
                            }
                        })
                    }
                }
            } else {
                this.towerCount = towerToalCount;
                this.jkTowerCount = jkTowerCount;
            }
        },
        //爬架监测
        getDeepExcavationPJ() {
            this.pjCertificateData = [{text: "在线数量", value: 0}, {text: "离线数量", value: 0}];
            var deviceTotalPJ = 0;
            var zxDeviceTotalPJ = 0;
            var projectList = this.projectid;
            if (projectList.length > 0) {
                for (let i = 0; i < projectList.length; i++) {
                    if (projectList[i].aqzg != '' && projectList[i].aqzg != null) {
                        axios.post(`/screen/api/getDeviceBaseInfo?projectId=` + projectList[i].aqzg + `&drawId=7053550232834936832`).then(res => {
                            let result = res.data
                            if (result.code == 200) {
                                let data = result.data
                                //监控设备
                                deviceTotalPJ += data.length
                                zxDeviceTotalPJ += data.filter(item => item.status != '2').length
                            }
                            this.deviceTotalPJ = deviceTotalPJ;
                            this.zxDeviceTotalPJ = zxDeviceTotalPJ;
                            this.pjCertificateData = [{text: "在线数量", value: zxDeviceTotalPJ}, {
                                text: "离线数量",
                                value: deviceTotalPJ - zxDeviceTotalPJ
                            }];
                            if (this.overview == 2) {
                                this.certificateData = this.pjCertificateData;
                            }
                        })
                    }
                }
            } else {
                this.deviceTotalPJ = deviceTotalPJ;
                this.zxDeviceTotalPJ = zxDeviceTotalPJ;

            }

        },

        getChartData(){
            // let chChart =  echarts.getInstanceByDom(this.$refs.charts)
            let chChart =  echarts.init(this.$refs.charts)
            //品类金额占比 饼图
            // if(chChart == null){
            //     chChart = echarts.init(this.$refs.chart);
            // }
            this.echart(chChart,this.certificateData)
        },
        echart(chChart,chartData){
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                var value = []
                var text = []
                var total = 0
                var bgd = []
                for (let i = 0; i < chartData.length; i++) {
                    value.push(chartData[i].value)
                    text.push(chartData[i].text)
                    bgd.push(100)
                    total += chartData[i].value
                }

                var prop = []
                for (let j = 0; j < value.length; j++) {
                    if(total != 0) {
                        prop.push((value[j]/total * 100).toFixed(1))
                    } else {
                        prop.push(0.0)
                    }

                }

                this.option1 = {
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "-10%",
                        top: "2%",
                        containLabel: true,
                    },
                    xAxis: {
                        show: false,
                        type: "value",
                    },
                    yAxis: [
                        {
                            type: "category",
                            inverse: true,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#cbdaff",
                                    fontSize: "14",
                                },
                            },
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            data: text,
                        },
                        {
                            type: "category",
                            inverse: true,
                            axisTick: "none",
                            axisLine: "none",
                            show: true,
                            axisLabel: {
                                textStyle: {
                                    color: "#cbdaff",
                                    fontSize: "16",
                                },
                                formatter: function(params,i){
                                    var text = "{a|" + value[i] + "}{a|   "+ prop[i]+ "%}";
                                    return text;
                                },
                                rich: {
                                    a: {
                                        fontSize: '16px',
                                        color: "#cbdaff",
                                    },
                                },
                            },
                            data: prop,
                        },
                    ],
                    series: [
                        {
                            type: "bar",
                            zlevel: 1,
                            itemStyle: {
                                normal: {
                                    color: "#6ab9fe",
                                },
                            },
                            barWidth: 8,
                            data: prop,
                        },
                        {
                            type: "bar",
                            barWidth: 8,
                            barGap: "-100%",
                            data: bgd,
                            itemStyle: {
                                normal: {
                                    color: "rgba(24,31,68,1)",
                                },
                            },
                        },
                    ],
                };

                chChart.setOption(this.option1);
                window.onresize = chChart.resize;
            })
        },

    },
    watch:{

    },

})