<template>
    <div class="page">
        <div class="page-head" v-if="couponData">
            <div class="coupon-info">
                <h6 class="tit">以下商品可使用</h6>
                <p class="name">{{couponData.name}}</p>
            </div>
            <div
                class="status"
                :class="{dis:couponStatusText.dis}"
                @click="couponClick"
            >{{couponStatusText.showText}}</div>
        </div>

        <div class="shop__list">
            <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>
            <my-null v-if="pageIndex ===1 && dataEnd" title="暂时没有内容哦"></my-null>
        </div>
    </div>
</template>

<script>
    import MyImage from '../../components/image/index'
    import MyNull from '../../components/layout/null'

    export default {
        components: { MyImage, MyNull },
        data() {
            return {
                couponId: '',
                couponData: null,

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

        onLoad() {
            this.couponId = this.$mp.query.id;
            this.getCoupon();
            this.getGoodsList();
        },
        // 函数
        methods: {
            // 获取商品列表
            getGoodsList() {
                const self = this

                self.api.get('/Coupon/GetAvailableProducts', {
                    couponId: this.couponId,
                    pageIndex: self.pageIndex,
                    pageSize: 20,
                }).then(res => {
                    if (!res.data.data.length) {
                        this.dataEnd = true;
                    }

                    self.goodsList = [...self.goodsList, ...res.data.data]
                })
            },
            // 获取优惠券详情
            getCoupon() {
                this.api.get('/Coupon/GetCoupon', {
                    id: this.couponId
                }).then(res => {
                    this.couponData = res.data;
                })
            },
            // 领取优惠券
            receive() {
                uni.showLoading({});
                this.api.post('/Coupon/Receive', {
                    couponId: this.couponId,
                    query: true
                }).then(res => {
                    uni.hideLoading();
                    if (res.success) {
                        this.fn.showToast('领取成功');
                        this.getCoupon();
                    } else {
                        this.fn.showToast('领取失败：' + res.message);
                    }
                })
            },

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

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

            // 优惠券点击
            couponClick() {
                if (this.couponData.operation === 1 ||this.couponData.operation === 8) {
                    this.router.push({
                        path: '/pages/coupon/detail',
                        query: {
                            id: this.couponId,
                        }
                    });
                }
            },
        },

        onReachBottom() {
            if (!this.dataEnd) {
                this.pageIndex++;
                this.getGoodsList();
            }
        },
        // 数据计算
        computed: {
            customConfig() {
                return this.$store.state.common.customConfig
            },

            // 优惠券状态
            couponStatusText() {
                const operation = this.couponData.operation;
                console.log(operation)
                const obj = {
                    showText: null,
                    operation: operation
                }
                switch (operation) {
                    case 1:
                        obj.showText = '立即领取';
                        obj.dis = false;
                        break;
                    case 2:
                        obj.showText = '已领取';
                        obj.dis = false;
                        break;
                    case 3:
                        obj.showText = '不可领取';
                        obj.dis = true;
                        break;
                    case 4:
                        obj.showText = '已使用';
                        obj.dis = true;
                        break;
                    case 5:
                        obj.showText = '已结束';
                        obj.dis = true;
                        break;
                    case 6:
                        obj.showText = '已领完';
                        obj.dis = true;
                        break;
                    case 7:
                        obj.showText = '已过期';
                        obj.dis = true;
                        break;
                    case 8:
                        obj.showText = '立即赠送';
                        obj.dis = false;
                        break;
                    case 9:
                        obj.showText = '已被领取';
                        obj.dis = true;
                        break;
                    default:
                        obj.showText = '无效';
                        obj.dis = true;
                        break;
                }
                console.log(obj)
                return obj;
            }
        }
    }
</script>

<style lang="scss">
.page-head {
    background-color: #fff;
    padding: px(50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .coupon-info {
        line-height: 1.5;
        .tit {
            font-size: px(36);
            margin: 0;
            color: #666;
        }
        .name {
            margin: 0;
            color: #f8662a;
            font-size: px(36);
        }
    }
    .status {
        // width: px(168);
        height: px(88);
        border: px(2) solid #f8662a;
        color: #f8662a;
        text-align: center;
        line-height: px(88);
        border-radius: px(44);
        padding: 0 px(50);
        &.dis {
            color: #999;
            border-color: #eee;
        }
    }
}
.shop__list {
    padding-top: px(60);
}
.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>
