<template>
    <div class="needs_menu">
        <div class="needs_title"><img src="../assets/needs_icon.png" />{{ title }}</div>
        <!-- <div class="menu_tab" :class="{ active: menu_tab === 0 }" @click="menu_tab = 0">官方问答</div>
        <div class="menu_tab" :class="{ active: menu_tab === 1 }" @click="menu_tab = 1">热议话题</div>
        <div class="menu_tab" :class="{ active: menu_tab === 2 }" @click="menu_tab = 2">互动提问</div> -->
        <div
            class="menu_tab"
            v-for="(item, index) in tabList"
            :key="index"
            :class="index == current ? 'active' : ''"
            @click="getTab(item.id, index, $event)"
        >
            {{ item.name }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'SideBar',

    props: {
        current: {
            type: Number,
            derault: 0
        },
        tabList: {
            type: Array
        },
        title: {
            type: String
        }
    },

    data() {
        return {};
    },
    methods: {
        getTab(index, e) {
            this.$emit('change', index, e);
        }
    }
};
</script>
<style lang="less" scoped>
.needs_menu {
    background-color: #fff;
    height: auto;
    padding-bottom: 10px;
    box-sizing: border-box;
    .needs_title {
        color: #fff;
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: url('../assets/needs_bg.png') no-repeat center;
        background-size: 100%;
        position: relative;
        margin-bottom: 10px;
        img {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 34px;
            margin: auto;
        }
    }
    .menu_tab {
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        &.active {
            color: #bf1616;
            // background: linear-gradient(90deg, #bf1616 0%, #ffffff 100%);
            // box-shadow: 2px 0px 0px 0px #bf1616;
            border-left: 2px solid #bf1616;
            background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        }
        + .menu_tab {
            margin-top: 10px;
        }
    }
    .supply_title {
        background: url('../assets/supply_bg.png') no-repeat center;
        background-size: 100%;
    }
}
</style>
