<template>
    <div class="page">
        <div class="page__head">
            <div class="shop" v-if="couponData && !shareObj">
                <div class="shop__left">
                    <img
                        class="shop__img"
                        :src="couponData.shopInfo.logo"
                        alt
                    />
                    <h3 class="shop__tit">{{ couponData.shopInfo.name }}</h3>
                </div>
                <div class="shop__right" @click="goHome">
                    进店逛逛
                    <i class="iconfont iconarrow shop__arrows"></i>
                </div>
            </div>
            <div class="shop" v-if="shareObj && shareObj.isShare !== '1'">
                <div class="shop__left">
                    <img clsas="shop__img" :src="shareObj.avatar" alt />
                    <h3 class="shop__tit">
                        {{ shareObj.name }}送你一张优惠券，快去使用吧
                    </h3>
                </div>
                <!-- <div class="shop__right" @click="goHome">
                    进店逛逛
                    <i class="iconfont iconarrow shop__arrows"></i>
                </div>-->
            </div>

            <div class="box">
                <h5 class="box__tit">
                    店铺优惠券
                    <span v-if="couponData.storeName">
                        (适用门店:{{ couponData.storeName }})</span
                    >
                </h5>
                <div class="coupon" v-if="couponData && couponData.name">
                    <div class="coupon__left">
                        <div class="coupon__head">
                            <div class="coupon__num">
                                <span class="sign">¥</span>
                                {{ couponData.value / 100 }}
                            </div>
                            <div
                                class="coupon__condition"
                                v-if="couponData.minimumAmount"
                            >
                                满{{ couponData.minimumAmount / 100 }}可用
                            </div>
                            <div
                                class="coupon__condition"
                                v-if="!couponData.minimumAmount"
                            >
                                无最低要求
                            </div>
                        </div>
                        <p class="coupon__des" v-if="couponData.isCurrency">
                            使用说明：全店商品
                            <block v-if="couponData.facingForCrowd === 1"
                                >（指定会员）</block
                            >
                            <block v-if="couponData.facingForCrowd === 2"
                                >（所有会员）</block
                            >
                            <block v-if="couponData.facingForCrowd === 3"
                                >（新人专享）</block
                            >
                        </p>
                        <p class="coupon__des" v-if="!couponData.isCurrency">
                            使用说明：部分商品可用
                            <block v-if="couponData.facingForCrowd === 1"
                                >（指定会员）</block
                            >
                            <block v-if="couponData.facingForCrowd === 2"
                                >（所有会员）</block
                            >
                            <block v-if="couponData.facingForCrowd === 3"
                                >（新人专享）</block
                            >
                        </p>
                        <p
                            v-if="couponData.couponTime === 0"
                            class="coupon__des"
                        >
                            使用期限：<span>
                                {{
                                    couponData.startReceiveTime
                                        | dateFormat("yyyy-MM-dd hh:mm")
                                }}<br />
                                {{
                                    couponData.endReceiveTime
                                        | dateFormat("yyyy-MM-dd hh:mm")
                                }}
                            </span>
                        </p>
                        <p
                            v-if="couponData.couponTime === 1"
                            class="coupon__des"
                        >
                            使用期限：<span>
                                {{
                                    couponData.startUseTime
                                        | dateFormat("yyyy-MM-dd hh:mm")
                                }}<br />
                                {{
                                    couponData.endUseTime
                                        | dateFormat("yyyy-MM-dd hh:mm")
                                }}
                            </span>
                        </p>
                        <p
                            v-if="couponData.couponTime === 2"
                            class="coupon__des"
                        >
                            使用期限：领券后{{ couponData.expiredDays }}天有效
                        </p>
                    </div>
                    <button
                        v-if="couponStatusText.operation === 8"
                        class="coupon__right"
                        open-type="share"
                    >
                        <p
                            v-for="item of couponStatusText.showTextArr"
                            :key="item"
                        >
                            {{ item }}
                        </p>
                    </button>
                    <div v-else class="coupon__right" @click="couponClick">
                        <p
                            v-for="item of couponStatusText.showTextArr"
                            :key="item"
                        >
                            {{ item }}
                        </p>
                    </div>
                </div>

                <div class="box__des" v-if="couponData.usable">
                    优惠券已发放至账号
                    <span class="user">{{ user.userInfo.nickName }} &gt;</span>
                </div>
            </div>
        </div>

        <div class="shop__list">
            <div class="shop__list__tit">
                <span class="text">猜你喜欢</span>
            </div>
            <ul class="goods">
                <li
                    class="goods__item"
                    v-for="(item, index) in goodsList"
                    :key="index"
                    @click="jumpGoodsDetail(item)"
                >
                    <my-image class="goods__img" :src="item.image"></my-image>
                    <div class="goods__title">{{ item.name }}</div>
                    <div class="goods__coupon" v-if="item.coupon">
                        {{ item.coupon }}
                    </div>
                    <div class="goods__price">
                        <div class="goods__present">
                            <span class="goods__rmb">¥</span>
                            <span class="goods__big">{{
                                item.price / 100
                            }}</span>
                        </div>
                        <div class="goods__original" v-if="item.tagPrice !== 0">
                            {{ "¥" + item.tagPrice / 100 }}
                        </div>
                    </div>
                </li>
            </ul>
            <div class="more-text" v-if="goodsList.length && dataEnd">
                - 没有更多了 -
            </div>
        </div>
    </div>
</template>

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

export default {
    components: { MyImage },
    data() {
        return {
            couponId: "",
            couponData: {},

            pageIndex: 1, // 页码
            goodsList: [],
            dataEnd: false,

            // 分享数据
            receiveId: null,
            shareObj: null,
        };
    },

    async onShow() {
        const self = this;
        await this.fn.init();
        this.couponId = this.$mp.query.id;
        if (this.$mp.query.receiveId) {
            this.receiveId = this.$mp.query.receiveId;
        }

        if (this.$mp.query.name) {
            this.shareObj = {
                avatar: this.$mp.query.avatar,
                name: this.$mp.query.name,
                isShare: this.$mp.query.isShare || "1",
            };
        }
        this.fn.shareMenu();
        this.getCoupon();
        this.getGoodsList();
    },

    onReachBottom() {
        if (!this.dataEnd) {
            this.pageIndex++;
            this.getGoodsList();
        }
    },

    // 分享
    onShareAppMessage() {
        const self = this;
        let obj = {
            ...self.$mp.query,
            avatar: self.user.userInfo.avatarUrl,
            name: self.user.userInfo.nickName,
            isShare: "1",
            shopId: this.activeShop.id,
            uid:this.user.user.id
        };
        if (this.activeShop.store) {
            obj.storeId = this.activeShop.store.id;
        }
        if (self.receiveId) {
            obj.receiveId = self.receiveId;
        }
        return {
            title: `送你一张来自【${self.couponData.shopInfo.name}】优惠券，马上领取，立享优惠`,
            path: self.router.getPath(self.$mp.page.route, obj),
            imageUrl: "/static/coupon/share.png",
        };
    },

    // 函数
    methods: {
        // 获取商品列表
        getGoodsList() {
            const self = this;

            self.api
                .get("/Product/GetList", {
                    sort: "SaleDesc",
                    pageIndex: self.pageIndex,
                    pageSize: 20,
                })
                .then((res) => {
                    if (!res.data.data.length) {
                        this.dataEnd = true;
                    }

                    self.goodsList = [...self.goodsList, ...res.data.data];
                });
        },
        // 获取优惠券详情
        getCoupon() {
            let sendData = {
                id: this.couponId,
            };
            if (this.receiveId) {
                sendData.crId = this.receiveId;
            }
            this.api.get("/Coupon/GetCoupon", sendData).then((res) => {
                this.couponData = res.data;
            });
        },

        // 领取优惠券
        receive() {
            uni.showLoading({});
            let sendData = {
                couponId: this.couponId,
                query: true,
            };
            // 来自分享带上领取id
            if (this.receiveId) {
                sendData.receiveId = this.receiveId;
            }
            this.api.post("/Coupon/Receive", sendData).then((res) => {
                uni.hideLoading();
                if (res.success) {
                    this.fn.showToast("领取成功");
                    this.getCoupon();
                    this.fn.couponTake(res.data, 6);
                } else {
                    this.fn.showToast("领取失败：" + res.message);
                }
            });
        },

        // 使用优惠券
        goUse() {
            if (this.couponData.isCurrency) {
                // 全店可用 跳转首页
                uni.switchTab({
                    url: "/pages/goods/index",
                });
            } else {
                // 部分可用
                this.router.push({
                    path: "/pages/coupon/availableList",
                    query: {
                        id: this.couponId,
                    },
                });
            }
        },

        // 进店逛逛，（去首页）
        goHome() {
            uni.switchTab({
                url: "/pages/goods/index",
            });
        },

        // 跳转到商品详情
        jumpGoodsDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/goods/detail",
                query: {
                    goodsId: val.id,
                },
            });
        },

        // 优惠券点击
        couponClick() {
            const operation = this.couponData.operation;
            switch (operation) {
                case 1:
                    return this.receive();
                case 2:
                    return this.goUse();
            }
        },
    },

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

        // 优惠券状态
        couponStatusText() {
            const operation = this.couponData.operation;
            const obj = {
                showTextArr: null,
                operation: operation,
            };
            switch (operation) {
                case 1:
                    obj.showTextArr = ["立即", "领取"];
                    break;
                case 2:
                    obj.showTextArr = ["立即", "使用"];
                    break;
                case 3:
                    obj.showTextArr = ["不可", "领取"];
                    break;
                case 4:
                    obj.showTextArr = ["已使用"];
                    break;
                case 5:
                    obj.showTextArr = ["已结束"];
                    break;
                case 6:
                    obj.showTextArr = ["已领完"];
                    break;
                case 7:
                    obj.showTextArr = ["已过期"];
                    break;
                case 8:
                    obj.showTextArr = ["立即", "赠送"];
                    break;
                case 9:
                    obj.showTextArr = ["已被", "领取"];
                    break;
                default:
                    obj.showTextArr = ["无效"];
                    break;
            }

            return obj;
        },
    },
};
</script>

<style lang="scss">
.page__head {
    background-color: #fff;
    padding: px(40) px(45);
}
.shop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px(10) 0 px(50);
    border-bottom: px(3) solid #989898;

    &__left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    &__img {
        width: px(110);
        height: px(110);
        margin-right: px(40);
        flex-shrink: 0;
    }

    &__tit {
        font-size: px(40);
    }

    &__right {
        font-size: px(34);
        color: #999;
        flex-shrink: 0;
    }

    &__arrows {
        display: inline-block;
        margin-left: px(20);
        font-size: px(36);
        color: #999;
    }
}
.box {
    padding-top: px(50);

    &__tit {
        font-size: px(40);
        padding-bottom: px(20);
        line-height: 1.5;
        span {
            color: #888;
        }
    }

    &__des {
        margin-top: px(40);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        font-size: px(40);

        .user {
            color: #333;
            margin-left: px(30);
        }

        // .arrow{
        // 	display: inline-block;
        // 	margin-left: px(10);
        // }
    }
}
.coupon {
    margin-top: px(20);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    overflow: hidden;
    border-radius: px(10);
    background: #ff5d64 url("/static/coupon/coupon_bg.png") no-repeat center
        right;
    background-size: auto 100%;

    &__left {
        width: 67%;
        padding: px(40) px(30);
        border-right: px(3) dashed #fff;
        position: relative;

        &::after,
        &::before {
            content: "";
            width: px(60);
            height: px(60);
            border-radius: 50%;
            background: rgb(255, 255, 255);
            position: absolute;
            right: 0;
            z-index: 1;
        }

        &::after {
            top: 0;
            transform: translate(50%, -50%);
        }

        &::before {
            bottom: 0;
            transform: translate(50%, 50%);
        }
    }

    &__head {
        margin-bottom: px(40);
        display: flex;
        justify-content: flex-start;
    }

    &__right {
        width: 33%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: px(50);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: transparent;
        color: #fff;
        line-height: 1.5;
        outline: none;
        border: none;

        &::after,
        &::before {
            display: none;
        }
    }

    &__num {
        font-size: px(90);

        .sign {
            font-size: px(38);
        }
    }

    &__condition {
        font-size: px(38);
        margin-left: px(25);
        margin-top: px(40);
    }

    &__des {
        font-size: px(40);
        margin-top: px(10);
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
.shop__list {
    padding-top: px(60);

    &__tit {
        text-align: center;
        padding-bottom: px(60);

        .text {
            font-size: px(40);
            color: #666;
        }
    }
}
.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 px(25) px(30);

    &__item {
        width: px(500);
        padding-bottom: px(30);
        margin-top: px(25);
        overflow: hidden;
        border-radius: px(15);
        background-color: #fff;

        &:nth-child(2n + 1) {
            margin-right: px(30);
        }
    }

    &__img /deep/ img {
        width: px(500);
        height: px(500);
    }

    &__title {
        @include omits(2);
        height: px(110);
        margin: px(20);
        font-size: px(40);
        color: #333;
    }

    &__coupon {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: px(40);
        padding: 0 px(15);
        margin: 0 px(20);
        font-size: px(30);
        color: #fe2303;
        border-radius: px(20);
        border: solid px(3) #fe2303;
    }

    &__price {
        display: flex;
        align-items: flex-end;
        padding: 0 px(20);
        margin-top: px(20);
    }

    &__present {
        color: #000;
    }

    &__rmb {
        font-size: px(30);
    }

    &__big {
        font-size: px(38);
    }

    &__original {
        position: relative;
        margin-left: px(20);
        font-size: px(32);
        color: #999;

        &:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(1);
            transform: translateY(-100%);
            background-color: #999;
        }
    }
}

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