<template>
    <div
        class="diy-nav"
        :style="{
            'padding-top': statusBarHeight + 'px',
            height: navTaberHeight + 'px',
        }"
    >
        <div
            class="nav-main page_red"
            :class="{ theme: themeBg }"
            :style="{
                'padding-top': statusBarHeight + 'px',
                height: navTaberHeight + 'px',
            }"
        >
            <div class="l ">
                <div class="search" @click="jumpSearch">
                    <i class="iconfont iconsearch search-icon"></i>
                    <input
                        type="text"
                        :disabled="true"
                        class="input"
                        placeholder="搜索店内商品"
                    />
                </div>
            </div>
            <div class="r"></div>
        </div>
    </div>
</template>

<script>
let app = getApp();
export default {
    name: "NavBar",

    props: {
        // 标题
        title: {
            type: String,
            default: "",
        },

        // 标题
        curTab: {
            type: String,
            default: '0',
        },

        // themeBg
        themeBg: {
            type: Boolean,
            default: false,
        },
    },

    // 数据
    data() {
        return {
            statusBarHeight: 20, // 状态栏高度
            navTaberHeight: 88,
        };
    },

    // 初始化
    created() {
        let menuButtonObject = uni.getMenuButtonBoundingClientRect();
        uni.getSystemInfo({
            success: (res) => {
                // this.navTaberHeight = res.screenWidth?44/(res.screenWidth/750):88;
                this.statusBarHeight = res.statusBarHeight || 20;
                let navHeight =
                    this.statusBarHeight +
                    menuButtonObject.height +
                    (menuButtonObject.top - this.statusBarHeight) * 2;
                this.navTaberHeight = navHeight;
            },
        });
    },

    // 函数
    methods: {
        // 店铺选择
        goShopSelect() {
            this.router.push({
                path: "/pages/index/index",
                isTabBer: true,
            });
        },

        jumpSearch(){
            console.log('curTab',this.curTab)
            this.router.push({
                path:'/pages/goods/search',
                query:{
                    curTab:this.curTab
                }
            })
        }
    },

    // 数据计算
    computed: {
        activeShop() {
            return this.$store.state.common.activeShop
                ? this.$store.state.common.activeShop.name
                : "未选择店铺";
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.diy-nav {
    height: px(220);
}
.nav-main {
    height: px(220);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    border-bottom: 1px solid #f3f3f3;
    &.theme {
        background-color: #27a34f;
        border-bottom: none;
        color: #fff;
        &.page_red {
            background-color: #27a34f;
        }
        .shop {
            color: #fff;
        }
    }
    .r {
        width: px(300);
        height: 100%;
        flex-shrink: 0;
        margin-left: px(30);
        // background: pink;
    }
    .l {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: px(35);
    }
    .center {
        margin: 0 px(10);
    }
}
.search {
    background: #fff;
    height: px(84);
    border-radius: px(42);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0 px(45);
    border: 1px solid #efefef;
    transform: translate(0,2px);
    .input {
        width: 100%;
        font-size: px(40);
    }
    .search-icon {
        font-size: px(50);
        color: #666;
        margin-right: px(20);
    }
}
.shop {
    display: flex;
    color: #666666;
    font-size: px(36);
    flex-shrink: 0;
    padding-left: px(35);
    &__logo {
        margin-right: px(20);
        width: px(80);
        height: px(80);
        border-radius: 50%;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        /deep/ img {
            width: px(80);
            height: px(80);
        }
    }
    &__name {
        display: flex;
        white-space: nowrap;
        align-items: center;
        // background-color: rgba(255, 255, 255, 0.3);
    }
    &__arrow {
        margin-left: px(10);
        font-size: px(34);
        transform: rotate(-90deg);
    }
}
</style>