<template>
    <div class="page">
        <ul class="coupon__list">
            <!-- <li class="coupon__item coupon__item">
                <div class="tag">
                    <img src="/static/coupon/guoqi.png" alt />
                </div>
                <section class="coupon__top">
                    <div class="coupon__info">
                        <div class="coupon__info--left">
                            <div class="coupon__num">
                                <span class="sign">¥</span>
                                50
                            </div>
                            <div class="coupon__condition">满999可用</div>
                        </div>
                        <div class="coupon__info--right">
                            <h3 class="coupon__tit">全部平台满999减50优惠券</h3>
                            <div class="coupon__date">2020.07.02 18:00-2020.07.05 18:00</div>
                        </div>
                    </div>
                    <span class="coupon__btn" @click="goUse">去使用</span>
                </section>
                <section class="coupon__bottom">
                    <span>
                        使用条件：部分商品可用
                        <span class="coupon__bottom--view">查看</span>
                    </span>
                    <span class="give" @click="giveCoupon()">
                        <i class="iconfont iconshare give-icon"></i>
                        <span>赠送券</span>
                    </span>
                </section>
            </li>-->
            <li v-for="item of dataList" :key="item.id" class="coupon__item">
                <div class="tag" v-if="item.new">
                    <img src="/static/coupon/new.png" alt />
                </div>
                <div class="tag" v-if="item.guoqi">
                    <img src="/static/coupon/guoqi.png" alt />
                </div>
                <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>
                    <span
                        class="coupon__btn status3"
                        v-if="item.status === 3"
                        @click="goDetail(item)"
                        >赠送中</span
                    >
                    <span class="coupon__btn" v-else @click="goUse(item)"
                        >去使用</span
                    >
                </section>
                <!-- 全店可用 -->
                <section class="coupon__bottom" v-if="item.isCurrency">
                    <div class="item">
                        <span>使用条件：全商店可用</span>
                        <span
                            class="give"
                            v-if="item.giveToFriends"
                            @click="giveCoupon(item)"
                        >
                            <i
                                class="iconfont iconshare give-icon"
                                :class="{ on: item.status === 3 }"
                            ></i>
                            <span>{{
                                item.status === 3 ? "取消赠送" : "赠送券"
                            }}</span>
                        </span>
                    </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">
                        <span>
                            使用条件：部分商品可用
                            <span
                                class="coupon__bottom--view"
                                @click="goUse(item)"
                                >查看</span
                            >
                        </span>
                        <span
                            class="give"
                            v-if="item.giveToFriends"
                            @click="giveCoupon(item)"
                        >
                            <i
                                class="iconfont iconshare give-icon"
                                :class="{ on: item.status === 3 }"
                            ></i>
                            <span>{{
                                item.status === 3 ? "取消赠送" : "赠送券"
                            }}</span>
                        </span>
                    </div>
                    <div class="item" v-if="item.storeName">
                        <span>适用门店：{{ item.storeName }}</span>
                    </div>
                </section>
            </li>
        </ul>
        <my-null
            v-if="pageIndex === 1 && dataEnd"
            title="暂时没有内容哦"
        ></my-null>
        <p class="history__coupon" @click="jumpHandle('/pages/coupon/history')">
            查看历史优惠券 &gt;
        </p>
    </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: 0,
                    pageSize: 8,
                    pageIndex: this.pageIndex,
                })
                .then((res) => {
                    this.ifDataTag(res.data.list);
                    this.dataList = [...this.dataList, ...res.data.list];
                    if (res.data.list.length === 0) {
                        this.dataEnd = true;
                    }
                });
        },

        // 判断数据是不是最新的 24小时为界 标记为new  和guoqi
        ifDataTag(data) {
            if (!data.length) {
                return;
            }
            var hms = 1000 * 60 * 60 * 60 * 24; // 24 小时等于多少毫秒
            for (let item of data) {
                // 判断new
                var time = item.receiveTime;
                var date = new Date(time);
                if (new Date() - date < hms) {
                    item.new = true;
                }

                // 判断guoqi
                var time2 = item.EndUseTime;
                var date2 = new Date(time2);
                if (new Date() - date2 < hms) {
                    item.guoqi = true;
                    item.new = false;
                }
            }
        },

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

        // 赠送优惠券
        giveCoupon(val) {
            const self = this;
            if (val.status !== 3) {
                // 赠送
                this.fn
                    .showModal({
                        title: "提醒",
                        content:
                            "赠送后优惠券状态会变为赠送中,且不可使用，是否确认赠送？",
                    })
                    .then((res) => {
                        if (res.cancel) {
                            return;
                        }
                        self.api
                            .post("/Coupon/Give", {
                                couponId: val.id,
                                crId: val.receiveId,
                                query: true,
                            })
                            .then((res2) => {
                                if (res2.success) {
                                    val.status = 3;
                                    self.router.push({
                                        path: "/pages/coupon/detail",
                                        query: {
                                            id: val.id,
                                            receiveId: val.receiveId,
                                        },
                                    });
                                } else {
                                    this.fn.showToast(
                                        "赠送失败：" + res2.message
                                    );
                                }
                            });
                    });
            } else {
                // 取消赠送
                this.fn
                    .showModal({
                        title: "提醒",
                        content: "取消赠送后，将不可被他人领取，是否确认取消？",
                    })
                    .then((res) => {
                        if (res.cancel) {
                            return;
                        }
                        self.api
                            .post("/Coupon/CancelGive", {
                                crId: val.receiveId,
                                query: true,
                            })
                            .then((res2) => {
                                if (res2.success) {
                                    val.status = 0;
                                } else {
                                    this.fn.showToast(
                                        "取消赠送失败：" + res2.message
                                    );
                                }
                            });
                    });
            }
        },

        // 去详情
        goDetail(val) {
            this.router.push({
                path: "/pages/coupon/detail",
                query: {
                    id: val.id,
                    receiveId: val.receiveId,
                },
            });
        },
    },

    onReachBottom() {
        if (!this.dataEnd) {
            this.pageIndex++;
            this.getList();
        }
    },
    // 数据计算
    computed: {},
};
</script>

<style lang="scss" scoped>
.tag {
    width: px(90);
    height: px(90);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}
.coupon {
    &__list {
        margin: px(30);
    }
    &__item {
        background-color: #fff;
        // border: px(2) solid #efefef;
        box-shadow: 0 0 0 px(2) #eee inset;
        border-radius: px(10);
        overflow: hidden;
        position: relative;
        display: block;
        & ~ .coupon__item {
            margin-top: px(30);
        }
    }

    &__top {
        padding: px(40) px(40) px(40) px(70);
        display: flex;
        align-items: top;
        justify-content: space-between;
    }
    &__btn {
        height: px(70);
        width: px(150);
        background-color: #ff632a;
        color: #fff;
        font-size: px(34);
        margin-left: px(30);
        text-align: center;
        line-height: px(70);
        border-radius: px(35);
        flex-shrink: 0;
        margin-top: px(20);
        &.status3 {
            background-color: #f9fcf3;
            color: #ff632a;
        }
    }
    &__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: #ff632a;
        font-weight: 700;
        height: px(90);
        .sign {
            display: inline-block;
            font-size: px(32);
            margin-right: px(10);
        }
    }
    &__condition {
        font-size: px(32);
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: px(34);
    }
    &__tit {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        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);
            }
        }
        .give {
            color: #f8662a;
            flex-shrink: 0;
            font-size: px(32);
            display: flex;
            align-items: center;
            line-height: 1;
            .give-icon {
                margin-right: px(10);
                font-size: px(32);
                margin-top: px(2);
                &.on {
                    transform: rotateY(180deg);
                }
            }
        }
        &--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%);
        }
    }
}
.history__coupon {
    text-align: center;
    font-size: px(40);
    color: #999;
    padding-top: px(120);
    padding-bottom: px(30);
}
</style>
