<template>
    <div class="left-tree">
        <div class="stats-classify">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="统计分类" name="first"></el-tab-pane>
                <div class="classify">
                    <div v-for="item in statsClassify" :key="item.type" @click="classifyChange(item)"
                        :class="['classify-item', item.type == classify ? 'active' : '']">{{ item.name }}</div>
                </div>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import PubSub from 'pubsub-js'
import { TableMixin } from '@/mixins/tableMixin'
import { getSorterDirection, refineRequestBody } from '@/utils/requestWrappers'
import { dictionaryEscape, getDictionaryByCode } from '@/utils/dictionary'
export default {
    name: 'TablePage',
    mixins: [TableMixin],
    props: {
        statsClassify: {
            default: () => [],
            type: Array
        }
    },
    data() {
        return {
            activeName: 'first',
            classify:''
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
        dictionaryEscape,
        getSorterDirection,
        handleClick() { },
        classifyChange(item) {
            let data = item ? item : this.statsClassify[0]
            this.classify = item.type
            this.$emit('classifyChange',data)
        },
    },
    beforeDestroy() {
        // 在组件销毁之前 清除订阅消息
        PubSub.unsubscribe(this.pubSub)
    }
}
</script>

<style lang="scss" scoped>
.stats-classify {
    padding: 10px 16px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;

    .classify-item {
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        padding-bottom: 10px;
        font-size: 14px;
        text-align: center;
        border: 1px solid #205e94;
        border-radius: 5px;
        box-sizing: border-box;
        margin-bottom: 10px;

        &:hover {
            color: #43a1ff;
            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
        }
    }

    .active {

        color: #43a1ff;

    }
}
</style>
