<template>
    <dv-loading v-if="!showPage" style="width: 100%;height: 100%;" class="the-loading">Loading...</dv-loading>
    <div v-else class="reconnaissance">
        <div class="reconnaissance-left">
            <div class="reconnaissance-left-top">
                <item-title :title="'踏勘完成统计'"></item-title>
                
                <test-echarts :optionData="leftTopOption" class="reconnaissance-left-top__bar"></test-echarts>

                <!-- <dv-charts :option="leftTopOption" class="reconnaissance-left-top__bar" /> -->
            </div>
            <div class="reconnaissance-left-bottom">
                <item-title :title="'电业人数配合'"></item-title>
                <test-echarts :optionData="leftBottomOption" class="reconnaissance-left-bottom__bar"></test-echarts>

                <!-- <dv-charts :option="leftBottomOption" class="reconnaissance-left-bottom__bar" /> -->
            </div>
        </div>
        <div class="reconnaissance-center">
            <div class="reconnaissance-center-top">
                <item-title :title="'踏勘点位情况统计'"></item-title>
                <div class="reconnaissance-center-top-num parent">
                    <div class="div1">
                        <span>总点位</span><span class="blue">{{ centerData.zongdianwei }}</span>
                    </div>
                    <div class="div2">
                        <span>已采集</span><span class="yicaiji">{{ centerData.yicaiji }}</span>
                    </div>
                    <div class="div3">
                        <span>未采集</span><span class="weicaiji">{{ centerData.weicaiji }}</span>
                    </div>
                    <div class="div4">
                        <span>利旧</span><span class="yicaiji">{{ centerData.lijiu }}</span>
                    </div>
                    <div class="div5">
                        <span>新建</span><span class="yicaiji">{{ centerData.xinjian }}</span>
                    </div>
                    <div class="div6">
                        <span>无电源</span><span class="weicaiji">{{ centerData.wudianyuan }}</span>
                    </div>
                    <div class="div7">
                        <span>图纸不符</span><span class="weicaiji">{{ centerData.tuzhibufu }}</span>
                    </div>
                    <div class="div8">
                        <span>其他</span><span class="weicaiji">{{ centerData.qita }}</span>
                    </div>
                </div>
            </div>
            <div class="reconnaissance-center-bottom">
                <div class="reconnaissance-center-bottom-chartBox">
                    <!-- <dv-charts :option="centerBottomLeftOption" class="reconnaissance-center-bottom-left__pie" /> -->
                <test-echarts :optionData="centerBottomLeftOption" class="reconnaissance-center-bottom-left__pie"></test-echarts>
                </div>
                <div class="reconnaissance-center-bottom-chartBox">
                    <!-- <dv-charts :option="centerBottomRightOption" class="reconnaissance-center-bottom-right__pie" /> -->
                <test-echarts :optionData="centerBottomRightOption" class="reconnaissance-center-bottom-right__pie"></test-echarts>
                </div>
            </div>
        </div>
        <div class="reconnaissance-right">
            <div class="reconnaissance-right-top">
                <item-title :title="'点位状态'"></item-title>
                <test-echarts :optionData="rightTopPieOption" class="reconnaissance-right-top__pie"></test-echarts>
            </div>
            <div class="reconnaissance-right-bottom">
                <item-title :title="'优化情况占比统计'"></item-title>
                <test-echarts :optionData="rightBottomPieOption" class="reconnaissance-right-bottom__pie"></test-echarts>
            </div>
        </div>
    </div>
</template>

<script>
import ItemTitle from '@/components/ItemTitle.vue'
import TestEcharts from '@/components/echarts/echarts.vue'

import { currentPOST } from 'api/modules';

export default {
    name: 'reconnaissanceOptimization',

    components: {
        ItemTitle,
        TestEcharts
    },

    data() {
        return {
            showPage: false,

            xAxisData: [],
            takanData: {},

            leftTopOption: {},
            leftBottomOption: {},
            centerBottomLeftOption: {},
            centerBottomRightOption: {},
            rightTopPieOption: {},
            rightBottomPieOption: {}
        }
    },

    computed: {
        baseUrl() {
            return this.env == 'development' ? 'x_program_center' : 'http://www.harbinxiaoshi.cn:8000'
        },

        centerData() {
            return this.takanData.centerTop
        }
    },

    methods: {
        // 获取项目列表
        handleGetTakanData() {
            currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/takanBI/execute")
			.then((res) => {
                this.showPage = true
                this.takanData = res.data.value
                this.xAxisData = this.takanData.gongsi

                this.leftTopBar()
                this.leftBottomBar()
                this.centerBottomLeftPie()
                this.centerBottomRightPie()
                this.rightTopPie()
                this.rightBottomPie()
            })
            .catch(err => {
                console.log(err);
            })
        },

        leftTopBar() {
            const leftTopBar = this.takanData.leftTopBar;

            this.leftTopOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '2%',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color: '#E8E8E8',
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: ['#aaa'],
                            type: 'dashed'
                        }
                    },
                    axisLabel: {
                        color: '#E8E8E8',
                        fontSize: 10
                    }
                },
                series: [
                    {
                        name: '已采集',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true,
                            color: '#fff'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: leftTopBar.yicaiji
                    },
                    {
                        name: '未采集',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: true,
                            color: '#fff'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: leftTopBar.weicaiji
                    }
                ]
            }
        },

        leftBottomBar() {
            const leftBottomBar = this.takanData.leftBottomBar;

            this.leftBottomOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '2%',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                grid: {
                    left: '3%',
                    right: 0,
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        color: '#E8E8E8',
                        interval: 0
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: ['#aaa'],
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            color: '#E8E8E8',
                            fontSize: 10
                        }
                    },
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: '#E8E8E8',
                            fontSize: 10
                        }
                    }
                ],
                series: [
                    {
                        name: '实际出勤人数',
                        data: leftBottomBar.shijichuqin,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                            color: 'inherit',
                        },
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        name: '预计出勤人数',
                        data: leftBottomBar.yujichuqin,
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top',
                            color: 'inherit',
                        },
                        emphasis: {
                            focus: 'series'
                        }
                    },
                    {
                        name: '配合踏勘点位',
                        data: leftBottomBar.takandianwei,
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        label: {
                            show: true,
                            color: 'inherit',
                        },
                        emphasis: {
                            focus: 'series'
                        }
                    }
                ]
            }
        },

        centerBottomLeftPie() {
            const centerBottomLeftPie = this.takanData.centerBottomLeftPie;

            this.centerBottomLeftOption = {
                color: ['#5087Ec', '#68BBC4', '#67e0e3'],
                title: {
                    text: '具备施工点位',
                    textStyle: {
                        color: '#fff'
                    },
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '2%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '点位状态',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            lineHeight: 18,
                            color: 'inherit',
                            formatter: (params) => {
                                return `${params.name}\n${params.value}`
                            }
                        },
                        labelLine: {
                            length: 10,
                            length2: 5,
                            smooth: true
                        },
                        data: centerBottomLeftPie,
                        animationEasing: 'elasticOut',
                        animationDelayUpdate: function(idx) {
                            return idx * 5;
                        }
                    }
                ]
            }
        },

        centerBottomRightPie() {
            const centerBottomRightPie = this.takanData.centerBottomRightPie;

            this.centerBottomRightOption = {
                title: {
                    text: '不具备施工点位',
                    textStyle: {
                        color: '#fff'
                    },
                    left: 'center'
                },
                color: ['#D97759', '#e4c477', '#DAA67B'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '2%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '点位状态',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            lineHeight: 18,
                            color: 'inherit',
                            formatter: (params) => {
                                return `${params.name}\n${params.value}`
                            }
                        },
                        labelLine: {
                            length: 10,
                            length2: 5,
                            smooth: true
                        },
                        data: centerBottomRightPie,
                        animationEasing: 'elasticOut',
                        animationDelayUpdate: function(idx) {
                            return idx * 5;
                        }
                    }
                ]
            }
        },

        rightTopPie() {
            const rightTopPie = this.takanData.rightTopPie;

            this.rightTopPieOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '点位状态',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            lineHeight: 18,
                            color: 'inherit',
                            formatter: (params) => {
                                return `${params.name}\n${params.value}`
                            }
                        },
                        labelLine: {
                            length: 10,
                            length2: 5,
                            smooth: true
                        },
                        data: rightTopPie,
                        animationEasing: 'elasticOut',
                        animationDelayUpdate: function(idx) {
                            return idx * 5;
                        }
                    }
                ]
            }
        },

        rightBottomPie() {
            const rightBottomPie = this.takanData.rightBottomPie;

            this.rightBottomPieOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '点位状态',
                        type: 'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: 'bold'
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            lineHeight: 18,
                            color: 'inherit',
                            formatter: (params) => {
                                return `${params.name}\n${params.value}`
                            }
                        },
                        labelLine: {
                            length: 10,
                            length2: 5,
                            smooth: true
                        },
                        data: rightBottomPie,
                        animationEasing: 'elasticOut',
                        animationDelayUpdate: function(idx) {
                            return idx * 5;
                        }
                    }
                ]
            }
        }
    },

    mounted() {
        this.handleGetTakanData()
    }
}
</script>

<style lang="scss" scoped>
.reconnaissance {
    width: 100%;
    flex: 1;
    display: flex;
    padding: 10px 20px;

    .reconnaissance-left {
        width: 30%;
        height: 100%;
        .reconnaissance-left-top,
        .reconnaissance-left-bottom {
            width: 100%;
            height: 50%;

            display: flex;
            flex-flow: column;
        }
        .reconnaissance-left-top__bar,
        .reconnaissance-left-bottom__bar {
            flex: 1;
        }
    }
    .reconnaissance-center {
        width: 40%;
        height: 100%;
        .reconnaissance-center-top {
            width: 100%;
            height: 45%;
            
            display: flex;
            flex-flow: column;
            .reconnaissance-center-top-num {
                flex: 1;
                display: grid;
                grid-template-columns: repeat(10, 1fr);
                grid-template-rows: repeat(3, 1fr);
                grid-column-gap: 10px;
                grid-row-gap: 10px;
                margin: 20px;

                & > div {
                    background-color: rgba(64, 149, 229, 0.25);
                    border-radius: 5px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-flow: column;
                    font-size: px2rem(22);
                    .blue {
                        color: #1990FF;
                    }
                    .yicaiji {
                        color: #A2EF4D;
                    }
                    .weicaiji {
                        color: #E99D42;
                    }
                }

                .div1 { 
                    grid-area: 1 / 1 / 3 / 6; 
                    span:first-child {
                        margin-bottom: px2rem(28);
                    }
                }
                .div2 { 
                    grid-area: 1 / 6 / 2 / 11; 
                    flex-flow: row; 
                    justify-content: space-between;
                    padding: 0 px2rem(80) 0 px2rem(40);
                }
                .div3 { 
                    grid-area: 2 / 6 / 3 / 11;
                    flex-flow: row; 
                    justify-content: space-between;
                    padding: 0 px2rem(80) 0 px2rem(40);
                }
                .div4 { 
                    grid-area: 3 / 1 / 4 / 3; 
                }
                .div5 { 
                    grid-area: 3 / 3 / 4 / 5; 
                }
                .div6 { 
                    grid-area: 3 / 5 / 4 / 7;
                }
                .div7 { 
                    grid-area: 3 / 7 / 4 / 9; 
                }
                .div8 { 
                    grid-area: 3 / 9 / 4 / 11; 
                }
                .div4, .div5, .div6, .div7, .div8 {
                    span:first-child {
                        margin-bottom: px2rem(12);
                    }
                }
            }
        }
        
        .reconnaissance-center-bottom {
            width: 100%;
            height: 55%;
            display: flex;
            .reconnaissance-center-bottom-chartBox {
                width: 50%;
                height: 100%;
                padding: 20px 10px;
            }
        }
    }
    .reconnaissance-right {
        width: 30%;
        height: 100%;
        // background: peru;
        .reconnaissance-right-top,
        .reconnaissance-right-bottom {
            width: 100%;
            height: 50%;

            display: flex;
            flex-flow: column;
        }
        .reconnaissance-right-top__pie,
        .reconnaissance-right-bottom__pie {
            flex: 1;
        }
    }
}
</style>