<template>
    <div class="page tabbar-page">
        <!-- <section class="search">
            <i class="iconfont iconsearch search-icon"></i>
            <input type="text" class="input" placeholder="搜索店铺" />
        </section> -->

        <scroll-view class="cate-list" :scroll-x="true">
            <ul class="list-main">
                <li
                    class="cate-item"
                    :class="{ active: !curCate.categoryId }"
                    @click="cateClick('all')"
                >
                    全部
                </li>
                <li
                    class="cate-item"
                    v-for="item of cateList"
                    :class="{ active: curCate.categoryId === item.categoryId }"
                    :key="item.categoryId"
                    @click="cateClick(item)"
                >
                    {{ item.name }}
                </li>
            </ul>
        </scroll-view>
        <ul class="shop-list">
            <li class="shop-item" v-for="item of dataList" :key="item.aid">
                <div class="info" @click="jumpList(item)">
                    <my-image :src="item.brandLogo" class="shop-img"></my-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.beginTime | timestampToDate }} —
                                    {{ item.endTime | timestampToDate }}</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">
                            <my-image
                                mode="widthFix"
                                :src="good.pictureUrls[0]"
                                class="good-img"
                            ></my-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>
        <wyg-bottom-tab
            ref="tabbar"
            :tabIndex="3"
            :tabListParent="tabList"
        ></wyg-bottom-tab>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";
import wygBottomTab from "../../components/wyg-bottom-tab/wyg-bottom-tab";

export default {
    name: "",
    components: { MyImage, wygBottomTab },
    // 数据
    data() {
        return {
            pageIndex: 1,
            dataEnd: false,
            dataList: [],
            cateList: [],
            curCate: {},
        };
    },
    filters: {},
    async onLoad() {
        await this.fn.init();
        this.getData();
        this.getCate();
    },
    async onShow() {},

    onPullDownRefresh() {
        this.getData();
        this.getCate();
    },
    onReachBottom() {
        this.getMoreData();
    },
    // 函数
    methods: {
        getCate() {
            this.api.get("/Product/GetCateList").then((res) => {
                this.cateList = JSON.parse(res.data);
            });
        },
        cateClick(val) {
            if (val.categoryId !== this.curCate.categoryId) {
                this.curCate = val;
                this.getData();
            }
        },

        getData() {
            this.pageIndex = 1;
            this.dataEnd = false;
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            let sendData = {
                pageIndex: this.pageIndex,
            };
            if (this.curCate.categoryId) {
                sendData.cateId = this.curCate.categoryId;
            }
            this.api.get("/Product/GetActivityList", sendData).then((res) => {
                uni.hideLoading();
                let data = JSON.parse(res.data.list);
                this.dataList = data;
            });
        },
        getMoreData() {
            if (this.dataEnd) {
                return;
            }
            this.pageIndex++;
            let sendData = {
                pageIndex: this.pageIndex,
            };
            if (this.curCate.categoryId) {
                sendData.cateId = this.curCate.categoryId;
            }
            this.api.get("/Product/GetActivityList", sendData).then((res) => {
                let data = JSON.parse(res.data.list);
                if (data.length === 0) {
                    this.dataEnd = true;
                } else {
                    this.dataList = [...this.dataList, ...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: {
        tabList() {
            return this.$store.state.common.tabList;
        },
    },

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


<style lang="scss" scoped>
.search {
    background: #fff;
    height: px(84);
    border-radius: px(42);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: px(30);
    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);
    }
}
.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(110);
                margin-right: px(30);
                border: 1px solid #fafafa;
                flex-shrink: 0;
                /deep/ img {
                    width: px(110);
                    height: px(110);
                }
            }
            .r {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .main {
                    width: 100%;
                }
                .btn {
                    color: #fff;
                    background-color: $color;
                    padding: px(15) px(25);
                    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 {
                    display: inline-block;
                    margin-left: px(10);
                    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%;
            }
        }
        .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;
        }
    }
}
.cate-list {
    width: 100%;
    padding-top: px(60);
    background-color: #fff;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: px(10);
    .list-main {
        padding-left: px(20);
        padding-right: px(1);
        display: flex;
        width: 100%;
    }
    .cate-item {
        height: px(88);
        display: inline-flex;
        justify-content: space-between;
        align-items: stretch;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0 px(30);
        font-size: px(40);
        border-bottom: px(2) solid transparent;
        &.active {
            color: $color;
            border-bottom: px(2) solid $color;
        }
    }
}
</style>