gateLevelOption.vue

<template>
    <div class="gate-level-option-content">
        <span class="condition-item-text">{{$t('asisTab.inOutLev')}}</span>
        <div class="condition-item-option">
            <el-select v-model="gateLevel" :placeholder="$t('pholder.gateLevel')" class="floor-sel-box">
                <el-option v-for="item in gateLevelList" :key="item.value" :label="$t('asisTab.' + item.label)" :value="item.value"></el-option>
            </el-select>
            <span v-if="gateLevel === 'floor' || gateLevel === 'zone'">-</span>
            <el-select v-if="gateLevel === 'floor'" v-model="floorItem" filterable multiple collapse-tags :placeholder="$t('pholder.floorSelect')" class="zone-sel-box" @change="levelFloorChange">
                <div :class="isFloorSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="levelFloorChange('select')">
                    <span class="custom-checkbox__input">
                        <span class="custom-checkbox__inner"></span>
                    </span>
                    <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
                    <span class="custom-checkbox__input">
                        <span class="custom-checkbox__inner"></span>
                    </span>
                    <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
            </el-select>
            <el-select v-if="gateLevel === 'zone'" v-model="zoneItem" filterable multiple collapse-tags :placeholder="$t('pholder.zoneSelect')" class="zone-sel-box" @change="levelZoneChange">
                <div :class="isZoneSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="levelZoneChange('select')">
                    <span class="custom-checkbox__input">
                        <span class="custom-checkbox__inner"></span>
                    </span>
                    <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                </div>
                <el-option v-for="item in zoneList" :key="item.id" :label="item.name" :value="item.id">
                    <span class="custom-checkbox__input">
                        <span class="custom-checkbox__inner"></span>
                    </span>
                    <span style="padding-left: 5px;">{{ item.name }}</span>
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
import Bus from '../../views/public/eventBus'
export default {
    props: {
        asisLevel: String,
    },
    name: 'gate-level-option-content',
    data() {
        return {
            gateLevel: '',
            zoneItem: [],
            floorItem: [],
            gateLevelList: [],
            isFloorSelAll: false,
            isZoneSelAll: false,
            floorList: [],
            zoneList: [],
            gateLevelList: []
        }
    },
    watch: {
        gateLevel(val) {
            let requestType = this.gateLevelChange()
            // console.log('this.mallVal',this.mallVal)
            requestType[val](this.mallVal)
        }
    },
    created() {
        var _this = this;
        Bus.$on('mallVal', function(val) {
            _this.mallVal = val;
            if(_this.asisLevel == 'gate') {
                let requestType = _this.gateLevelChange()
                requestType[_this.gateLevel](val)
            }
        })
        if(this.$Project === 'mall') {
            let gateleve = {
                'all': 'all',
                'mall': 'mall',
                'floor': 'floor',
                'store': 'zone',
            }
            for(let i in gateleve) {
               this.gateLevelList.push({
                    label: i,
                    value: gateleve[i],
                })
            }
        } else {
            this.gateLevelList = [{
                label: 'all',
                value: 'all'
            }, {
                label: 'mall',
                value: 'mall'
            }];
        }
        this.gateLevel = 'all'
    },
    mounted() {
    },
    methods: {
        gateLevelChange() {
            let _this = this;
            let requestType = {
                all: function(mallVal) {
                    let obj = {
                        'all': mallVal
                    }   
                    Bus.$emit('level',obj)
                },
                mall: function(mallVal) {
                    let obj = {
                        'mall': mallVal
                    }
                    Bus.$emit('level',obj)
                },
                floor: function(mallVal) {
                    _this.getFloorList();
                },
                zone: function(mallVal) {
                    _this.getZoneList();
                },
            }
            return requestType
        },
        levelFloorChange(type) {
            if(type == 'select'){
                if(this.isFloorSelAll) {
                    this.isFloorSelAll = false;
                    if(this.floorItem.length == this.floorList.length) {
                        this.floorItem = [];
                    }
                } else {
                    this.isFloorSelAll = true;
                    if(this.floorItem.length == this.floorList.length) {
                        this.floorItem = [];
                    } else {
                        this.floorItem = [];
                        this.floorList.forEach(item => {
                            this.floorItem.push(item.id);
                        })
                        this.getBus('floor',this.floorItem)
                    }
                }
            }else{
                this.isFloorSelAll = this.floorItem.length >= this.floorList.length ? true: false
                if(this.floorItem.length) {
                    this.getBus('floor',this.floorItem)
                } else {
                    this.getBus('floor',[])
                }
            }
        },
        levelZoneChange(type) {
            if(type == 'select'){
                if(this.isZoneSelAll) {
                    this.isZoneSelAll = false;
                    if(this.zoneItem.length == this.zoneList.length) {
                        this.zoneItem = [];
                    }
                } else {
                    this.isZoneSelAll = true;
                    if(this.zoneItem.length == this.zoneList.length) {
                        this.zoneItem = [];
                    } else {
                        this.zoneItem = [];
                        this.zoneList.forEach(item => {
                            this.zoneItem.push(item.id);
                        })
                        this.getBus('zone',this.zoneItem)
                    }
                }
            }else{
                this.isZoneSelAll = this.mutiGateVal.length >= this.gateData.length ? true : false
                if(this.zoneItem.length) {
                    this.getBus('zone',this.zoneItem)
                } else {
                    this.getBus('zone',[])
                }
            }
        },
        getFloorList() {
            this.mutiGateVal = [];
            this.gateData = [];
            this.$api.base.floor({
                mallId: this.mallVal,
                status: 1,
            })
                .then(res => {
                    this.floorList = [];
                    this.floorItem = [];
                    if(res.data.data.length > 0) {
                        let result = res.data.data;
                        this.floorItem = [result[0].id];
                        this.getBus('floor',this.floorItem)
                        this.floorList = result;
                        this.isFloorSelAll = this.floorItem.length == this.floorList.length ? true : false;
                    }else{
                        this.getBus('floor',[])
                    }
                })
        },
        getZoneList() {
            this.mutiGateVal = [];
            this.gateData = [];
            this.$api.base.zone({
                mallId: this.mallVal,
                status: 1,
                sortName: 'floor.name, zone.name',
            })
                .then(res => {
                    this.zoneList = [];
                    this.zoneItem = [];
                    if(res.data.data.length > 0) {
                        let result = res.data.data;
                        this.zoneItem = [result[0].id];
                        this.getBus('zone',this.zoneItem)
                        this.zoneList = result;
                    }else{
                       this.getBus('zone',[]) 
                    }
                })
        },
        getBus(type,val) {
            let obj = {};
            obj[type] = val;
            Bus.$emit('level',obj)
        }
    }
}
</script>

<style>

</style>