<template>
    <div class="wrapper">
        <div v-for="(item,index) in dataList" :key="index">
            <div :class="clickIndex==index?'chooseitem':'item'" @click="click(item,index)">
                <div class="content">
                    <div class="leftdiv">
                        <div class="leftdivcongtent"></div>
                    </div>
                    <div class="mid">
                        <i :class="[pageicon, 'iconfont']"></i>
                        <span >{{item.name}}</span>
                        <i :class="['el-icon-close', (clickIndex==index&&index!=0)?'close':(index!=0?'closenone':'closeforever')]"
                            @click.stop="deleteTab(item,index)"></i>
                    </div>
                    <div class="rightdiv">
                        <div class="rightdivcongtent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import store from '@/store/index'
    export default {
        components: {},
        props: {
            dataList: {
                type: Array,
            },
            clickIndex: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {

            };
        },
        watch: {},
        computed: {
            pageicon() {
                if (store.getters?.getMenuInfo?.meta?.icon) {
                    return store.getters.getMenuInfo.meta.icon
                } else {
                    return "icon-shangpinguanli"
                }
            },
        },
        methods: {
            click(item, index) {
                this.$emit("itemclick", item, index)
            },
            deleteTab(item, index) {
                this.$emit("remove", item, index)
            },
        },
        created() {},
        mounted() {
        }
    };
</script>
<style lang="less" scoped>
    .wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: 0px 6px 6px 0px rgba(174, 174, 174, 0.09);
        z-index: 1;
        background:white;
        padding-top: 10px;

        .item {
            .content {
                border-radius: 5px;
                display: flex;
                height: 40px;
                flex-direction: row;
                align-items: center;
            }
            .mid {
                background: white;
                width: 100px;
                height: 40px;
                border-radius: 5px 5px 0px 0px;
                display: flex;
                align-items: center;
                padding-left: 10px;
                padding-right: 10px;
                font-size: 14px;
                .close {
                    margin-left: 5px;
                }

                .closenone {
                    margin-left: 5px;
                    display: none
                }

                .closeforever {
                    margin-left: 5px;
                    display: none
                }

                .iconfont {
                    margin-right: 5px;
                }

                &:hover {
                    color: #328DFF;

                    .closenone {
                        margin-left: 5px;
                        display: block
                    }
                }
            }

            .rightdiv {
                width: 10px;
                height: 40px;
                background: white;

                .rightdivcongtent {
                    border-radius: 0px 0px 0px 10px;
                    width: 10px;
                    height: 40px;
                    background: white;
                }
            }

            .leftdiv {
                width: 10px;
                height: 40px;
                background: white;

                .leftdivcongtent {
                    border-radius: 0px 0px 10px 0px;
                    width: 10px;
                    height: 40px;
                    background: white;
                }
            }

        }

        .chooseitem {
            .content {
                border-radius: 5px;
                display: flex;
                height: 40px;
                flex-direction: row;
                align-items: center;
            }

            .mid {
                background: #E8F4FF;
                height: 40px;
                width: 100px;
                border-radius: 5px 5px 0px 0px;
                display: flex;
                align-items: center;
                padding-left: 10px;
                padding-right: 10px;
                color: #328DFF;
                font-size: 14px;

                .close {
                    margin-left: 5px;
                }

                .closenone {
                    margin-left: 5px;
                    display: none
                }

                .closeforever {
                    margin-left: 5px;
                    display: none
                }

                .iconfont {
                    margin-right: 5px;
                }
            }

            .rightdiv {
                width: 10px;
                height: 40px;
                background: #E8F4FF;

                .rightdivcongtent {
                    border-radius: 0px 0px 0px 10px;
                    width: 10px;
                    height: 40px;
                    background: white;
                }
            }

            .leftdiv {
                width: 10px;
                height: 40px;
                background: #E8F4FF;

                .leftdivcongtent {
                    border-radius: 0px 0px 10px 0px;
                    width: 10px;
                    height: 40px;
                    background: white;
                }
            }
        }

    }
</style>