<template>
    <view class="footer-menue-wrap">
        <view class="footer-menue-container">
            <view class="footer-menue">
                <view class="menue-item" :data-key="item.key" @tap="gotoLink" v-for="(item, index) in menue" :key="index">
                    <navigator :url="item.linkto" class="link" v-if="activeItemClone != item.key" open-type="redirect">
                        <image class="menue-item-icon" :src="activeItemClone == item.key ? item.activeIcon : item.icon"></image>
                        <view :class="activeItemClone == item.key ? 'menue-item-text-active' : 'menue-item-text'">{{ item.text }}</view>
                    </navigator>

                    <view v-if="activeItemClone == item.key">
                        <image class="menue-item-icon" :src="activeItemClone == item.key ? item.activeIcon : item.icon"></image>
                        <view :class="activeItemClone == item.key ? 'menue-item-text-active' : 'menue-item-text'">{{ item.text }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/component/footerMenue/footerMenue.js
export default {
    data() {
        return {
            menue: [
                {
                    icon: '/static/pages/component/footerMenue/images/loginhome.svg',
                    activeIcon: '/static/pages/component/footerMenue/images/loginhomeactive.svg',
                    linkto: '/pages/home/home',
                    text: '首页',
                    key: 'home'
                },
                {
                    icon: '/static/pages/component/footerMenue/images/loginme.svg',
                    activeIcon: '/static/pages/component/footerMenue/images/loginmeactive.svg',
                    linkto: '/packageC/pages/login/login',
                    text: '我的',
                    key: 'me'
                }
            ],

            //active项
            activeItemClone: 'home',

            activeItemClone: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        activeItem: {
            type: String,
            default: 'home'
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached() {
            const me = this;
        },

        gotoLink() {
            console.log('占位：函数 gotoLink 未声明');
        }
    },
    created: function () {},
    watch: {
        activeItem: {
            handler: function (news, olds, path) {
                this.activeItemClone = this.clone(this.activeItem);
                this.setData({
                    activeItemClone: news
                });
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './footerMenue.css';
</style>
