<template>
    <div v-if="!showPage" v-loading="!showPage" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)" style="width: 100%;height: 100%;">
    </div>
    <div v-else id="project-view">
        <top-header v-if="defaultValue" :projectOption="projectOption" :defaultValue="defaultValue"
            @handleChangeProject="handleChangeProject" />

        <div class="project-view-content">
            <div class="content-left">
                <p class="content-title">人工完成</p>

                <div class="content-chart-box">
                    <left-top-line :chartWeekData="projectweekData" :chartMonthData="projectmonthData"></left-top-line>
                </div>

                <div class="content-chart-box">
                    <left-bottom-bar :chartData="dayProjectData"></left-bottom-bar>
                </div>
            </div>

            <div class="content-center">
                <div class="content-center-total">
                    <center-total-gauge :chartData="dayProjectData"></center-total-gauge>

                    <div class="content-center-total-legend">
                        <div>
                            <span class="legend-jihua">{{ dayProjectData ? dayProjectData.jihualeijiwancheng : 0 }}%</span>
                            <span>计划</span>
                        </div>
                        <div>
                            <span class="legend-shiji">{{ dayProjectData ? dayProjectData.shijileijiwancheng : 0 }}%</span>
                            <span>实际</span>
                        </div>
                    </div>
                </div>

                <div class="content-center-line-box">
                    <p class="content-title">完成趋势</p>
                    <center-total-line :chartWeekData="projectmonthData"></center-total-line>
                </div>

                <div class="content-center-charts">
                    <p class="content-center-charts__title">机械完成</p>

                    <div class="content-center-charts-box">
                        <center-bottom-line :chartWeekData="projectweekData"
                            :chartMonthData="projectmonthData"></center-bottom-line>
                    </div>

                    <div class="content-center-charts-box">
                        <center-bottom-bar :chartData="dayProjectData"></center-bottom-bar>
                    </div>
                </div>
            </div>

            <div class="content-right">
                <p class="content-title">材料完成</p>

                <div class="content-chart-box">
                    <right-top-line :chartWeekData="projectweekData" :chartMonthData="projectmonthData"></right-top-line>
                </div>

                <div class="content-chart-box">
                    <right-bottom-bar :chartData="dayProjectData"></right-bottom-bar>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topHeader from "@/components/topHeader.vue";
import leftTopLine from "@/components/leftTopLine.vue";
import leftBottomBar from '@/components/leftBottomBar.vue';
import rightTopLine from "@/components/rightTopLine.vue";
import rightBottomBar from '@/components/rightBottomBar.vue';
import centerTotalLine from '@/components/centerTotalLine.vue';
import centerBottomBar from '@/components/centerBottomBar.vue';
import centerBottomLine from '@/components/centerBottomLine.vue';
import centerTotalGauge from '@/components/centerTotalGauge.vue';

import { currentPOST } from 'api/modules';
import { formatTime } from "@/utils/index.js";

export default {
    name: "ProjectView",
    components: {
        topHeader,
        leftTopLine,
        leftBottomBar,
        rightTopLine,
        rightBottomBar,
        centerTotalLine,
        centerBottomLine,
        centerBottomBar,
        centerTotalGauge
    },
    data() {
        return {
            showPage: false,

            env: process.env.NODE_ENV,
            proName: '',

            projectOption: [],
            defaultValue: '',

            rangeDate: [],
            projectweekData: [],
            projectmonthData: [],

            dayProjectData: {},

            dayDataObj: {}
        };
    },
    computed: {
        baseUrl() {
            return this.env == 'development' ? 'project' : 'http://1.190.195.54:8050';
        },

        weekDate() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);

            return [formatTime(start, "yyyy年MM月dd日"), formatTime(end, "yyyy年MM月dd日")];
        },

        monthDate() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

            return [formatTime(start, "yyyy年MM月dd日"), formatTime(end, "yyyy年MM月dd日")];
        }
    },
    methods: {
        // 切换项目
        async handleChangeProject(value) {
            this.showPage = false;
            this.defaultValue = value;
            sessionStorage.setItem('defaultValue', this.defaultValue)
            this.$router.push({
                query: {proName: this.defaultValue}     
            })

            await this.handleGetProjectWeekData();
            await this.handleGetProjectMonthData();
        },

        // 获取项目列表
        async handleGetProjectList() {
            const res = await currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/BI-xiangmuliebiao/execute", {})

            if (res.code == 0) {
                this.projectOption = res.result;
                this.defaultValue = this.proName ? this.proName : (this.projectOption[0] ? this.projectOption[0].title : '');
                sessionStorage.setItem('defaultValue', this.defaultValue)

                if (res.result && res.result.length == 0) {
                    this.$notify.info({
                        title: '提示',
                        message: '暂无数据'
                    });
                }
                
                await this.handleGetProjectWeekData();
                await this.handleGetProjectMonthData();
            }
        },

        // 获取项目详情 周
        async handleGetProjectWeekData() {
            const res = await currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/BI-zongliang/execute", {
                startTime: this.weekDate[0],
                endTime: this.weekDate[1],
                title: this.defaultValue
            })

            if (res.code == 0) {
                const result = res.result;

                if (result.length) {
                    this.projectweekData = result;
                } else {
                    this.projectweekData = [];
                }
            }

        },

        // 获取项目详情 月
        async handleGetProjectMonthData() {
            const res = await currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/BI-zongliang/execute", {
                startTime: this.monthDate[0],
                endTime: this.monthDate[1],
                title: this.defaultValue
            })

            if (res.code == 0) {
                const result = res.result;

                if (result.length) {
                    this.projectmonthData = result;
                    this.dayProjectData = result[0];

                    this.handleWithData();
                } else {
                    this.projectmonthData = [];
                    this.dayProjectData = {};

                    this.handleWithData();
                }
            }
        },

        handleWithData() {
            let weekData = this.projectweekData;
            let monthData = this.projectmonthData;

            weekData.sort(function (a, b) {
                var dateA = new Date(a.riqi.replace(/年|月/g, '/').replace(/日/, ''));
                var dateB = new Date(b.riqi.replace(/年|月/g, '/').replace(/日/, ''));
                return dateA - dateB;
            });

            monthData.sort(function (a, b) {
                var dateA = new Date(a.riqi.replace(/年|月/g, '/').replace(/日/, ''));
                var dateB = new Date(b.riqi.replace(/年|月/g, '/').replace(/日/, ''));
                return dateA - dateB;
            });

            this.projectweekData = weekData;
            this.projectmonthData = monthData;

            setTimeout(() => {
                this.showPage = true
            }, 0)
        }
    },

    async mounted() {
        this.proName = this.$route.query.proName || '';
        await this.handleGetProjectList()
    },
};
</script>

<style lang="scss">
#project-view {
    width: 100%;
    height: 100%;
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    color: #fff;

    .project-view-content {
        width: 100%;
        height: calc(100% - 100px);
        padding: 20px 32px;
        display: flex;
    }

    .content-title,
    .content-center-charts__title {
        width: 100%;
        position: absolute;
        top: -10px;
        left: 0;
        font-size: 16px;
        letter-spacing: 4px;
        text-align: center;
    }

    .content-left,
    .content-right {
        background: url(./img/item2.png) no-repeat;
        background-size: 100% 100%;
        background-position: center;
        width: 27%;
        height: 100%;
        padding: 2% 12px;

        position: relative;
    }

    .content-center {
        width: 44%;
        height: 100%;
        margin: 0 1%;
        position: relative;

        .content-center-total {
            width: 100%;
            height: 25%;

            .content-center-total-legend {
                display: flex;
                justify-content: center;

                &>div {
                    font-size: 12px;
                    margin-right: 12px;

                    .legend-jihua {
                        display: inline-block;
                        padding: 3px 5px;
                        background: #5470c6;
                        border-radius: 4px;
                        margin-right: 6px;
                    }

                    .legend-shiji {
                        display: inline-block;
                        padding: 2px 4px;
                        background: #91cc75;
                        border-radius: 4px;
                        margin-right: 6px;
                    }
                }
            }
        }

        .content-center-line-box {
            width: 100%;
            height: 30%;
            margin-top: 5%;
            position: relative;

            .content-title {
                top: 0;
            }
        }

        .content-center-charts {
            background: url(./img/item1.png) no-repeat;
            background-size: 100% 100%;
            background-position: center;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            display: flex;
            padding: 30px 12px 0;

            .content-center-charts-box {
                width: 50%;
                height: 100%;
            }
        }
    }

    .content-chart-box {
        position: relative;
        width: 100%;
        height: 49%;
    }

    .range-legend {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        border: 1px solid #409EFF;
        border-radius: 4px;
        width: 80px;
        height: 26px;
        z-index: 99;
        cursor: pointer;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            font-size: 12px;
            font-weight: bold;
        }

        span:nth-child(1) {
            border-right: 1px solid #409EFF;
        }

        span.active {
            background-color: #409EFF;
        }
    }

    .btn-back {
        position: absolute;
        top: 0;
        right: 10px;
        z-index: 99;
        cursor: pointer;
    }

    .date-legend {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;

        width: 150px;
        background: rgba(47, 85, 151, .98) !important;

        .el-input__inner {
            background: transparent;
            border: none;
            color: #fff;
        }
    }
}

.el-picker-panel {
    background: rgba(84, 112, 198, .95) !important;
    color: #fff;
    border: none;

    .el-date-table td.disabled div {
        background: rgba(84, 112, 198, .95);
        color: #AAAAAA;
    }

    .el-date-table th {
        color: #fff !important;
    }
}

.el-picker-panel [slot=sidebar],
.el-picker-panel__sidebar,
.el-picker-panel__shortcut,
.el-date-picker__header {
    background: rgba(84, 112, 198, .95) !important;
    color: #fff !important;
    border: none;

    button,
    span {
        color: #fff !important;
    }
}</style>
