<template>
    <view class="bottom-tab">
        <block v-for="(item, index) in tabList" :key="index">
            <view
                class="bottom-tab-item"
                :class="{ one: itemShowNum === 1, two: itemShowNum === 2 }"
                @click="changeTap(item)"
            >
                <image
                    v-if="curTab == item.id"
                    class="first-img"
                    :src="item.imgOn"
                ></image>
                <image
                    v-if="curTab != item.id"
                    class="first-img"
                    :src="item.imgOff"
                ></image>
                <text
                    :class="
                        curTab == item.id
                            ? 'text-position text-on'
                            : 'text-position'
                    "
                    >{{ item.name }}</text
                >
            </view>
        </block>
    </view>
</template>

<script>
export default {
    name: "wyg-bottom-tab",
    props: {
        tabIndex: {
            //图片的尺寸
            type: String,
            default: "1",
        },
    },
    data() {
        return {
            curTab: 1,
        };
    },
    created() {
        this.curTab = new Number(this.tabIndex);
    },
    methods: {
        $redirect(_url) {
            console.log(_url);
            uni.switchTab({
                url: _url,
            });
        },

        changeTap(e) {
            this.curTab = e.id;
            this.$redirect(e.url);
        },
        setIndex(v) {
            this.curTab = new Number(v);
        },
    },
    computed: {
        tabList() {
            // let page = getCurrentPages();
            // let curPage = page[page.length-1];
            // console.log(curPage.route,this.$store.state.common.tabList,234)
            // if(curPage.route === 'pages/index/index'){
            //     for(let item of this.$store.state.common.tabList){
            //         if(item.url === '/pages/index/index' && item.hide){
            //             this.router.push({
            //                 path:'/pages/assistant/index',
            //                 isTabBar:true
            //             })
            //         }
            //     }
            // }

            // let page = getCurrentPages();
            // let curPage = page[page.length - 1];
            let tabList = this.$store.state.common.tabList;
            // let user = this.$store.state.user.user;

            // if (
            //     curPage.route === "pages/index/index" ||
            //     curPage.route === "pages/manage/index"
            // ) {
            //     if (user.roleId && user.bundleId !== 0) {
            //     } else {
            //         this.router.push({
            //             path: "/pages/guide/index",
            //             isTabBar: true,
            //         });
            //     }
            // }

            // if (user.roleId && user.bundleId !== 0) {
            // } else {
            //     tabList = JSON.parse(JSON.stringify(tabList));
            //     for (let item of tabList) {
            //         if (item.id === 1 || item.id === 2) {
            //             item.url = "/pages/guide/index";
            //         }
            //     }
            // }
            return tabList;
        },
        itemShowNum() {
            let i = 0;
            for (let item of this.tabList) {
                if (!item.hide) {
                    i++;
                }
            }
            return i;
        },
    },
    watch: {
        tabIndex(v) {
            this.curTab = new Number(v);
        },
    },
};
</script>

<style lang="scss">
.bottom-tab {
    position: fixed;
    background-color: #fdfdfd;
    left: 0%;
    bottom: 0%;
    width: 100%;
    height: 2.9rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3000;
    border-top: 1px solid #f1f1f1;
    .bottom-tab-item {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &.one {
            width: 100%;
        }
        &.two {
            width: 50%;
        }

        .first-img {
            width: 1.5rem;
            height: 1.5rem;
        }
        .text-position {
            margin-top: 0rem;
            font-size: 0.6rem;
            color: #757575;
        }
        .text-on {
            color: #27a34f;
        }
    }
}
</style>
