<template>
    <div class="g-coupon" v-if="show" @click="close">
        <div class="g-coupon__content" @click.stop="">
            <div class="g-coupon__nav">
                <div class="g-coupon__title">优惠券</div>
                <img class="g-coupon__close" src="/static/goods/close.png" @click="close" alt="">
            </div>
            <div class="g-coupon__list">
                <scroll-view class="g-coupon__scroll" :scroll-y="true" @scrolltolower="getMore">
                    <ul class="g-list">
                        <li class="g-list__item" v-for="(item, index) in list" :key="index" @click="getCoupon(item)">
                            <img v-if="item.isReceived" class="g-list__bg" src="/static/goods/coupon_bg_select.jpg" alt="">
                            <img v-else="" class="g-list__bg" src="/static/goods/coupon_bg.jpg" alt="">
                            <div class="g-list__content">
                                <div class="g-list__left">
                                    <div class="g-list__price g-price">
                                        <span class="g-price__sign">¥</span>
                                        <span class="g-price__text">{{ item.value | minuteToRmb }}</span>
                                    </div>
                                    <div class="g-list__text">{{ item.name || '' }}</div>
                                    <div class="g-list__text">使用期限：领取后{{ item.expiredDays || '0' }}天内有效</div>
                                </div>
                                <div class="g-list__right">{{ item.isReceived ? '已领取' : '立即领取' }}</div>
                            </div>
                        </li>
                    </ul>
                </scroll-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'GCoupon',

        props: {
            goodsId: {
                type: String,
            },
        },

        // 数据
        data() {
            return {
                show: false,
                page: 1,
                list: [],
            }
        },

        // 函数
        methods: {
            // 打开
            open() {
                const self = this

                self.show = true
            },

            // 关闭
            close() {
                const self = this

                self.show = false
            },

            // 获取优惠券列表
            getList() {
                const self = this

                self.page = 1
                self.api.get('/Coupon/GetReceiveCoupons', {
                    productId: self.goodsId,
                    pageIndex: self.page,
                    pageSize: 20,
                }).then(res => {
                    if (res.data.data.length) {
                        self.page++
                    }

                    self.list = res.data.data
                })
            },

            // 获取
            getMore() {
                const self = this

                self.api.get('/Coupon/GetReceiveCoupons', {
                    productId: self.goodsId,
                    pageIndex: self.page,
                    pageSize: 20,
                }).then(res => {
                    if (res.data.data.length) {
                        self.page++
                    }

                    self.list = self.list.concat(res.data.data)
                })
            },

            // 领取优惠券
            getCoupon(val) {
                const self = this

                if (!val.isReceived) {
                    self.api.post('/Coupon/Receive', {
                        couponId: val.id,
                    }).then(() => {
                        self.list.forEach((item, index) => {
                            if (item.id === val.id) {
                                item.isReceived = true
                                self.list.splice(index, 1, item)
                            }
                        })
                        self.fn.showToast('领取成功')
                    })
                }
            },
        },

        // 数据计算
        computed: {},

        // 数据监听
        watch: {
            goodsId(val) {
                const self = this
                if (val) {
                    self.getList()
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    .g-coupon {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 995;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .4);

        &__content {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: px(1550);
            padding: 0 px(55);
            border-radius: px(10) px(10) 0 0;
            background-color: #fff;
        }

        &__nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: px(145);
            border-bottom: solid px(3) #eaeaea;
        }

        &__title {
            font-size: px(50);
            color: #000;
            font-weight: 700;
        }

        &__close {
            width: px(60);
            height: px(60);
        }

        &__list {
            position: relative;
            flex: 1;
        }

        &__scroll {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
        }
    }

    .g-list {
        padding: px(30) 0;

        &__item {
            position: relative;
            height: px(240);
            margin-top: px(30);

            &:first-child {
                margin-top: 0;
            }
        }

        &__bg {
            width: 100%;
            height: 100%;
        }

        &__content {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100%;
        }

        &__left {
            flex: 1;
            padding-left: px(40);
        }

        &__text {
            padding-top: px(15);
            font-size: px(36);
            color: #676767;
        }

        &__right {
            display: flex;
            justify-content: center;
            width: px(300);
            font-size: px(46);
            color: #f66829;
        }
    }

    .g-price {
        display: flex;
        align-items: baseline;

        &__sign {
            font-size: px(36);
            color: #f66829;
        }

        &__text {
            font-size: px(60);
            color: #f66829;
        }
    }
</style>