
 <!-- 
    *@description: 可视化进度
    *@author: yh Fu
    *@date: 2023-12-25 13:27:19
    *@version: V1.0.5 
    -->

<template>
    <div class="progresVisualContainer">
        <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
            <el-radio-button label="0">用料统计</el-radio-button>
            <el-radio-button label="1">进度统计</el-radio-button>
            <el-radio-button label="2">可视化进度</el-radio-button>
        </el-radio-group>
        <div class="topContain">
            <div style="width: 100%;height: 100%;">
                <el-select 
                    v-model="currentCommunity" 
                    placeholder="请选择行政区"
                    class="projectSelect" 
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in communityOptions"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                <el-select 
                    v-model="currentCommunity" 
                    placeholder="请选择小区"
                    class="projectSelect" 
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in communityOptions"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                <el-select 
                    v-model="currentType" 
                    placeholder="请选择工程类型" 
                    class="projectSelect" 
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in typeOptions"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                <el-date-picker
                    v-model="currentDate"
                    class="projectSelect" 
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <el-button class="searchBtn">查询</el-button>
            <el-button class="searchBtn">导出</el-button>
            <div class="unitStatus">
                <div 
                    v-for="(e,idx) in unitStatusOption"
                    :key="idx"
                    :style="`background-color:${e.color};width: 22%;height: 35px;position: absolute;right:${idx*130}px;box-shadow:0 5px 5px 0 #CDCDCD`"
                    >
                    <div 
                        style="position: relative;left: 107%;width: 116%;top: 20%;"
                        >
                        {{ e.label }}
                    </div>
                </div>
            </div>
        </div>   
        <!-- 房间集合 -->
        <ConstructionDetails/>
    </div>
</template>

<script>
import ConstructionDetails from '@/components/ConstructionDetails'
export default {
    name:'ProgreVisual',
    components:{
        ConstructionDetails
    },
    data(){
        return {
            currentMenu:2,   // 0:用料管理 1:进度统计 2:可视化进度
            typeOptions:[
                {
                    value: '0',
                    label: '市政工程'
                }, 
                {
                    value: '1',
                    label: '工业工程'
                },
                {
                    value: '2',
                    label: '民用工程'
                }, 
                {
                    value: '3',
                    label: '危险作业'
                }, 
                {
                    value: '4',
                    label: '顶管工程'
                },
                {
                    value: '5',
                    label: '基建工程'
                }
            ],
            communityOptions:[
                {
                    value: '0',
                    label: '领秀世家'
                }, 
                {
                    value: '1',
                    label: '上东府里'
                },
                {
                    value: '2',
                    label: '清华园'
                }, 
                {
                    value: '3',
                    label: '万科蓝山'
                }, 
                {
                    value: '4',
                    label: '龙腾香格里'
                },
            ],
            unitStatusOption:[
                {
                    label:'竣工',
                    color:'#009900'
                },
                {
                    label:'进行中',
                    color:'#FFFF66'
                },
                {
                    label:'未开始',
                    color:'#999999'
                },
            ],
            currentType:null,
            currentCommunity:null,
        }
    },
    methods:{
        toModule(){
            console.log(this.$router)
            const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
            this.$router.push({
                path:`/${currentPage}`
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.progresVisualContainer{
    width: 100%;
    height: 100%;
    padding: 1%;
    .topContain{  
        display: flex;
        justify-content: space-between;
        width: 60%;
        .searchBtn{
            width: 11%;
            background-color: #1890FF;
            color: #fff;
        }
        ::v-deep .projectSelect{
            width: 20% !important;
            .el-input__inner{
                background-color: #1890FF;
                color: #fff;
            }
        }
        .projectDropDown{
            background-color: #1890FF;
            .el-select-dropdown__item{
                background-color: #1890FF;
                color: #fff;
            }
            ::v-deep .el-select-dropdown__list {
                padding-top: 0 !important;
                padding-bottom: 0;
            }
        }
        .projectDropDown >ul{
            padding-top: 0 ;
            padding-bottom: 0;
        }
        .unitStatus{
            width: 13%;
            display: flex;
            position: absolute;
            right: 7%;
            height: 5%;
        }
    }
}
</style>