<template>
    <div class='system-menu'>
        <div class='system' v-for='(system ,index) in systemData' :key='index' @click='changeSystem(system)' :class='system.active?"active":""'>
            <i class='iconfont' :class='system.icon'></i>
            <div>{{system.text}}</div>
        </div>
    </div>
</template>
<script>
/**
 * 设备设施左侧菜单
 * 点击后,传回父组件, text, categoryId, smsxt  三个字段
 */
import { mapGetters, mapActions, mapMutations } from 'vuex'

export default {
    name: 'systemMenu',
    props: {},
    components: {},
    data() {
        return {
            systemData: [
                { text: '供电', categoryId: 'GDXT', smsxt: '1001', icon: 'wanda-gongdian1', active: true },
                { text: '暖通', categoryId: 'NTXT', smsxt: '1002', icon: 'wanda-nuantong1', active: false },
                { text: '消防', categoryId: 'XFXT', smsxt: '1003', icon: 'wanda-xiaofang1', active: false },
                { text: '弱电', categoryId: 'RDXT', smsxt: '1004', icon: 'wanda-ruodian1', active: false },
                { text: '给排水', categoryId: 'JPSXT', smsxt: '1005', icon: 'wanda-geipaishui1', active: false },
                { text: '电梯', categoryId: 'DTXT', smsxt: '1006', icon: 'wanda-dianti1', active: false },
                { text: '燃气', categoryId: 'RQXT', smsxt: '1007', icon: 'wanda-ranqi1', active: false },
                { text: '土建', categoryId: 'SCPZ', smsxt: '1008', icon: 'wanda-tujian1', active: false },
            ],
        }
    },
    create() {},
    beforeMount() {},
    mounted() {},
    methods: {
        ...mapMutations(['SETCATEGORYID', 'SETSMSXT']),
        /**
         * 点击系统,进行切换,并传回 父组件选中系统值
         */
        changeSystem({ text, categoryId, smsxt }) {
            this.systemData.map((item) => {
                item.active = false
                if (item.categoryId === categoryId) {
                    item.active = true
                }
            })
            // 设置 categoryId,smsxt
            this.SETCATEGORYID(categoryId)
            this.SETSMSXT(smsxt)
            this.$emit('chooseSystem', { text, categoryId, smsxt })
        },
    },
}
</script>
<style lang='less' scoped>
.system-menu {
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #f5f6f7;
    flex-direction: column;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    .system {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        i {
            margin-bottom: 10px;
        }
        i:before {
            font-size: 20px;
        }
    }
    // 激活的系统图标颜色
    .active {
        background-color: #fff;
        color: #025baa;
        i {
            color: #025baa;
        }
    }
}
</style>