<template>
    <div class="page " :class="{ page_red: theme === 1 }">
        <section class="user-head">
            <div class="head-l" @click="jumpHandle">
                <my-image
                    :src="userInfo.avatarUrl || '/static/common/portrait.jpg'"
                    class="avatar"
                ></my-image>
                <div class="info">
                    <h3 class="name">
                        {{ userInfo.nickName || "点击头像登录" }}
                    </h3>
                    <!-- <div class="addrss" @click="jump('/pages/address/index')">
                        <span class="iconfont iconaddress add-icon"></span>
                        {{ userAddress | strMaxLength(8) }}
                        <span class="iconfont iconarrow arrow-icon"></span>
                    </div> -->
                </div>
            </div>
            <div class="head-r">
                <!-- <span class="iconfont iconQrcode code-icon"></span>
                <span class="code-text">提货码</span> -->
            </div>
        </section>

        <ul class="shop-list">
            <li
                class="shop-item"
                v-for="item of shopList"
                :key="item.id"
                @click="shopClick(item)"
            >
                <div class="shop-main">
                    <div class="item-l">
                        <my-image :src="item.logo" class="shop-img"></my-image>
                    </div>
                    <div class="item-r">
                        <div class="info">
                            <div class="line line1">
                                <div class="name omit">{{ item.name }}</div>
                                <div
                                    class="up-tag"
                                    v-if="activeShop.id === item.id"
                                >
                                    当前店铺
                                </div>
                                <div
                                    class="up-tag gray"
                                    v-else-if=" activeUpShop && activeUpShop.id === item.id"
                                >
                                    上次选择
                                </div>
                            </div>
                            <div class="line line2">
                                <div class="time">
                                    <block v-if="item.openingTime">
                                        营业时间：{{ item.openingTime || "" }}
                                    </block>
                                </div>
                                <div class="address">
                                    <span
                                        class="iconfont iconicon_xinyong_xianxing_jijin-162 address-icon"
                                    ></span>
                                    {{ item.distance / 1000 }}km
                                </div>
                            </div>
                            <div class="line line3">
                                <div
                                    class="tag"
                                    :class="{ auto: item.tagToggle }"
                                >
                                    <span
                                        class="tag-item"
                                        v-for="tag of item.activityTags"
                                        :key="tag"
                                        >{{ tag }}</span
                                    >
                                    <i
                                        class="iconfont iconarrow arrow-icon"
                                        v-if="item.activityTags.length"
                                        @click.stop="
                                            item.tagToggle = !item.tagToggle
                                        "
                                    ></i>
                                </div>
                                <div class="integral">
                                    剩余积分
                                    <span class="num">{{
                                        item.points | maxNumInt(999)
                                    }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="good-main" v-if="item.product">
                    <my-image
                        :src="item.product.image"
                        class="good-img"
                    ></my-image>
                    <div class="info">
                        <div class="name">{{ item.product.name }}</div>
                        <div class="other">
                            <div class="l">
                                <span class="price"
                                    >￥{{
                                        item.product.price | minuteToRmb2
                                    }}</span
                                >
                                <span
                                    class="tag-price"
                                    v-if="item.product.tagPrice"
                                    >￥{{
                                        item.product.tagPrice | minuteToRmb2
                                    }}</span
                                >
                            </div>
                            <div class="r">
                                <div
                                    class="discount"
                                    v-if="
                                        item.product.discount &&
                                        item.product.discount !== 100
                                    "
                                >
                                    {{ item.product.discount / 10 }}折
                                </div>
                                <div class="sale">
                                    <span class="tag">售</span>
                                    {{ item.product.sale | strMaxLength(999) }}
                                </div>
                            </div>
                        </div>
                        <div class="end-time" v-if="item.product.endTime">
                            活动结束时间：
                            <span>{{ item.product.endTime }}</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            tagToggle: false,
            shopList: [],
            pageIndex: 1,
            location: '',
        };
    },
    filters: {},
    async onLoad() {
        this.fn.shareMenu();
    },
    async onShow() {
        await this.fn.init();
        this.getData();
        uni.getLocation({
            type: "gcj02",
            success: (res) => {
                let lat = res.latitude.toFixed(5);
                let lon = res.longitude.toFixed(5);
                this.location = `${lon},${lat}`;
                this.getData();
            },
            fail: (err) => {
                // this.getData();
            },
        });
    },

    onPullDownRefresh() {
        this.getData();
    },
    onReachBottom() {
        this.getMoreData();
    },

    // 函数
    methods: {
        getData() {
            this.pageIndex = 1;
            this.dataEnd = false;
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            this.api
                .get("/Shop/GetList", {
                    pageIndex: this.pageIndex,
                    location:this.location,
                })
                .then((res) => {
                    uni.hideLoading();
                    this.shopList = res.data.data;
                    if (!this.activeShop.id) {
                        this.fn.updateShop(this.shopList[0].id);
                    }
                });
        },
        getMoreData() {
            if (this.dataEnd) {
                return;
            }
            this.pageIndex++;
            this.api
                .get("/Shop/GetList", {
                    pageIndex: this.pageIndex,
                    location:this.location,
                })
                .then((res) => {
                    if (res.data.data.length === 0) {
                        this.dataEnd = true;
                    } else {
                        this.shopList = [...this.shopList, ...res.data.data];
                    }
                });
        },

        shopClick(shop) {
            this.fn.updateShop(shop.id, () => {
                this.router.push({
                    path: "/pages/goods/index",
                    isTabBer: true,
                });
            });
        },

        jumpHandle() {
            if (this.user.login) {
                // this.router.push(option);
            } else {
                this.router.push("/pages/login/index");
            }
        },
    },
    onShareAppMessage() {
        let url = `/pages/goods/index?uid=${this.user.id}`;
        if(this.activeShop){
            url+=`&shopId=${this.activeShop.id}`;
        }
        if(this.activeShop.store){
            url+=`&storeId=${this.activeShop.store.id}`
        }
        return {
            title:this.activeShop.name || '',
            path: url,
            imageUrl: this.activeShop.shopBanner || this.activeShop.logo,

        };
    },

    // 数据计算
    computed: {
        tabList() {
            return this.$store.state.common.tabList;
        },
        user() {
            return this.$store.state.user.user;
        },
        userInfo() {
            return this.$store.state.user.userInfo || "";
        },
        activeShop() {
            return this.$store.state.common.activeShop || {};
        },
        activeUpShop() {
            return this.$store.state.common.activeUpShop || {};
        },
    },

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


<style lang="scss" scoped>
.page {
    background-color: #ebecf0;
    min-height: 100vh;
}
.user-head {
    background-color: #fff;
    padding: px(50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .head-l {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .avatar {
        margin-right: px(38);
        display: block;
        width: px(170);
        height: px(170);
        border-radius: 50%;
        border: px(6) solid #fff;
        box-shadow: 0 1px 10px 0px #a7a7a7;
        overflow: hidden;
        /deep/ img {
            width: px(170);
            height: px(170);
        }
    }
    .info {
        .name {
            font-size: px(44);
        }
        .addrss {
            margin-top: px(30);
            font-size: px(34);
            color: #666;
            .add-icon {
                display: inline-block;
                color: $color;
                font-size: px(40);
                margin-right: px(10);
            }
            .arrow-icon {
                display: inline-block;
                transform: rotate(-90deg);
                font-size: px(34);
                margin-left: px(20);
            }
        }
    }
    .head-r {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .code-icon {
            font-size: px(60);
            color: #999;
        }
        .code-text {
            margin-top: px(20);
            font-size: px(38);
            color: #999;
        }
    }
}
.shop-list {
    padding-bottom: px(30);
    .shop-item {
        border-radius: px(20);
        margin: px(30) px(30) 0;
        background-color: #fff;
    }
    .shop-main {
        display: flex;
        justify-content: space-between;
        padding: px(30);
        .item-l {
            width: px(210);
            margin-right: px(25);
            flex-shrink: 0;
        }
        .shop-img {
            display: block;
            width: px(210);
            height: px(210);
            border-radius: px(20);
            overflow: hidden;
            /deep/ img {
                width: px(210);
                height: px(210);
            }
        }
        .item-r {
            width: 100%;
            // min-height: px(210);
        }
        .line {
            display: flex;
            justify-content: space-between;
        }
        .line2 {
            margin-top: px(25);
            align-items: center;
        }
        .line3 {
            margin-top: px(35);
        }
        .name {
            font-size: px(44);
            font-weight: bold;
            @include omits(1);
        }
        .up-tag {
            display: inline-block;
            background-color: $color;
            color: #fff;
            font-size: px(30);
            line-height: px(50);
            height: px(50);
            padding: 0 px(22);
            border-radius: px(25);
            flex-shrink: 0;
            margin-left: px(20);
            &.gray{
                background-color: #fff;
                color: $color;
                border: 1px solid #f1f1f1;
            }
        }
        .time {
            color: #999;
            font-size: px(38);
        }
        .address {
            color: #999;
            font-size: px(38);
            .address-icon {
                color: #869dfd;
                font-size: px(38);
                margin-right: px(15);
            }
        }
        .integral {
            font-size: px(38);
            color: #999;
            flex-shrink: 0;
            margin-left: px(50);
            .num {
                display: inline-block;
                color: $color;
                margin-left: px(5);
            }
        }
        .tag {
            max-width: 100%;
            padding-right: px(50);
            position: relative;
            max-height: px(50);
            overflow: hidden;
            transition: all 0.3s;
            &.auto {
                max-height: px(250);
                .arrow-icon {
                    transform: rotate(90deg);
                }
            }
            .arrow-icon {
                position: absolute;
                top: px(3);
                right: 0;
                z-index: 1;
                padding-left: px(20);
                font-size: px(40);
                transform: rotate(-90deg);
                color: #999;
            }
            .tag-item {
                display: inline-block;
                height: px(44);
                line-height: px(44);
                border: 1px solid $color;
                color: $color;
                font-size: px(30);
                padding: 0 px(15);
                margin-right: px(20);
                border-radius: px(5);
                margin-bottom: px(20);
            }
        }
    }

    .good-main {
        padding: px(30);
        display: flex;
        justify-content: space-between;
        border-top: 1px dashed #f1f1f1;

        .good-img {
            display: block;
            width: px(160);
            height: px(160);
            border-radius: px(20);
            overflow: hidden;
            margin-right: px(25);
            flex-shrink: 0;
            /deep/ img {
                width: px(160);
                height: px(160);
            }
        }
        .info {
            width: 100%;
            padding: px(10) 0;
            .name {
                font-size: px(40);
                @include omits(1);
            }
            .other {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: px(25);
                .l,
                .r {
                    display: flex;
                    align-items: flex-end;
                }
                .price {
                    color: $color;
                    font-size: px(40);
                }
                .tag-price {
                    color: #999;
                    font-size: px(36);
                    text-decoration: line-through;
                    margin-left: px(20);
                }
                .sale {
                    color: #999;
                    font-size: px(38);
                    display: inline-flex;
                    align-items: center;
                    .tag {
                        width: px(48);
                        height: px(48);
                        border-radius: px(8);
                        font-size: px(32);
                        color: #fff;
                        background-color: $color;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: px(10);
                    }
                }
                .discount {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    height: px(48);
                    padding: px(0) px(20);
                    border-radius: px(8);
                    margin-right: px(30);
                    font-size: px(32);
                    color: #e2e4bf;
                    background-color: #574c50;
                }
            }
            .end-time {
                margin-top: px(20);
                font-size: px(38);
                span {
                    color: $color;
                }
            }
        }
    }
}
.page_red {
    .shop-list .shop-main {
        color: #27a34f;
    }
}
</style>