<template>
    <div>
        <!-- 分析层面 -->
        <div class="analysis-level-wrapper" style="border-top: 1px solid #000;">
            <div class="analysis-level-left">
                <i class="el-icon-search"></i>
                <span class="analysis-level-text">{{$t('asisTab.level')}}</span>
            </div>
            <div class="analysis-level-right">
                <ul class="analysis-type-box">
                    <li :class="item.className" v-for="(item, index) in tabList" :key="item.value" @click="tabClickHandle(index)">
                        <span class="analysis-item-title">{{ i18nFormatter(item.label) }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 数据选项 -->
        <common-option-content :activeTab="activeTabItem"></common-option-content>
    </div>
</template>

<script>
// 调用方式, 传入分析层面
// let tabList = [{
//     label: 'mall',
//     value: 'mall',
//     className: 'analysis-item'
//     cascade: []  // 所需级联
// }, {
//     label: 'floor',
//     value: 'floor',
//     className: 'analysis-item'
// },
// ...]
import mallOptionContent from './mallOptionContent'
import floorOptionContent from './floorOptionContent'
import zoneOptionContent from './zoneOptionContent'
import gateOptionContent from './gateOptionContent'
import commonOptionContent from './commonOptionContent'
export default {
    props: {
        tabList: {
            type: Array,
            required: true,
            default: []
        }
    },
    components: {
        'mall-option-content': mallOptionContent,
        'floor-option-content': floorOptionContent,
        'zone-option-content': zoneOptionContent,
        'gate-option-content': gateOptionContent,
        'common-option-content': commonOptionContent,
    },
    data() {
        return {
            activeTabItem: ''
        }
    },
    created() {
        this.tabClickHandle(0)
    },
    methods: {
        i18nFormatter(label){
            let langeLabel = 'asisTab.' + label;
            return this.$t(langeLabel)
        },
        tabClickHandle(index) {
            if(this.tabList[index].className === 'analysis-item') {
                this.tabList.forEach(element => {
                    element.className = 'analysis-item';
                });
                this.tabList[index].className = 'analysis-item tabs-active';
                this.activeTabItem = this.tabList[index];
            }
        }
    }
}
</script>

<style scoped>
    /* .analysis-item {
        float: left;
        list-style: none;
        font-size: 13px;
        color: #666;
        cursor: pointer;
        padding: 0 30px;
        position: relative;
    }
    
    .analysis-item.tabs-active {
        color: #3BB8FF;
    } */
</style>