<template>
    <div class="gate-option-content">
        <span class="condition-item-text">{{$t('asisTab.inOutT')}}</span>
        <div class="condition-item-option" v-show="objectVal === 1">
            <el-select v-model="gateVal" :placeholder="$t('pholder.gateType')" filterable class="mall-sel-box">
                <el-option v-for="item in gateData" :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="mutiGateVal" :placeholder="$t('pholder.gateType')" filterable class="mall-sel-box" multiple collapse-tags @change="gateChangeHandle">
                <div :class="isGateSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('gate')">
                    <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 gateData" :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: 'gate-option-content',
    data() {
        return {
            gateVal: '',
            mutiGateVal: [],
            gateData: [],
            isGateSelAll: false,
            mallVal: '',
            gateLevel: {}
        }
    },
    watch: {
        asisLevel(level) {
            if(level == 'gate') {
                this.getGateData(this.gateLevel)
            }
        }
    },
    created() {
        var _this = this;
        Bus.$on('mallVal', function(val) {
            _this.mallVal = val;
        })
        Bus.$on('level', function(val) {
            _this.gateLevel = val
            _this.getGateData(_this.gateLevel)
        })
    },
    mounted() {

    },
    methods: {
        getRequestUrl() {
            let _this = this;
            let requersUrl = {
                all: function(val) {
                    let  param = {
                        accountId: _this.$cookie.get('accountId'),
                        mallId: val ? val : _this.mallVal,
                        status: 1,
                        type_arr: '1,3',
                    }
                    _this.getAllGates(param)
                },
                mall: function(val) {
                    let  param = {
                        mallId: val ? val : _this.mallVal,
                        isMallGate: 1,
                        status: 1,
                        type_arr: '1,3',
                    }
                    _this.getAllGates(param)
                },
                floor: function(val) {
                    let  param = {
                        FloorId_arr: val
                    }
                    if(val) {
                        _this.getFloorGate(param)
                    }else{
                        _this.gateVal = ''
                        _this.mutiGateVal = [];
                        _this.gateData = [];
                    }
                },
                zone: function(val) {
                    let  param = {
                        ZoneId_arr: val
                    }
                    if(val) {
                        _this.getZoneGate(param)
                    }else{
                        _this.gateVal = ''
                        _this.mutiGateVal = [];
                        _this.gateData = [];
                    }
                }
            }
            return requersUrl
        },
        getGateData(val) {
            let paramsRequest = this.getRequestUrl();
            for(var k in val) {
                // console.log(paramsRequest,val[k].toString())
                paramsRequest[k](val[k] ? val[k].toString() : val[k])
            }
        },
        gateChangeHandle() {
            this.isGateSelAll = this.mutiGateVal.length >= this.gateData.length ? true: false;
        },
        selAllHandle(selType) {
            if(this.isGateSelAll) {
                this.isGateSelAll = false;
                if(this.mutiGateVal.length == this.gateData.length) {
                    this.mutiGateVal = [];
                }
            } else {
                this.isGateSelAll = true;
                if(this.mutiGateVal.length == this.gateData.length) {
                    this.mutiGateVal = [];
                } else {
                    this.mutiGateVal = [];
                    this.gateData.forEach(item => {
                        this.mutiGateVal.push(item.id);
                    })
                }
            }
        },
        getAllGates(params) {
            this.mutiGateVal = [];
            this.gateData = [];
            this.$api.base.gate(params)
            .then(res => {
                if (res.data.data.length > 0) {
                    let result = res.data.data;
                    for(var k in this.gateLevel) {
                        if(k == 'all') {
                            result.forEach(item => {
                                window.sessionStorage.setItem('gate-' + item.id, item.name);
                            })
                        }
                    }
                    this.mutiGateVal = [result[0].id];
                    this.gateVal = result[0].id;
                    this.gateData = result;
                    this.isGateSelAll = this.mutiGateVal.length >= this.gateData.length ? true : false;
                }
            })
        },
        getFloorGate(params) {
            this.mutiGateVal = [];
            this.gateData = [];
            this.$api.base.floorGate(params)
            .then(res => {
                if (res.data.data.length > 0) {
                    let result = res.data.data;
                    result.forEach(item => {
                        if (item.gate && item.gate.status === 1) { // 正常
                            item['id'] = item.gateId;
                            item['name'] = item.gate.name || window.sessionStorage.getItem('gate-' + item.gateId);
                            this.gateData.push(item)
                        }
                    })
                    this.mutiGateVal = this.gateData.length > 0 ? [this.gateData[0].id] : [];
                    this.gateVal = this.gateData.length > 0 ? this.gateData[0].id : '';
                    // this.gateData = result;
                    this.isGateSelAll = this.mutiGateVal.length >= this.gateData.length ? true : false;
                }
            })
        },
        getZoneGate(params) {
            this.mutiGateVal = [];
            this.gateData = [];
            this.$api.base.zoneGate(params)
            .then(res => {
                if (res.data.data.length > 0) {
                    let result = res.data.data;
                    result.forEach(item => {
                        item['id'] = item.gateId;
                        item['name'] = window.sessionStorage.getItem('gate-' + item.gateId);
                    })
                    this.mutiGateVal = [result[0].id];
                    this.gateVal = result[0].id;
                    this.gateData = result;
                    this.isGateSelAll = this.mutiGateVal.length >= this.gateData.length ? true : false;
                }
            })
        },
    }
}
</script>

<style>

</style>