<template>
    <div class="page">
        <div id="pageTop">
            <nav-bar2 :title="''" :curTab="curTab"></nav-bar2>
            <section class="shop-info">
                <div class="head-bg">
                    <my-image
                        :src="shopInfo.shopBanner"
                        :mode="'aspectFill'"
                        class="bg"
                    ></my-image>
                    <!-- <div class="search" @click="jump('/pages/goods/search')">
                        <i class="iconfont iconsearch search-icon"></i>
                        <input
                            type="text"
                            :disabled="true"
                            class="input"
                            placeholder="搜索店内商品"
                        />
                    </div> -->
                    <div class="info">
                        <div class="main">
                            <div class="info-l">
                                <div class="name">
                                    {{ shopInfo.name || "加载中..." }}
                                </div>
                                <ul
                                    class="tag-list"
                                    v-if="shopInfo.businessHours"
                                >
                                    <li class="tag-item">
                                        <i
                                            class="iconfont icontime icon"
                                            style="color: #de9838"
                                        ></i>
                                        营业时间：{{ shopInfo.businessHours }}
                                    </li>
                                </ul>
                                <ul
                                    class="tag-list"
                                    v-if="shopInfo.managerTelephone"
                                >
                                    <li class="tag-item">
                                        <i
                                            class="iconfont iconkefu icon"
                                            style="color: #39ad96"
                                        ></i>
                                        店长电话：{{
                                            shopInfo.managerTelephone
                                        }}
                                    </li>
                                </ul>
                            </div>
                            <div class="info-r">
                                <my-image
                                    :src="shopInfo.logo"
                                    class="img"
                                ></my-image>
                            </div>
                        </div>
                        <div class="notice" v-if="shopInfo.notice">
                            公告：{{ shopInfo.notice }}
                        </div>
                    </div>
                </div>
            </section>
            <section class="shop-other">
                <block v-if="shopInfo.couponList && shopInfo.couponList.length">
                    <div class="discount">
                        <div class="l">
                            <h3 class="name">优惠</h3>
                            <!-- <span class="tag">3折起</span> -->
                            <span class="tag">{{ maxCoupon }}</span>
                        </div>
                        <i class="iconfont iconarrow r-icon"></i>
                    </div>
                    <scroll-view class="coupon-list" :scroll-x="true">
                        <ul class="list-main">
                            <!-- class.ghost 已领取样式 -->
                            <li
                                class="coupon-item"
                                :class="{ ghost: item.received }"
                                v-for="item of shopInfo.couponList"
                                :key="item.id"
                                @click="couponDetail(item)"
                            >
                                <div class="info">
                                    <div class="money">
                                        <span class="symbol">￥</span>
                                        {{ item.value | minuteToRmb2 }}
                                    </div>
                                    <div class="des">
                                        <div class="text">{{ item.name }}</div>
                                        <div class="type">满减券</div>
                                    </div>
                                </div>
                                <div class="tool">
                                    {{ item.received ? "已领取" : "领取" }}
                                </div>
                            </li>
                        </ul>
                    </scroll-view>
                </block>
                <!-- <div class="ranking">
                    <span class="tag">榜单</span>
                    广元超市便利人气榜第3名
                </div> -->

                <!-- <div class="score" id="cate">
                    <div class="l">
                        <div class="num">4.6</div>
                        <div class="info">
                            <div class="text">“很棒不错，包装也好”</div>
                            <div class="des">
                                <span>好评 926</span>
                                <span>满意 926</span>
                                <span>服务号 926</span>
                                <span>价格实惠 926</span>
                            </div>
                        </div>
                    </div>
                    <i class="iconfont iconarrow r-icon"></i>
                </div> -->
            </section>
        </div>

        <div class="tab" v-if="enableYouXuan">
            <div
                v-for="item of pageTabList"
                :key="item.name"
                @click="tabClick(item.value)"
                :class="{ on: curTab === item.value }"
            >
                {{ item.title }}
            </div>
            <!-- <div @click="tabClick('1')" :class="{ on: curTab === '1' }">
                厂商直邮
            </div> -->
        </div>

        <!-- :class="{ dis: categoryDis }" -->
        <category
            v-if="
                loginAfter &&
                curTab === '0' &&
                productCount.selfProductCount !== 0
            "
            :loginAfter="loginAfter"
            :cateId="cateId"
            @cateChange="cateChange"
            ref="category"
            class="category"
        ></category>
        <recommend
            ref="recommend"
            :cateId="cateId"
            @cateChange="cateChange"
            v-if="
                loginAfter &&
                curTab === '1' &&
                productCount.youXuanProductCount !== 0
            "
            class="category"
        ></recommend>

        <div class="null" v-if="showNull">
            <img class="null__img" src="/static/common/goods_null_2.jpg" alt />
            <div class="null__title">抱歉！当前没有相关商品</div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import NavBar2 from "../../components/layout/nav-bar2";
import Category from "./category";
import Recommend from "./recommend";

export default {
    name: "",
    components: {
        MyImage,
        NavBar2,
        Category,
        Recommend,
    },
    // 数据
    data() {
        return {
            shopInfo: {},
            navHeight: 0,
            categoryDis: true,
            index: 1,
            loginAfter: false,
            curTab: "0",
            cateId: "",
            productCount: {
                selfProductCount: "",
                youXuanProductCount: "",
            },
            shopId: "",
            pageTabList: [
                { name: "shop", index: 0, title: "店铺" },
                { name: "yx", index: 1, title: "厂商直邮" },
            ],
        };
    },
    filters: {},
    onLoad(opts) {
        if (opts.tab) {
            this.curTab = opts.tab;
        }
        if (opts.cateId) {
            this.cateId = opts.cateId;
        }
        this.getstatusBarH();
        this.fn.shareMenu();
    },
    async onShow() {
        await this.fn.init();
        if (!this.activeShop) {
            this.router.push({
                path: "/pages/index/index",
                isTabBer: true,
            });
            return;
        }
        this.loginAfter = true;
        // this.getShopData();
        if (this.$refs.category) {
            this.$refs.category.refresh(this.shopId !== this.activeShop.id);
        }
        if (this.$refs.recommend) {
            this.$refs.recommend.refresh(this.shopId !== this.activeShop.id);
        }
        this.shopId = this.activeShop.id;
        this.initTab();
    },

    // onPullDownRefresh() {
    //     this.getList();
    // },

    onPageScroll(opts) {
        this.getScrollTop(opts.scrollTop);
    },

    // 函数
    methods: {
        initTab() {
            this.fn.updateShop(this.$store.state.common.activeShop.id, () => {
                this.shopInfo = this.$store.state.common.activeShop;
            });
            console.log(this.enableYouXuan);
            if (!this.enableYouXuan) {
                this.curTab = "0";
            } else {
                this.api.get("/Shop/getTab",{storeId:this.activeShop.store.id}).then((res) => {
                    this.pageTabList = JSON.parse(res.data);
                    this.pageTabList.sort((x, y) => x.index - y.index);
                    let yxIndex = 0;
                    let shopIndex = 0;
                    for (let item of this.pageTabList) {
                        if (item.name === "shop") {
                            item.value = "0";
                            shopIndex = item.index;
                        }
                        if (item.name === "yx") {
                            item.value = "1";
                            yxIndex = item.index;
                        }
                    }
                    console.log(yxIndex, shopIndex);
                    if (yxIndex < shopIndex) {
                        this.curTab = "1";
                    }
                    this.pageTabList = [...this.pageTabList];
                });
            }
            this.api.get("/Product/GetCount").then((res) => {
                //有优选
                this.productCount = res.data;
            });
        },

        // 获取状态栏高
        getstatusBarH() {
            let menuButtonObject = uni.getMenuButtonBoundingClientRect();
            uni.getSystemInfo({
                success: (res) => {
                    // this.navTaberHeight = res.screenWidth?44/(res.screenWidth/750):88;
                    let statusBarHeight = res.statusBarHeight || 20;
                    let navHeight =
                        statusBarHeight +
                        menuButtonObject.height +
                        (menuButtonObject.top - statusBarHeight) * 2;
                    this.navHeight = navHeight;
                },
            });
        },

        getScrollTop(scrollTop) {
            const query = uni.createSelectorQuery().in(this);
            query
                .select("#pageTop")
                .boundingClientRect((data) => {
                    let eleH = data.height;
                    if (scrollTop + 10 >= eleH - this.navHeight) {
                        this.categoryDis = false;
                    } else {
                        this.categoryDis = true;
                    }
                })
                .exec();
        },

        couponDetail(val) {
            this.router.push({
                path: "/pages/coupon/detail",
                query: {
                    id: val.id,
                },
            });
        },

        tabClick(v) {
            this.curTab = v;
            this.cateId = "";
        },

        cateChange(cateId) {
            this.cateId = cateId;
        },
    },
    onShareAppMessage() {
        let url = `/pages/goods/index?uid=${this.user.id}&shopId=${this.activeShop.id}&tab=${this.curTab}`;
        if (this.cateId) {
            url += `&cateId=${this.cateId}`;
        }
        if (this.activeShop.store) {
            url += `&storeId=${this.activeShop.store.id}`;
        }
        console.log(url, "share");
        return {
            title: this.activeShop.name || "",
            path: url,
            imageUrl: this.activeShop.shopBanner || this.activeShop.logo,
        };
    },

    // 数据计算
    computed: {
        enableYouXuan() {
            return this.$store.state.common.storeConfig.enableYouXuan;
        },
        tabList() {
            return this.$store.state.common.tabList;
        },
        activeShop() {
            return this.$store.state.common.activeShop;
        },
        user() {
            return this.$store.state.user.user;
        },
        maxCoupon() {
            if (!this.shopInfo.couponList) {
                return;
            }
            let num = 0;
            for (let item of this.shopInfo.couponList) {
                if (item.value > num) {
                    num = item.value;
                }
            }
            return `最高减${num / 100}元`;
        },

        showNull() {
            if (this.curTab === "0") {
                if (this.productCount.selfProductCount === 0) {
                    return true;
                }
            } else if (this.curTab === "1") {
                if (this.productCount.youXuanProductCount === 0) {
                    return true;
                }
            }

            return false;
        },
    },

    // 数据监听
    watch: {
        categoryDis(v, v2) {
            if (this.$refs.category) {
                this.$refs.category.setScrollY(v2);
            }
            if (this.$refs.recommend) {
                this.$refs.recommend.setScrollY(v2);
            }
        },
    },
};
</script>


<style lang="scss" scoped>
.page {
    background-color: #fff;
}
.shop-info {
    .head-bg {
        .bg {
            border-top: 1px solid #f1f1f1;
            width: 100%;
            height: px(400);
            /deep/ {
                img {
                    width: 100%;
                    height: px(400);
                }
            }
        }
        .search {
            background: #fff;
            height: px(84);
            border-radius: px(42);
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: px(-380) px(30) 0;
            padding: 0 px(45);
            box-shadow: 0 1px 10px -5px #a7a7a7;
            .input {
                width: 100%;
                font-size: px(40);
            }
            .search-icon {
                font-size: px(50);
                color: #666;
                margin-right: px(20);
            }
        }
        .info {
            background: rgba(255, 255, 255, 0.95);
            margin: px(-360) px(30) 0;
            border-radius: px(30);
            padding: px(40);
            box-shadow: 0 1px 10px -5px #a7a7a7;
            .main {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .name {
                font-size: px(50);
                margin-bottom: px(30);
                @include omits(1);
            }
            .tag-list {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin: 0 px(-15);
                & ~ .tag-list {
                    margin-top: px(20);
                }
                .tag-item {
                    font-size: px(34);
                    padding: px(0) px(15);
                    display: flex;
                    align-items: center;
                    & ~ .tag-item {
                        border-left: 1px solid #f1f1f1;
                    }
                }
                .icon {
                    font-size: px(36);
                    margin-right: px(10);
                }
            }
            .info-r {
                width: px(180);
                flex-shrink: 0;
                margin-left: px(20);
                .img {
                    display: block;
                    border-radius: px(20);
                    overflow: hidden;
                    width: px(180);
                    height: px(180);
                    /deep/ img {
                        width: px(180);
                        height: px(180);
                    }
                }
            }
            .notice {
                margin-top: px(25);
                font-size: px(36);
                color: #999;
            }
        }
    }
}
.shop-other {
    margin-top: px(40);
    .discount {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 px(70);
        padding-bottom: px(30);
        .r-icon {
            color: #666;
            font-size: px(44);
            margin-left: px(10);
            transform: rotate(180deg);
        }
        .l {
            display: flex;
            align-items: center;
        }
        .name {
            font-size: px(44);
            margin-right: px(30);
        }
        .tag {
            height: px(44);
            font-size: px(32);
            line-height: px(44);
            padding: 0 px(8);
            display: inline-block;
            margin-right: px(15);
            color: $color;
            border: 1px solid $color;
            border-radius: px(5);
        }
    }
    .coupon-list {
        width: 100%;
        padding-bottom: px(30);
        .list-main {
            padding-left: px(70);
            padding-right: px(1);
            display: flex;
            width: 100%;
        }
        .coupon-item {
            flex-shrink: 0;
            background: #27a34f;
            border-radius: px(10);
            display: inline-flex;
            justify-content: space-between;
            align-items: stretch;
            color: #fff;
            // border: 1px solid #27a34f;
            box-shadow: 0 0 1px #27a34f inset;
            & ~ .coupon-item {
                margin-left: px(20);
            }
            &.ghost {
                background-color: #fef2f2;
                color: #27a34f;
                .info {
                    &::after,
                    &::before {
                        box-shadow: 0 0 1px #27a34f inset;
                    }
                }
            }
            .tool {
                width: px(120);
                height: px(120);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: px(34);
            }
            .info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: px(120);
                padding: px(10) px(45) px(10) px(30);
                overflow: hidden;
                position: relative;
                &::after,
                &::before {
                    content: "";
                    position: absolute;
                    right: 0;
                    z-index: 1;
                    width: px(28);
                    height: px(28);
                    border-radius: px(50);
                    background-color: #fff;
                }
                &::after {
                    top: px(-15);
                }
                &::before {
                    bottom: px(-15);
                }
                .money {
                    font-size: px(44);
                    margin-right: px(20);
                    flex-shrink: 0;
                    .symbol {
                        font-size: px(34);
                        margin-right: px(5);
                    }
                }
                .des {
                    .text {
                        font-size: px(34);
                    }
                    .type {
                        margin-top: px(10);
                        font-size: px(32);
                    }
                }
            }
        }
    }
    .ranking {
        padding: px(30) px(70);
        font-size: px(40);
        line-height: px(56);
        border-top: 1px solid #f1f1f1;
        .tag {
            display: inline-block;
            font-size: px(36);
            height: px(56);
            padding: 0 px(10);
            background-color: #f0d3b3;
            color: #976c49;
            margin-right: px(30);
            border-radius: px(5);
        }
    }
    .score {
        padding: px(30) px(70);
        font-size: px(40);
        line-height: px(56);
        border-top: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .r-icon {
            color: #666;
            font-size: px(44);
            margin-left: px(10);
            transform: rotate(180deg);
        }
        .l {
            display: flex;
            align-items: center;
            .num {
                width: px(88);
                height: px(88);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: px(40);
                background-color: #fff4e6;
                color: #666;
                flex-shrink: 0;
                margin-right: px(30);
            }
            .info {
                .text {
                    font-size: px(40);
                    @include omits(1);
                }
                .des {
                    margin-top: px(10);
                    color: #999;
                    span {
                        display: inline-block;
                        padding: 0 px(8);
                        font-size: px(34);
                        line-height: 1;
                        & ~ span {
                            border-left: 1px solid #f1f1f1;
                        }
                    }
                }
            }
        }
    }
}
.category {
    display: block;
    &.dis {
        pointer-events: none;
    }
}
.tab {
    display: flex;
    justify-content: center;
    padding: px(30) 0;
    div {
        font-size: px(48);
        margin: 0 px(150);
        text-align: center;
        height: px(100);
        line-height: px(100);
        padding: 0 px(20);
        border-bottom: px(4) solid transparent;
    }
    .on {
        color: #27a34f;
        border-color: #27a34f;
    }
}

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(115);

    &__img {
        width: px(741);
        height: px(340);
    }

    &__title {
        margin-top: px(60);
        font-size: px(42);
        color: #666;
    }
}
</style>