<template>
    <!-- 底部导航 -->
    <view v-if="(propValue || null) !== null" class="footer-nav flex-row jc-c align-c" :class="nav_type == 1 ? 'bottom-line-exclude' : ''">
        <view class="flex-1 wh-auto" :style="style_container">
            <view class="footer-nav-content flex-row jc-c align-c wh-auto" :style="style_img_container">
                <view class="flex-row jc-c align-c wh-auto" :class="nav_type == 0 ? 'bottom-line-exclude' : ''">
                    <view class="flex-row jc-sa align-c wh padding-0">
                        <block v-for="(item, index) in nav_content" :key="index">
                            <view class="flex-1 flex-col jc-c align-c gap-5 pr" :data-value="item.link.page || ''" @tap="url_event">
                                <view v-if="nav_style != 2" class="img-content pr">
                                    <view class="img-item pa border-radius-xs animate-linear" :class="active_index != index ? 'active' : ''">
                                        <template v-if="item.img.length > 0">
                                            <image :src="item.img[0].url" class="img dis-block" model="widthFix"></image>
                                        </template>
                                    </view>
                                    <view class="img-item pa border-radius-xs animate-linear" :class="active_index == index ? 'active' : ''">
                                        <template v-if="item.img_checked.length > 0">
                                            <image :src="item.img_checked[0].url" class="img dis-block" model="widthFix"></image>
                                        </template>
                                    </view>
                                </view>
                                <text v-if="nav_style != 1" class="animate-linear text-size-xs pr z-i" :style="active_index == index ? text_color_checked : default_text_color">{{ item.name }}</text>
                                <view v-if="(item.badge || null) != null" class="pa badge-icon">
                                    <component-badge :propNumber="item.badge"></component-badge>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    let app = getApp();
    import { common_styles_computer, common_img_computer } from '@/common/js/common/common.js';
    import componentBadge from '@/components/badge/badge';
    export default {
        props: {
            propKey: {
                type: [String,Number],
                default: '',
            },
            propValue: {
                type: Object,
                default: null,
            },
            // 底部选中索引
            propFooterActiveIndex: {
                type: Number,
                default: 0,
            }
        },
        data() {
            return {
                style_container: '',
                style_img_container: '',
                style: '',
                nav_content: [],
                nav_type: 0,
                nav_style: 0,
                default_text_color: '',
                text_color_checked: '',
                active_index: 0,
            };
        },
        components: {
            componentBadge,
        },
        // 属性值改变监听
        watch: {
            // 唯一key
            propKey(value, old_value) {
                this.init();
            },
            // 选中索引
            propFooterActiveIndex(value, old_value) {
                this.init();
            },
        },
        // 页面被展示
        created: function () {
            this.init();
        },
        methods: {
            // 初始化
            init() {
                if ((this.propValue || null) !== null) {
                    let new_content = this.propValue.content || {};
                    let new_style = this.propValue.style || {};
                    let nav_content = new_content.nav_content || [];
                    let page = app.globalData.current_page() || null;
                    let active_index = this.propFooterActiveIndex;
                    if (page != null) {
                        // 角标链接定义
                        let badge_arr = {
                            '/pages/cart/cart': 'cart',
                            '/pages/cart-page/cart-page': 'cart',
                        };
                        for (var i in nav_content) {
                            if ((nav_content[i]['link'] || null) != null && (nav_content[i]['link']['page'] || null) != null) {
                                // 选中索引
                                if (nav_content[i]['link']['page'] == '/' + page) {
                                    active_index = i;
                                }

                                // 获取角标数据
                                var badge_key = badge_arr[nav_content[i]['link']['page']];
                                if (badge_key !== undefined) {
                                    nav_content[i]['badge'] = app.globalData.get_tab_bar_badge(badge_key);
                                }
                            }
                        }
                    }
                    this.setData({
                        nav_content: nav_content,
                        nav_type: new_content.nav_type || 0,
                        nav_style: new_content.nav_style || 0,
                        active_index: active_index,
                        default_text_color: 'color:' + new_style.default_text_color || 'rgba(0, 0, 0, 1)',
                        text_color_checked: 'color:' + new_style.text_color_checked || 'rgba(204, 204, 204, 1)',
                        style_container: common_styles_computer(new_style.common_style),
                        style_img_container: common_img_computer(new_style.common_style),
                    });

                    // 高度计算
                    let nav_min_height = 70;
                    var nav_height = parseInt(new_style.common_style.padding_top) + parseInt(new_style.common_style.padding_bottom) + 44;
                    if (nav_height < nav_min_height) {
                        nav_height = nav_min_height;
                    }
                    let footer_height = nav_height + parseInt(new_style.common_style.margin_top) + parseInt(new_style.common_style.margin_bottom);

                    // #ifndef H5
                    // 底部菜单距离底部的安全距离，减去20、默认的安全距离太高了
                    var safe_areaInsets = uni.getSystemInfoSync().safeAreaInsets || {};
                    var bottom = parseInt(safe_areaInsets.bottom || 0);
                    if (bottom > 0) {
                        bottom -= 24;
                    }
                    footer_height += bottom;
                    // #endif

                    // 回调高度
                    this.$emit('onFooterHeight', footer_height);
                }
            },

            // 跳转链接
            url_event(e) {
                let index = e.currentTarget.dataset.index;
                let item = this.nav_content[index];
                app.globalData.url_event(e);
                this.$emit('onFooterTap', index, item);
            },
        },
    };
</script>
<style lang="scss" scoped>
    .footer-nav {
        z-index: 102;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0 auto;
        background-color: transparent;
        .footer-nav-content {
            min-height: 140rpx;
            box-sizing: border-box;
            .img-content {
                width: 44rpx;
                height: 44rpx;
                .img-item {
                    width: 44rpx;
                    height: 44rpx;
                    opacity: 0;
                    &.active {
                        opacity: 1;
                    }
                    .img {
                        width: 44rpx;
                        height: 44rpx;
                    }
                }
            }
            .badge-icon {
                margin-top: -70rpx;
                margin-right: -70rpx;
            }
        }
    }
    /* #ifdef H5 */
    @media only screen and (min-width: 1600rpx) {
        .footer-nav {
            max-width: 1600rpx;
        }
    }
    /* #endif */
</style>