<template>
    <dv-loading v-if="!showPage" style="width: 100%;height: 100%;" class="the-loading">Loading...</dv-loading>
    <div v-else class="construction">
        <div class="construction-left">
            <div class="construction-left-top">
                <item-title :title="'施工情况'"></item-title>
                <div class="construction-left-top__num">
                    <div class="div1"><span>已完成</span><span>{{ leftTopData.yiwancheng }}</span></div>
                    <div class="div2"><span>路由已通</span><span>{{ leftTopData.luyouyitong }}</span></div>
                    <div class="div3"><span>未开始</span><span>{{ leftTopData.weikaishi }}</span></div>
                    <div class="div4"><span>不具备条件</span><span>{{ leftTopData.bujubeitiaojian }}</span></div>
                </div>
                <div @click="turnReconnaissance" class="construction-left-top__turn">查看踏勘和优化统计 &nbsp;&nbsp;&nbsp;&nbsp; >>></div>
            </div>
            <div class="construction-left-bottom">
                <item-title :title="'施工人数统计'"></item-title>
                <test-echarts :optionData="leftBottomBarOption" class="construction-left-bottom__bar"></test-echarts>
            </div>
        </div>
        <div class="construction-center">
            <div class="construction-center-top">
                <item-title :title="'日施工统计'"></item-title>
                <div class="construction-center-top-box">
                    <div class="datepicker-box">
                        <el-date-picker
                            v-model="date"
                            type="date" value-format="yyyy.MM.dd"
                            placeholder="选择日期" @change="choiceDate">
                        </el-date-picker>
                    </div>
                    <test-echarts :optionData="centerTopBarOption" class="construction-center-top__bar"></test-echarts>
                </div>
            </div>
            <div class="construction-center-bottom">
                <item-title :title="'次日计划施工点位'"></item-title>
                <table class="construction-center-bottom__table">
                    <thead>
                        <tr>
                            <th>分公司</th>
                            <th>点位数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(tableItem, key) in tableData" :key="key">
                            <td>{{ tableItem.name }}</td>
                            <td>{{ handleGetDianNum(tableItem.dianwei) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="construction-right">
            <div class="construction-right-top">
                <item-title :title="'各公司施工进度'"></item-title>
                <ul class="construction-right-top__bar">
                    <li>
                        <span>公司</span>
                        <span style="width:40%; justify-content: center;">路由已通</span>
                        <span style="width:40%; justify-content: center;">已完成</span>
                    </li>
                    <li v-for="(progress, key) in rightTopBarOption.luyouyitong" :key="key">
                        <span>{{ progress.name }}</span>
                        <dv-percent-pond :config="progress" style="width:40%;height:100%;margin-right: 8px;" />
                        <dv-percent-pond :config="rightTopBarOption.yiwancheng[key]"  style="width:40%;height:100%;" />
                    </li>
                </ul>
            </div>
            <div class="construction-right-bottom">
                <item-title :title="'各公司总点位占比'"></item-title>
                <test-echarts :optionData="rightBottomPieOption" class="construction-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: 'constructionStatus',

    components: {
        ItemTitle,
        TestEcharts
    },

    data() {
        return {
            showPage: false,

            xAxisData: [],
            shigongData: {},

            leftBottomBarOption: {},
            centerTopBarOption: {},

            rightTopBarOption: {},
            rightBottomPieOption: {},

            tableData: [],

            date: ''
        }
    },

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

        leftTopData() {
            return this.shigongData.leftTopBar
        },

        shigongrenshuriqi() {
            let cuDate = new Date();
            if(cuDate.getHours() >= 18){
                cuDate.setDate(cuDate.getDate() - 4);
            } else {
                cuDate.setDate(cuDate.getDate() - 5);
            }

            let t = "";
            let flag = "";

            for(var i = 0; i < 5; i ++){
                var yyyy = cuDate.getFullYear();
                var MM = cuDate.getMonth() + 1 < 10 ? "0" + (cuDate.getMonth() + 1) : cuDate.getMonth() + 1;
                var dd = cuDate.getDate() < 10 ? "0" + cuDate.getDate() : cuDate.getDate();
                    t += flag + yyyy + "." + MM + "." + dd;
                    flag = ",";
                    cuDate.setDate(cuDate.getDate() + 1);
            }

            return t;
        }
    },

    methods: {
        turnReconnaissance() {
            const routeUrl = this.$router.resolve({
                path: "/reconnaissance"
            });
            window.open(routeUrl.href, '_blank');
        },

        choiceDate() {
            this.handleGetRiShiGong()
        },

        handleGetShigongData() {     
            const shigongriqi = this.shigongrenshuriqi.split(',')
            const [dangtian] = shigongriqi.slice(-1)

            this.date = dangtian

            currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/shigongjinduBI/execute", {
                "type":"all",
                "dangtian": dangtian,
                "shigongrenshuriqi": this.shigongrenshuriqi
            })
			.then((res) => {
                this.showPage = true

                this.shigongData = res.data.value
                this.xAxisData = this.shigongData.gongsi
                this.tableData = this.shigongData.centerBottomBar

                this.leftBottomBar()
                this.centerTopBar()
                this.rightTopBar()
                this.rightBottomPie()
            })
            .catch(err => {
                console.log(err);
            })
        },

        handleGetRiShiGong() {
            currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/shigongjinduBI/execute", {
                "type": "ri",
                "dangtian": this.date
            })
			.then((res) => {
                const value = res.data.value
                this.tableData = value.centerBottomBar
                this.centerTopBar(value.centerTopBar)
            })
            .catch(err => {
                console.log(err);
            })
        },

        handleGetDianNum(dianwei) {
            const array = dianwei.split(/[、\s]+/).filter(element => element !== '');
            
            return array.length;
        },

        leftBottomBar() {
            const leftBottomBar = this.shigongData.leftBottomBar

            this.leftBottomBarOption = {
                color: ['#D97759', '#e4c477', '#DAA67B', '#4E9C8F'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: this.xAxisData,
                    top: '2%',
                    left: 'center',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: leftBottomBar.riqi,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            color: '#E8E8E8'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: ['#aaa'],
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            color: '#E8E8E8',
                            fontSize: 10
                        }
                    }
                ],
                series: [
                    {
                        name: '三分公司',
                        type: 'bar',
                        data: leftBottomBar.sanfen,
                        barGap: '15%',
                        barCategoryGap: '30%'
                    },
                    {
                        name: '二分公司',
                        type: 'bar',
                        data: leftBottomBar.erfen,
                        barGap: '15%'
                    },
                    {
                        name: '环保新能源分公司',
                        type: 'bar',
                        data: leftBottomBar.huanbao,
                        barGap: '15%'
                    },
                    {
                        name: '松北子公司',
                        type: 'bar',
                        data: leftBottomBar.songbei,
                        barGap: '15%'
                    }
                ]
            };
        },

        centerTopBar(barData) {
            const centerTopBar = barData ? barData : this.shigongData.centerTopBar

            this.centerTopBarOption = {
                color: ['#D97759', '#e4c477', '#DAA67B', '#4E9C8F', '#4787B4'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '5px',
                    left: "2%",
                    textStyle: {
                        fontSize: 10,
                        color: '#fff'
                    },
                    width: '50%'
                },
                grid: {
                    top: "18%",
                    left: "3%",
                    right: "5%",
                    bottom: "2%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xAxisData,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            color: '#E8E8E8'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: ['#aaa'],
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            color: '#E8E8E8',
                            fontSize: 10
                        }
                    }
                ],
                series: [
                    {
                        name: '计划施工点位',
                        type: 'bar',
                        data: centerTopBar.jihuashigong,
                        barGap: '15%',
                        barCategoryGap: '30%'
                    },
                    {
                        name: '路由已通',
                        type: 'bar',
                        data: centerTopBar.luyouyitong,
                        barGap: '15%',
                        barCategoryGap: '30%'
                    },
                    {
                        name: '持续施工点位',
                        type: 'bar',
                        data: centerTopBar.chixushigong
                    },
                    {
                        name: '施工总人数',
                        type: 'bar',
                        data: centerTopBar.shigongrenshu
                    },
                    {
                        name: '阻工点位',
                        type: 'bar',
                        data: centerTopBar.zugongdianwei
                    }
                ]
            };
        },

        rightTopBar() {
            const rightTopBar = this.shigongData.rightTopBar

            this.rightTopBarOption = {
                luyouyitong: rightTopBar.luyouyitong,
                yiwancheng: rightTopBar.yiwancheng
            }
        },

        rightBottomPie() {
            const rightBottomPie = this.shigongData.rightBottomPie

            this.rightBottomPieOption = {
                color: ['#D97759', '#e4c477', '#DAA67B', '#4E9C8F', '#4787B4'],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: 'center',
                    data: this.xAxisData,
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: '点位',
                        type: 'pie',
                        radius: '50%',
                        data: rightBottomPie,
                        center: ['55%', '52%'],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: 'rgba(0, 0, 0, 0.3)',
                            borderWidth: 2,
                            borderType: 'solid',
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true,
                            position: 'outside',
                            lineHeight: 18,
                            color: '#fff',
                            formatter: (params) => {
                                return `${params.name}\n${params.value}`
                            }
                        },
                        labelLine: {
                            show: true
                        }
                    }
                ]
            }
        }
    },

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

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

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

            display: flex;
            flex-flow: column;
        }
        .construction-left-top__num,
        .construction-left-bottom__bar {
            flex: 1;
        }
        .construction-left-top__num {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            margin: 15px 0;

            & > 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);
                span:first-child {
                    margin-bottom: 20px;
                }
            }

            .div1 { 
                grid-area: 1 / 1 / 2 / 2;
                color: #DE868F;
            }
            .div2 {
                grid-area: 1 / 2 / 2 / 3;
                color: #0DDE79;
            }
            .div3 {
                grid-area: 2 / 1 / 3 / 2;
                color: #1990FF;
            }
            .div4 {
                grid-area: 2 / 2 / 3 / 3;
                color: #B886F8;
            }
        }
        
        .construction-left-top__turn {
            width: 85%;
            height: px2rem(40);
            line-height: px2rem(40);
            background-color: rgba(64, 149, 229, 0.25);
            font-size: px2rem(16);
            font-weight: bold;
            text-align: center;
            border-radius: 5px;
            margin: 0 auto 15px;
            box-shadow: 5px 2px 10px rgba(13, 93, 152);
            cursor: pointer;
        }
    }
    .construction-center {
        width: 40%;
        height: 100%;
        .construction-center-top,
        .construction-center-bottom {
            width: 100%;

            display: flex;
            flex-flow: column;
        }
        .construction-center-top {
            height: 60%;
        }
        .construction-center-top-box,
        .construction-center-bottom__table {
            flex: 1;
        }
        .construction-center-top-box {
            margin-bottom: 15px;
            position: relative;
            .construction-center-top__bar {
                // height: calc(100% - 40px) !important;
                // margin-top: 40px;
            }
        }
        .construction-center-bottom {
            padding-bottom: 12px;
            height: 40%;
            .item-title {
                margin-bottom: 12px;
            }
        }
        .construction-center-bottom__table {
            border-collapse: collapse;
            color: #D3F4FE;
            thead th:first-child {
                // width: 30%;
                padding: 10px 0;
            }
            thead th:last-child {
                // width: 10%;
            }
            thead {
                background: rgba(13, 93, 152, 0.5);
            }
            th,td {
                border: 1px solid #579FD9;
                text-align: center;
                padding: 0 10px;
            }
        }
    }
    .construction-right {
        width: 30%;
        height: 100%;
        .construction-right-top,
        .construction-right-bottom {
            width: 100%;
            height: 50%;

            display: flex;
            flex-flow: column;
        }
        .construction-right-top__bar,
        .construction-right-bottom__pie {
            flex: 1;
        }
        .construction-right-top__bar {
            padding: 15px 5px 15px 0;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            li {
                display: flex;
                align-items: center;
                height: 16%;
                
                & > span {
                    display: flex;
                    align-items: center;
                    width: 20%;
                    height: 100%;
                    font-size: px2rem(16);
                    font-weight: bold;
                    margin-right: 12px;
                }
                .construction-right-top__bar-box {
                    width: 80%;
                    height: 100%;
                    display: flex;
                    flex-flow: column;
                }
            }
            li:first-child {
                height: 24px;
            }
        }
        .construction-right-bottom__pie {
            padding: 20px 0 0;
        }
    }
}
.datepicker-box {
    position: absolute;
    top: 5px;
    right: 5%;
    z-index: 99;
    width: 140px;
    height: 30px;
    .el-date-editor.el-input, 
    .el-date-editor.el-input__inner,
    ::v-deep .el-input__inner {
        width: 100%;
        height: 100% !important;
        background: transparent;
        color: #DCDFE6
    }
    ::v-deep .el-input__icon {
        line-height: 30px;
    }
}
</style>