<!--优惠券综合-->
<template>
    <div id="coupon">
        <Nav :title="couponTitle"></Nav>
        <div class="content">
            <template v-if="couponList.length">
                <div class="cell" v-for="item,index in couponList" :key="index">
                    <div class="cellBox">
                        <div class="top" :class="{sy:status==1,gq:status==9}">
                            <div class="left">
                                <span>{{item.commodityName}}</span>
                                <span>{{item.couponName}}</span>
                            </div>
                            <div class="right">
                                <span>¥{{item.discountPrice}}</span>
                            </div>
                        </div>
                        <div class="bottom">
                            <div>
                                <span>{{$t('coupon.validityTerm')}}{{item.endTime}}</span>
                            </div>
                            <div class="delBox">
                                <!-- <template v-if="item.type!=1">
                                    <van-icon @click="deletes(item.id)" name="delete-o" color="#999999" size="14" />
                                </template> -->
                            </div>
                        </div>
                    </div>
                    <div class="circular1"></div>
                    <div class="circular2"></div>
                </div>
            </template>
            <template v-else>
                <van-empty :description="$t('coupon.none')"></van-empty>
            </template>
        </div>
        <van-overlay :show="loading" @click="loading = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-loading color="#1989fa" size="50" />
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import Nav from "@/components/pages/nav";
import { customerCouponList } from "@/api/comp/personal.js";
export default {
    data() {
        return {
            loading: true,
            couponList: [],
            pageType: null, //1未使用2已使用3已过期
            couponTitle: "",
            status:null,
        };
    },
    mounted() {
        //接收页面状态
        this.pageType = this.$route.query.type;
        switch (Number(this.pageType)) {
            case 1:
                this.couponTitle = this.$t('coupon.notUsed');
                this.status=0;
                break;
            case 2:
                this.couponTitle = this.$t('coupon.used');
                this.status=1;
                break;
            case 3:
                this.couponTitle = this.$t('coupon.expired');
                this.status=9;
                break;
        }
        // setTimeout(() => {
        //     for (let i = 0; i < 5; i++) {
        //         this.couponList.push({
        //             commodityName:
        //                 "商品名称商品名称商品名称商品名称商品名称商品名称",
        //             couponName: "优惠券名称优惠券名称",
        //             money: "50",
        //             validityTime: "2022.09.30 12:00",
        //             type: this.pageType,
        //             id: i,
        //         });
        //     }
        //     this.loading = false;
        // }, 1000);
        this.getData();
    },
    methods: {
        getData(){
            this.loading = true;
            customerCouponList({status:this.status}).then(res=>{
                if(res.code==200){
                    this.couponList=res.data;
                    this.loading = false;
                }
            })
        },
        deletes(id) {
            this.$dialog.confirm({
                title: this.$t('coupon.tips'),
                message:
                    this.$t('coupon.confirmTips'),
            })
                .then(() => {
                    this.$toast({ type: "success", message: this.$t('coupon.successmassage') });
                })
                .catch(() => {
                    this.$notify({ type: 'warning', message: this.$t('coupon.massage') });
                });
        },
    },
    components: {
        Nav,
    },
};
</script>

<style lang="scss" scoped>
#coupon {
    .content {
        background: #f9f9f9;
        padding: 0.12rem /* 12/100 */;
        box-sizing: border-box;
        color: #333333;
        min-height: calc(100vh - 0.44rem /* 128/100 */);
        .cell {
            position: relative;
            background: #fff;
            overflow: hidden;
            margin-bottom: 0.12rem /* 12/100 */;
            .cellBox {
                box-sizing: border-box;
                border: 1px dashed #6acdc8;
                .top {
                    display: flex;
                    border-bottom: 1px dashed #6acdc8;
                    .left {
                        width: 75%;
                        font-size: 0.14rem /* 14/100 */;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        text-align: left;
                        padding: 0.12rem /* 12/100 */ 0.12rem /* 12/100 */ 0
                            0.12rem /* 12/100 */;

                        box-sizing: border-box;
                        > span:nth-child(1) {
                            line-height: 0.22rem; /* 22/100 */
                        }
                        > span:nth-child(2) {
                            font-size: 0.15rem /* 15/100 */;
                            font-weight: bold;
                            line-height: 0.5rem; /* 50/100 */
                        }
                    }
                    .right {
                        width: 25%;
                        font-size: 0.3rem /* 30/100 */;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 0.12rem /* 12/100 */ 0 0.12rem /* 12/100 */;
                        box-sizing: border-box;
                        border-left: 1px dashed #6acdc8;
                        > span {
                            color: #38d0c9;
                        }
                    }
                }
                .top.sy {
                    background: url("../../../../../public/static/images/sy.png")
                        no-repeat;
                    background-size: auto 120%;
                    background-position: right center;
                }
                .top.gq {
                    background: url("../../../../../public/static/images/gq.png")
                        no-repeat;
                    background-size: auto 120%;
                    background-position: right center;
                }
                .bottom {
                    font-size: 0.13rem /* 13/100 */;
                    padding: 0.12rem /* 12/100 */;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    > div {
                        color: #999999;
                    }
                }
            }
            .circular1,
            .circular2 {
                width: 0.18rem /* 18/100 */;
                height: 0.18rem /* 18/100 */;
                border: 1px solid #6acdc8;
                // border: 1px dashed #6acdc8;
                border-radius: 50%;
                position: absolute;
                left: 70%;
                margin-left: 0.09rem;
                background: #f9f9f9;
            }
            .circular1 {
                top: 0;
                margin-top: -0.09rem;
            }
            .circular2 {
                bottom: 0;
                margin-bottom: -0.09rem;
            }
        }
    }
}
</style>