<template>
    <!--       我的订单-->
    <div class="youhuijuan">
        <div class="back">
            <p>优惠券,您的缴费神器</p>
        </div>
        <div class="con" @click="usediscount" v-if="!data.cueShow">
            <div class="list" v-for="item in data.list" :style="{background: 'url('+item.baseImg+')',backgroundSize: '100% 100%'}" @click="godetial(item.status,item.oid)">
               <i class="price">
                {{item.price}}
               </i>
                <div class="word">
                    <p class="you">优惠券</p>
                    <p class="xin">{{item.type}}</p>
                </div>
                <div class="time">
                   到期时间 {{item.time}}
                </div>
            </div>
        </div>
        <div class="cuewords" v-if="data.cueShow">
            <p>很抱歉，您暂时没有优惠券！</p>
        </div>
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import router from "../../router";
    @Component({
        components: {}
    })
    export default class UserEdit extends Vue {
        public data: any = {
               list:[],
               cueShow:false
        };
        async created(){
            let res = await Http.getInstance().getDisCounts();
            console.log(res)
            res.data.forEach((item: any) => {
                this.data.list.push({
                    time: item.end_at,
                    price: item.money,
                    type: item.type,
                    baseImg:item.back,
                    status: item.status,
                    oid: item.oid ? item.oid : 0
                });
            });
            if(res.data.length == 0){
                this.data.cueShow = true
            }
        }
        async usediscount(){

        }
        async godetial(res:any,oid:any){
            console.log(res)
          if(res == 3){
              this.$router.push({
                  name: "odetail",
                  params: {
                      id: oid
                  }
              });
          }
           if(res == 0 ){
               this.$router.push('/')
           }
        }
    }
</script>
<style  lang="scss" scoped>
    .back{

       p{
           font-size: 1.2rem;
           line-height: 3rem;
           background: #e5e5e5;
           color: #858585;
           padding-left:2rem ;
       }
    }
    .con{
        padding: 0.5rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .list{
            /*background: url("../../assets/image/reward.png");*/
            background-size: 100% 100%;
            margin-bottom: 1.2rem;
            width: 90%;
            height:8rem;
            position: relative;
            .price{
                color: white;
                font-size: 4.5rem;
                position: absolute;
                top: 0;
                left: 3.3rem;
            }
            .word{
                color: white;
                position: absolute;
                top: 1.5rem;
                right: 40%;
                .you{
                    font-size: 2rem;
                    line-height: 2rem;
                }
                .xin{
                    font-size: 1.2rem;
                    line-height: 0rem;
                    text-align: center;
                }
            }
            .time{
                color: #c5c5c5;
                font-size: 1.3rem;
                position: absolute;
                bottom: 0.1rem;
                padding-left: 2rem;
            }
        }
    }
    .cuewords{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        p{
            margin-top: 9rem;
        }
    }

</style>
