<template>
    <div class="page-main page_red" :style="{ height: pageH }">
        <div class="page__content">
            <div class="page__box">
                <scroll-view class="category" :scroll-y="scrollY">
                    <ul class="category__list">
                        <li
                            class="category__item"
                            :class="{
                                'category__item--active': categoryId === 'all',
                            }"
                            @click="setCategory('all')"
                        >
                            全部
                        </li>
                        <li
                            class="category__item"
                            :class="{
                                'category__item--active':
                                    categoryId === item.id,
                            }"
                            v-for="(item, index) in categoryList"
                            :key="index"
                            @click="setCategory(item)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </scroll-view>
                <div class="page__right">
                    <div class="goods">
                        <scroll-view
                            class="goods__scroll"
                            :scroll-y="scrollY"
                            @scrolltolower="getMoreList"
                        >
                            <ul class="shop-list">
                                <li
                                    class="shop-item"
                                    v-for="item of dataList"
                                    :key="item.aid"
                                >
                                    <div class="info" @click="jumpList(item)">
                                        <image
                                            mode="aspectFill"
                                            :src="item.brandLogo"
                                            class="shop-img"
                                        ></image>
                                        <div class="r">
                                            <div class="main">
                                                <div class="name">
                                                    {{ item.brandName }}
                                                </div>
                                                <div class="other">
                                                    <span class="tag"
                                                        >{{
                                                            item.onlineProductCount
                                                        }}款</span
                                                    >

                                                    <span class="date">
                                                        {{
                                                            item.endTime
                                                                | viewDate
                                                        }}</span
                                                    >
                                                </div>
                                            </div>
                                            <span class="btn">进入会场</span>
                                        </div>
                                    </div>
                                    <div class="good-list">
                                        <section
                                            class="good-item"
                                            v-for="good of item.prods"
                                            :key="good.pid"
                                            @click="jumpDetail(good)"
                                        >
                                            <div class="box">
                                                <image
                                                    mode="widthFix"
                                                    :src="good.pictureUrls[0]"
                                                    class="good-img"
                                                ></image>
                                                <div class="good-name">
                                                    {{ good.name }}
                                                </div>
                                                <div class="price">
                                                    ￥{{
                                                        good.minPrice
                                                            | minuteToRmb2
                                                    }}
                                                </div>
                                                <div
                                                    class="tag-price"
                                                    v-if="
                                                        good.maxPrice &&
                                                        good.maxPrice !==
                                                            good.minPrice
                                                    "
                                                >
                                                    ￥{{
                                                        good.maxPrice
                                                            | minuteToRmb2
                                                    }}
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </li>
                            </ul>
                            <div
                                class="more-text"
                                v-if="dataList.length && !isHaveMore"
                            >
                                - 没有更多商品了 -
                            </div>
                            <div
                                class="null"
                                v-if="loading && !dataList.length"
                            >
                                <img
                                    class="null__img"
                                    src="/static/common/goods_null.jpg"
                                    alt
                                />
                                <div class="null__title">
                                    抱歉！没有找到相关商品~
                                </div>
                            </div>
                        </scroll-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
export default {
    name: "",
    components: { MyImage },
    props: {
        loginAfter: {
            type: Boolean,
            default: false,
        },
        cateId: {
            type: String,
            default: "",
        },
    },
    // 数据
    data() {
        return {
            categoryId: "all",
            categoryList: [],
            page: 1, // 页码
            dataList: [],
            isHaveMore: true, // 是否有更多数据
            loading: false, // 是否加载完成
            cartList: [],

            goods: null, // 详情数据 加入购物车时用
            cartNum: 0, // 购物车数量
            categoryAllVisible: false, // 分类全部显示
            shopId: "", //店铺id
            index: 1,
            pageH: "90vh",
            scrollY: false,
        };
    },

    async created() {
        this.initHeight();
        this.refresh();

        if (this.cateId) {
            this.categoryId = this.cateId;
        }
    },

    // onPullDownRefresh() {
    //     this.getCategory();
    //     this.getList();
    //     this.$refs.shopCart.refresh();
    // },

    // 函数
    methods: {
        setScrollY(v) {
            this.scrollY = v;
        },

        refresh(setShop) {
            if (setShop) {
                this.categoryId = "all";
            }
            this.getList();
            this.getCategory();
        },

        initHeight() {
            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.pageH = innerHeight - navHeight - navHeight + "px";
                },
            });
        },

        // 获取商品分类
        getCategory() {
            const self = this;
            this.api.get("/Product/GetCateList").then((res) => {
                let data = JSON.parse(res.data);
                for (let item of data) {
                    item.id = item.categoryId;
                }
                this.categoryList = data;
                if (!self.categoryId) {
                    self.categoryId = this.categoryList[0].id || "";
                }
            });
        },

        // 设置商品分类
        setCategory(val) {
            const self = this;

            self.categoryId = val.id || "all";
            this.categoryAllVisible = false;
            self.$emit("cateChange", val.id);
        },

        // 获取列表
        getList() {
            const self = this;
            uni.showLoading({
                title: "加载中...",
            });
            self.page = 1;
            let sendData = {
                pageIndex: self.page++,
            };
            if (this.categoryId !== "all") {
                sendData.cateId = this.categoryId;
            }
            self.api.get("/Product/GetActivityList", sendData).then((res) => {
                uni.hideLoading();
                uni.stopPullDownRefresh();
                let data = JSON.parse(res.data.list);
                if (data.length) {
                    // self.page++;
                } else {
                    self.isHaveMore = false;
                }

                self.dataList = data;
                self.loading = true;
                uni.hideLoading();
            });
        },

        // 获取更多商品
        getMoreList() {
            const self = this;

            let sendData = {
                pageIndex: self.page++,
            };
            if (this.categoryId !== "all") {
                sendData.cateId = this.categoryId;
            }
            self.api.get("/Product/GetActivityList", sendData).then((res) => {
                let data = JSON.parse(res.data.list);
                if (data.length) {
                    // self.page++;
                } else {
                    self.isHaveMore = false;
                }

                self.dataList = self.dataList.concat(data);
            });
        },

        jumpList(item) {
            console.log(item);
            this.router.push({
                path: "/pages/recommend/list",
                query: {
                    aid: item.activityNo,
                },
            });
        },

        jumpDetail(good) {
            this.router.push({
                path: "/pages/recommend/detail",
                query: {
                    goodsId: good.pid,
                },
            });
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        user() {
            return this.$store.state.user;
        },
    },

    // 数据监听
    watch: {
        categoryId(val) {
            const self = this;

            if (val) {
                self.getList();
            }
        },
    },
};
</script>

<style>
.page-main {
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
</style>

<style lang="scss" scoped>
.page {
    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        // box-shadow: 0 px(-5) px(10) #333;
    }

    &__content {
        position: relative;
        flex: 1;
        margin-top: px(5);
    }

    &__box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        justify-content: space-between;
    }

    &__right {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
    }
}

.search {
    display: flex;
    align-items: center;
    width: px(890);
    height: px(86);
    padding: 0 px(35);
    background-color: #f8f8f8;
    border-radius: px(43);

    &__icon {
        margin-top: px(10);
        font-size: px(60);
        color: #999;
    }

    &__text {
        margin-left: px(15);
        font-size: px(36);
        color: #999;
    }
}

.service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &__icon {
        font-size: px(50);
        color: #666;
    }

    &__text {
        font-size: px(30);
        color: #666;
    }
}

.category {
    width: px(225);
    height: 100%;
    background-color: #f8f6f7;

    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        font-size: px(40);
        color: #888;
        background-color: #f8f6f7;
        padding: px(60) 0;

        &--active {
            // font-weight: 700;
            color: #333;
            background-color: #fff;
            &:before {
                content: "";
                position: absolute;
                top: 50%;
                left: 0;
                z-index: 1;
                display: block;
                width: px(8);
                height: 100%;
                transform: translateY(-50%);
                border-radius: px(4);
                background-color: #27a34f;
            }
        }
    }
}

.category-sub {
    position: relative;
    height: px(130);
    background-color: #fff;
    margin-right: px(140);
    margin-left: px(20);
    &__scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    &__list {
        display: flex;
        align-items: center;
        height: 100%;
    }

    &__toggle {
        position: absolute;
        top: 0;
        right: px(-140);
        z-index: 2;
        width: px(140);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: px(30);
        transform: rotate(90deg);
        &.active {
            transform: rotate(-90deg);
        }
    }

    &__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 100%;
        font-size: px(34);
        width: px(220);
        color: #333;
        height: px(70);
        border-radius: px(35);
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        color: #888;
        margin: 0 px(10);
        &--active {
            color: #262626;
            background-color: rgba(39, 163, 79, 0.2);
            border: 1px solid #27a34f;
            color: #27a34f;
        }
    }
}

.category-sub-all {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    margin-top: px(130);
    &__bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
    }
    &__scroll {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
    }
    &__list {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        padding: px(60) px(40);
    }
    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        height: 100%;
        font-size: px(34);
        width: px(220);
        color: #333;
        height: px(70);
        border-radius: px(35);
        background-color: #f6f6f6;
        border: 1px solid #f6f6f6;
        color: #888;
        margin: 0 px(20) px(30);
        flex-shrink: 0;
        &--active {
            color: #262626;
            background-color: rgba(39, 163, 79, 0.2);
            border: 1px solid #27a34f;
            color: #27a34f;
        }
    }
}

.goods {
    position: relative;
    flex: 1;
    border-top: 1px solid #f6f6f6;

    &__scroll {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
    }
}

.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px(110);
    margin-bottom: px(5);
    padding: 0 px(85);
    background-color: #fff;
    // box-shadow: 0 px(-5) px(10) #333;

    &__item {
        display: flex;
        align-items: center;
    }

    &__text {
        font-size: px(36);
        color: #888;
    }

    &__item--active &__text {
        color: #27a34f;
    }

    &__sort {
        margin-left: px(15);

        &:before {
            display: block;
            content: "";
            width: 0;
            height: 0;
            margin-bottom: px(10);
            border-width: px(12);
            border-style: solid;
            border-color: transparent transparent #ccc transparent;
        }

        &:after {
            display: block;
            content: "";
            width: 0;
            height: 0;
            border-width: px(12);
            border-style: solid;
            border-color: #ccc transparent transparent transparent;
        }

        &--up:before {
            border-color: transparent transparent #27a34f transparent;
        }

        &--down:after {
            border-color: #27a34f transparent transparent transparent;
        }
    }
}

.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}

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

    &__img {
        width: px(576);
        height: px(281);
    }

    &__title {
        margin-top: px(60);
        font-size: px(40);
        color: #666;
    }
}

.page_red {
    /deep/ {
        .category {
            &__item {
                &--active {
                    &:before {
                        background-color: #27a34f;
                    }
                }
            }
        }
        .category-sub {
            &__item {
                &--active {
                    background-color: rgba(39, 163, 79, 0.2);
                    border: 1px solid #27a34f;
                    color: #27a34f;
                }
            }
        }
        .category-sub-all {
            &__item {
                &--active {
                    color: #262626;
                    background-color: rgba(39, 163, 79, 0.2);
                    border: 1px solid #27a34f;
                    color: #27a34f;
                }
            }
        }
        .goods {
            &__add-text {
                background-color: #27a34f;
            }
            &__add {
                background-color: #27a34f;
                box-shadow: px(1) px(2) px(6) #27a34f;
            }
        }

        .menu {
            .menu__item--active .menu__text {
                color: #27a34f;
            }

            &__sort {
                &--up:before {
                    border-color: transparent transparent #27a34f transparent;
                }

                &--down:after {
                    border-color: #27a34f transparent transparent transparent;
                }
            }
        }
    }
}

.shop-list {
    .shop-item {
        padding: px(30);
        background-color: #fff;
        & ~ .shop-item {
            margin-top: px(30);
        }
        .info {
            display: flex;
            justify-content: space-between;
            .shop-img {
                width: px(120);
                height: px(120);
                margin-right: px(30);
                border: 1px solid #fafafa;
                flex-shrink: 0;
            }
            .r {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .main {
                    width: 100%;
                }
                .btn {
                    color: #fff;
                    background-color: $color;
                    padding: px(10) px(20);
                    flex-shrink: 0;
                    font-size: px(38);
                }
                .name {
                    font-size: px(40);
                    @include omits(2);
                }
                .other {
                    margin-top: px(10);
                }
                .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);
                }
                .date {
                    margin-top: px(6);
                    display: block;
                    font-size: px(38);
                    color: #666;
                }
            }
        }
    }
    .good-list {
        margin: px(30) px(20) 0;
        display: flex;
        .good-item {
            width: 33.333333%;
            padding: 0 px(20);
        }
        .good-img {
            width: 100%;
            /deep/ img {
                width: 100%;
                height: px(150);
            }
        }
        .good-name {
            margin-top: px(20);
            font-size: px(40);
            @include omits(2);
        }
        .price {
            margin-top: px(20);
            color: $color;
            font-size: px(42);
        }
        .tag-price {
            margin-top: px(10);
            color: #999;
            line-height: 1;
            font-size: px(36);
            text-decoration: line-through;
        }
    }
}
</style>