<template>
    <div class="floor-option-content">
        <span class="condition-item-text">{{$t('asisTab.floorT')}}</span>
        <div class="condition-item-option" v-show="objectVal === 1">
            <el-select v-model="floorVal" filterable :placeholder="$t('pholder.floorSelect')" class="floor-sel-box format-sel-box">
                <el-option v-for="item in mutiFloorData" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
        </div>
        <div class="condition-item-option" v-show="objectVal === 2">
            <el-select v-model="mutiFloorVal" filterable :placeholder="$t('pholder.floorSelect')" class="floor-sel-box format-sel-box" multiple collapse-tags @change="floorChangeHandle">
                <div :class="isFloorSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('floor')">
                    <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 mutiFloorData" :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: {
        objectVal: Number,
        asisLevel: String,
    },
    name: 'floor-option-content',
    data() {
        return {
            floorVal: '',
            mutiFloorVal: [],
            mutiFloorData: [],
            isFloorSelAll: false,
            mallVal: '',
        }
    },
    watch: {
        asisLevel(level) {
            if(level == 'floor') {
                this.getFloorOpt(this.mallVal)
            }
        }
    },
    created() {
        var _this = this;
        Bus.$on('mallVal', function(val) {
            _this.mallVal = val
            if(_this.asisLevel == 'floor') {
                _this.getFloorOpt(val)
            }
        })
    },
    mounted() {

    },
    methods: {
        floorChangeHandle() {
            this.isFloorSelAll =  this.mutiFloorVal.length >= this.mutiFloorData.length ? true: false;
        },
        selAllHandle(selType) {
            if(this.isFloorSelAll) {
                this.isFloorSelAll = false;
                if(this.mutiFloorVal.length == this.mutiFloorData.length) {
                    this.mutiFloorVal = [];
                }
            } else {
                this.isFloorSelAll = true;
                if(this.mutiFloorVal.length == this.mutiFloorData.length) {
                    this.mutiFloorVal = [];
                } else {
                    this.mutiFloorVal = [];
                    this.mutiFloorData.forEach(item => {
                        this.mutiFloorVal.push(item.id);
                    })
                }
            }
        },
        getFloorOpt(mall_id) {
            this.mutiFloorVal = [];
            this.floorVal = '',
            this.mutiFloorData = [];
            this.isFloorSelAll = false;
            this.$api.base.floor({
                mallId: mall_id,
                accountId: this.$cookie.get('accountId'),
                status: 1,
            })
            .then(res => {
                if (res.data.data.length > 0) {
                    let result = JSON.parse(JSON.stringify(res.data.data));
                    result.unshift({
                        name: this.$t('asisTab.all'),
                        id: ''
                    })
                    this.mutiFloorData = res.data.data;
                    this.mutiFloorVal = [res.data.data[0].id];
                    this.floorVal = res.data.data[0].id;
                    this.isFloorSelAll = this.mutiFloorVal.length == this.mutiFloorData.length ? true : false
                }
            })
            .catch(err => {
                this.catchErrorHandle(err)
            })
        }
    }
}
</script>

<style>

</style>