<template>
    <div class="page">
        <ul class="coupon__list">
            <li v-for="item of dataList" :key="item.id" class="coupon__item">
                <section class="coupon__top">
                    <div class="coupon__info">
                        <div class="coupon__info--left">
                            <div class="coupon__num">
                                <span class="sign">¥</span>
                                {{item.value  / 100}}
                            </div>
                            <div
                                class="coupon__condition"
                                v-if="item.minimumAmount"
                            >满{{item.minimumAmount / 100}}可用</div>
                            <div class="coupon__condition" v-if="!item.minimumAmount">无最低要求</div>
                        </div>
                        <div class="coupon__info--right">
                            <h3 class="coupon__tit">
                                <span v-if="item.isCurrency">全平台</span>
                                {{item.name}}
                            </h3>
                            <div class="coupon__date">{{ item.startUseTime | dateFormat('yyyy-MM-dd hh:mm') }}至{{ item.endUseTime | dateFormat('yyyy-MM-dd hh:mm') }}</div>
                        </div>
                    </div>
                    <div class="coupon__status">
                        <!-- use.png已使用 ,overdue.png已过期,give.png已赠送 -->
                        <img v-if="item.status === 1" src="/static/coupon/use.png" alt />
                        <img v-if="item.status === 2" src="/static/coupon/overdue.png" alt />
                        <img v-if="item.status === 4" src="/static/coupon/give.png" alt />
                    </div>
                </section>
                <!-- 全店可用 -->
                <section class="coupon__bottom" v-if="item.isCurrency">
                    <div class="item">
                        使用条件：全商店可用
                    </div>
                    <div class="item" v-if="item.storeName">
                        <span>适用门店：{{ item.storeName }}</span>
                    </div>
                </section>
                <!-- 部分商品可用 -->
                <section class="coupon__bottom" v-if="!item.isCurrency">
                    <div class="item">
                        使用条件：部分商品可用
                    </div>
                    <div class="item" >
                        <span>适用门店：{{ item.storeName }}</span>
                    </div>
                    <!-- <a class="coupon__bottom--view">查看</a> -->
                </section>
            </li>
        </ul>
        <my-null v-if="pageIndex ===1 && dataEnd" title="暂时没有内容哦"></my-null>
    </div>
</template>

<script>
    import MyNull from '../../components/layout/null'
    export default {
        components: {
            MyNull
        },
        data() {
            return {
                pageIndex: 1,
                dataEnd: false,
                dataList: [],
            };
        },

        onLoad() {
            this.getList();
        },

        methods: {
            // 跳转处理
            jumpHandle(option) {
                const self = this;
                self.router.push(option);
            },

            // 获取数据
            getList() {
                const self = this

                self.api.get('/Coupon/GetMyCoupons', {
                    status: 1,
                    pageSize: 8,
                    pageIndex: this.pageIndex
                }).then(res => {
                    this.dataList = [...this.dataList, ...res.data.list];
                    if (res.data.list.length === 0) {
                        this.dataEnd = true;
                    }
                })
            },
        },

        onReachBottom() {
            if (!this.dataEnd) {
                this.pageIndex++;
                this.getList();
            }
        },
    }
</script>

<style lang="scss" scoped>
.coupon {
    &__list {
        margin: px(30);
    }
    &__item {
        background-color: #fff;
        // border: px(2) solid #efefef;
        box-shadow: 0 0 0 px(2) #efefef inset;
        border-radius: px(10);
        overflow: hidden;
        position: relative;
        & ~ .coupon__item {
            margin-top: px(30);
        }
        &--new .tag--new {
            display: block;
        }
    }

    &__top {
        padding: px(40) px(40) px(40) px(70);
        display: flex;
        align-items: top;
        justify-content: space-between;
        position: relative;
    }
    &__status {
        height: px(144);
        width: px(140);
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    &__info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: px(10);
        flex: 1;
        &--left {
            width: 23%;
            flex-shrink: 0;
            margin-right: px(20);
        }
        &--right {
            width: 75%;
            flex-shrink: 0;
        }
    }
    &__num {
        font-size: px(66);
        color: #999;
        font-weight: 700;
        height: px(90);
        .sign {
            display: inline-block;
            font-size: px(32);
            margin-right: px(10);
        }
    }
    &__condition {
        font-size: px(32);
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: px(34);
    }
    &__tit {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
        font-weight: 700;
        font-size: px(44);
        height: px(90);
    }
    &__date {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: px(32);
        color: #999;
        line-height: px(34);
    }
    &__bottom {
        padding: px(30) px(40);
        color: #999;
        font-size: px(34);
        border-top: px(2) dashed #efefef;
        position: relative;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            &~.item{
                margin-top: px(10);
            }
        }
        &--view {
            background-color: #f8662a;
            color: #fff;
            width: px(90);
            height: px(40);
            line-height: px(40);
            font-size: px(34);
            border-radius: px(20);
            text-align: center;
            display: inline-block;
            margin-left: px(15);
        }
        &::after,
        &::before {
            content: "";
            width: px(30);
            height: px(30);
            border-radius: 50%;
            border: px(2) solid #efefef;
            background: rgb(248, 248, 248);
            position: absolute;
            top: 0;
            z-index: 1;
        }
        &::after {
            right: 0;
            transform: translate(50%, -50%);
        }
        &::before {
            left: 0;
            transform: translate(-50%, -50%);
        }
    }
}
</style>