
 <!-- 
    *@description: 用料统计
    *@author: yh Fu
    *@date: 2023-12-25 13:07:41
    *@version: V1.0.5 
    -->

<template>
    <div class="MaterialStatistics_Contain">
        <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%;display: flex;">
                <div>
                    <el-select 
                    v-model="currentDistrict" 
                    placeholder="请选择行政区"
                    class="projectSelect districtSelect" 
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    @change="districtHasChanged"
                    >
                    <el-option
                        v-for="e in dict.type.district"
                        :key="e.value"
                        :label="e.label"
                        :value="e.value">
                    </el-option>
                </el-select>
                </div>
                <div>
                    <el-select 
                        v-model="currentCommunity" 
                        placeholder="请选择小区"
                        class="projectSelect communitySelect" 
                        popper-class="projectDropDown" 
                        :popper-append-to-body="false"
                        @change="communityHasChanged"
                        >
                        <el-option
                            v-for="e in communityOptions"
                            :key="e.id"
                            :label="e.name"
                            :value="e.id">
                        </el-option>
                    </el-select>

                </div>
                <el-select 
                    v-model="currentBuilding" 
                    placeholder="请选择楼栋"
                    class="projectSelect" 
                    @change="buildingHasChanged"
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in buildingOptions"
                        :key="e.id"
                        :label="e.name"
                        :value="e.id">
                    </el-option>
                </el-select>
                <el-select 
                    v-model="currentUnit" 
                    placeholder="请选择单元"
                    class="projectSelect" 
                    popper-class="projectDropDown" 
                    :popper-append-to-body="false"
                    >
                    <el-option
                        v-for="e in unitOptions"
                        :key="e.id"
                        :label="e.name"
                        :value="e.id">
                    </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 
                icon="el-icon-download"
                @click="handleExport"
                class="searchBtn"
                v-hasPermi="['zdsz:visual_house:export']"
                >导出</el-button>
        </div>    
        <div style="width: 100%; height: 100%;">
            <el-table
                class="materialStatisticsTable"
                :data="tableData"
                header-cell-style="background-color:#199ED8;border: 2px solid #000066"
                border
                :cell-style="tableRowClassName"
                style="width: 100%">
                <el-table-column
                prop="date"
                width="250"
                label=""
                >
                </el-table-column>
                <el-table-column
                prop="name"
                label="预计用料"
                >
                </el-table-column>
                <el-table-column
                prop="address"
                label="实际用料">
                </el-table-column>
            </el-table>
        </div>
        
    </div>
</template>

<script>
import {
    getAreaList,                            // 获取当前小区集合
    getBuildingList,                        // 获取当前楼栋集合
    getUnitList,                            // 获取当前单元集合
} from '@/api/zdsz/enginee'
export default {
    name:'MaterialStatistics',
    dicts:['district'],
    data(){
        return {
            currentDate:null,
            currentMenu:0,   // 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: '龙腾香格里'
                },
            ],
            buildingOptions:[],         // 楼栋集合
            unitOptions:[],             // 单元集合
            currentType:null,
            currentDistrict:null,       // 当前行政区
            currentCommunity:null,      // 当前小区
            currentBuilding:null,       // 当前楼宇
            currentUnit:null,           // 当前单元
            tableData: [
                {
                    date: '规格',
                    name: '0.5cm',
                    address: '1cm'
                }, 
                {
                    date: '尺寸',
                    name: '1.2m',
                    address: '1.5m'
                }, 
                {
                    date: '材质',
                    name: 'pv',
                    address: '钢 pv pc'
                }, 
            ]

        }
    },
    mounted(){
        console.log(this.dict)
    },
    methods:{
        // 当前所选行政区发生改变 查询当前小区集合
        districtHasChanged(district){
            this.currentCommunity = null
            getAreaList({district}).then(res => {
                this.communityOptions = res.data
            })
        },
        // 当前所选小区发生改变 查询当前楼栋集合
        communityHasChanged(areaId){
            this.currentBuilding = null
            getBuildingList({areaId}).then(res => {
                this.buildingOptions = res.data
            })
        },
        buildingHasChanged(buildingId){
            this.currentUnit = null
            getUnitList({buildingId}).then(res => {
                console.log(res)
                this.unitOptions = res.data
            })
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('zdsz/visual_house/export', {
                ...this.queryParams
            }, `house_${new Date().getTime()}.xlsx`)
        },
        tableRowClassName(){
            return "background:#199ED8;border: 2px solid #000066"
        },
        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>
.tags-view-container{
    display: none;
}
.MaterialStatistics_Contain{
    width: 100%;
    height: 100%;
    padding: 1%;
    .topContain{  
        display: flex;
        justify-content: space-between;
        width: 100%;
        // height: 40px;
        .searchBtn{
            // height: 100%;
            width: 11%;
            background-color: #1890FF;
            color: #fff;
        }
        ::v-deep .projectSelect{
            width: 16%;
            .el-input__inner{
                // font-size: 15px;
                // height: 40px ;
                // background-color: #1890FF;
                background: linear-gradient(to right, #2197F2, #0BB0DE);
                color: #fff;
            }
        }

        ::v-deep .districtSelect{
            width: 200px;
        }
        ::v-deep .communitySelect{
            margin-left: 2%;
            width: 200px;
        }
        ::v-deep .projectSelect:not(:nth-child(1)){
            margin-left: 1%;
        }
        ::v-deep .projectSelect:nth-child(3){
            width: 10%;
        }
        ::v-deep .projectSelect:nth-child(4){
            width: 10%;
        }
        .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;
        }
    }
    .materialStatisticsTable{
        margin-top: 1%;
        border: 2px solid #000066 !important;

    }
    .materialStatisticsTable::before{
        background-color:#000066 ;
    }
    .materialStatisticsTable::after{
        background-color:#000066 ;
    }
}
</style>

<style lang="scss" scoped>
.customTable{
    .el-table__header-wrapper th{
    background-color: #199ED8;
}
.el-table--border th.el-table__cell{
    border: 2px solid #000066 !important;
}
.el-table__empty-block{
    background-color: #199ED8;
}
.el-table__empty-text{
    color: #000066;
}
.el-table__cell{
    background-color: #199ED8 ;
    border: 2px solid #000066 !important;
}
.el-table__cell >div{
    text-align: center;
}
.el-button{
    background-color: #169BD5;
    color: #fff;
}
}

</style>