<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 class="user_head">
            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/user')">
            <span>
                优惠券
            </span>
        </div>
        <div class="box">
            <el-tabs class="tabs" v-model="data.activeName" @tab-click="handleClick" stretch>
                <el-tab-pane label="全部" name="all">
                    <div class="backgroundColor"></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="xin">{{item.type}}</p>
                                <p class="you">优惠券</p>
                            </div>
                            <div class="time">
                                <span>到期时间 {{item.time}}</span>
                            </div>
                            <div class="lock" v-if="item.status == 3">
                                <img src="../../assets/image/lock@2x.png" alt="">
                                <p>已锁定</p>
                            </div>
                        </div>
                    </div>
                    <div class="cuewords" v-if="data.cueShow">
                        <p>很抱歉，您暂时没有优惠券！</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待使用" name="toBeUsed">
                    <div class="backgroundColor"></div>
                    <div class="con" @click="usediscount" v-if="!data.toBeUsedShow">
                        <div class="list" v-for="item in data.toBeUsedList" :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="xin">{{item.type}}</p>
                                <p class="you">优惠券</p>
                            </div>
                            <div class="time">
                                <span>到期时间 {{item.time}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="cuewords" v-if="data.toBeUsedShow">
                        <p>很抱歉，您暂时没有优惠券！</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="锁定中" name="locking">
                    <div class="backgroundColor"></div>
                    <div class="con" @click="usediscount" v-if="!data.lockingShow">
                        <div class="list" v-for="item in data.lockingList" :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="xin">{{item.type}}</p>
                                <p class="you">优惠券</p>
                            </div>
                            <div class="time">
                                <span>到期时间 {{item.time}}</span>
                            </div>
                            <div class="lock" v-if="!data.lockingShow">
                                <img src="../../assets/image/lock@2x.png" alt="">
                                <p>已锁定</p>
                            </div>
                        </div>
                    </div>
                    <div class="cuewords" v-if="data.lockingShow">
                        <p>很抱歉，您暂时没有优惠券！</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已过期" name="overdue">
                    <div class="backgroundColor"></div>
                    <div class="con" @click="usediscount" v-if="!data.overdueShow">
                        <div class="list" v-for="item in data.overdueList" :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="xin">{{item.type}}</p>
                                <p class="you">优惠券</p>
                            </div>
                            <div class="time">
                                <span>到期时间： {{item.time}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="cuewords" v-if="data.overdueShow">
                        <p>很抱歉，您暂时没有优惠券！</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已使用" name="used">
                    <div class="backgroundColor"></div>
                    <div class="con" @click="usediscount" v-if="!data.usedShow">
                        <div class="list" v-for="item in data.usedList" :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="xin">{{item.type}}</p>
                                <p class="you">优惠券</p>
                            </div>
                            <div class="time">
                                <span>到期时间 {{item.time}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="cuewords" v-if="data.usedShow">
                        <p>很抱歉，您暂时没有优惠券！</p>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </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,
            activeName: 'all',
            // 待使用
            toBeUsedList: [],
            toBeUsedShow: false,
            // 已过期
            overdueList: [],
            overdueShow: false,
            // 锁定中
            lockingList: [],
            lockingShow: false,
            // 已使用
            usedList: [],
            usedShow: 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
            }
            // 待使用列表
            let dataList = res.data
            dataList.forEach((item) => {
                if (item.status == 0) {
                    this.data.toBeUsedList.push({
                        time: item.end_at,
                        price: item.money,
                        type: item.type,
                        baseImg:item.back,
                        status: item.status,
                        oid: item.oid ? item.oid : 0
                    });
                }
            })
            if(this.data.toBeUsedList == 0){
                this.data.toBeUsedShow = true
            }
            // 已过期
            dataList.forEach((item) => {
                if (item.status == 2) {
                    this.data.overdueList.push({
                        time: item.end_at,
                        price: item.money,
                        type: item.type,
                        baseImg:item.back,
                        status: item.status,
                        oid: item.oid ? item.oid : 0
                    });
                }
            })
            if(this.data.overdueList == 0){
                this.data.overdueShow = true
            }
            // 锁定中
            dataList.forEach((item) => {
                if (item.status == 3) {
                    this.data.lockingList.push({
                        time: item.end_at,
                        price: item.money,
                        type: item.type,
                        baseImg:item.back,
                        status: item.status,
                        oid: item.oid ? item.oid : 0
                    });
                }
            })
            if(this.data.lockingList == 0){
                this.data.lockingShow = true
            }
            // 已使用
            dataList.forEach((item) => {
                if (item.status == 1) {
                    this.data.usedList.push({
                        time: item.end_at,
                        price: item.money,
                        type: item.type,
                        baseImg:item.back,
                        status: item.status,
                        oid: item.oid ? item.oid : 0
                    });
                }
            })
            if(this.data.usedList == 0){
                this.data.usedShow = true
            }
        }
        async usediscount(){

        }
        async godetial(res:any,oid:any){
            // console.log(res, oid)
          if(res == 3){
              this.$router.push({
                  name: "odetail",
                  params: {
                      id: oid
                  }
              });
          }
           if(res == 0 ){
               this.$router.push('/')
           }
        }
        // 点击tab切换
        handleClick(tab) {
            // console.log(tab);
            this.data.activeName = tab.name
        }
    }
</script>
<style  lang="scss" scoped>
    @media screen and (max-width : 320px) {
        .con .list {
            height: 8rem;
        }
    }
    @media screen and (min-width:320px) and (max-width:375px) {
        .con .list {
            height: 9rem;
        }
    }
    @media screen and (min-width:375px) and (max-width:414px) {
        .con .list {
            height: 10rem;
        }
    }
    @media screen and (min-width:414px) and (max-width:768px) {
        .con .list {
            height: 11rem;
        }
    }
    // 顶部导航
    .user_head{
        text-align: center;
        font-size: 2rem;
        padding-bottom: 1.667rem;
        padding-top: 1rem;
        line-height: 1.5rem;
        background-color: #fff;
        .leftIcon{
            position: absolute;
            left: 1.667rem;
            top: 1.4rem;
            width: 0.667rem;
        }
        span {
            vertical-align: middle;
            color: #333;
        }
    }
    .box {
        text-align: center;
        /deep/.el-tabs__item.is-active {
            color: #333;
        }
        /deep/.el-tabs__item {
            color: #666;
            padding: 0 1rem;
            font-size: 1.3rem;
        }
        /deep/.el-tabs__nav-wrap
        /deep/.el-tabs__nav-scroll
        /deep/.el-tabs__nav {
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        /deep/.el-tabs__active-bar {
            background-color: #4FDCA2;
        }
        /deep/.el-tabs__header {
            // padding: 0 1rem;
            margin: 0 0 15px;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        /deep/.el-tabs__nav-wrap::after {
            background: none;
        }
    }
    .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;
        padding-top: 2rem;
        .list{
            /*background: url("../../assets/image/reward.png");*/
            background-size: 100% 100%;
            margin-bottom: 1.2rem;
            width: 90%;
            // height:8rem;
            // height:9rem;
            position: relative;
            .price{
                color: white;
                // font-size: 4.5rem;
                font-size: 3rem;
                position: absolute;
                // top: 0;
                // left: 3.3rem;
                top: 0.5rem;
                left: 4.3rem;
                font-style: normal;
                font-weight: 700;
            }
            .word{
                color: white;
                position: absolute;
                // top: 1.5rem;
                // right: 40%;
                top: 4.5rem;
                left: 4rem;
                .you{
                    // font-size: 2rem;
                    font-size: 1.2rem;
                    line-height: 2rem;
                    display: inline-block;
                }
                .xin{
                    font-size: 1.2rem;
                    // line-height: 0rem;
                    line-height: 2rem;
                    text-align: center;
                    display: inline-block;
                }
            }
            .time{
                // color: #c5c5c5;
                color: #fff;
                // font-size: 1.3rem;
                font-size: 1.2rem;
                position: absolute;
                // bottom: 0.1rem;
                bottom: 0.5rem;
                // padding-left: 2rem;
                width: 100%;
                text-align: center;
            }
        }
    }
    // 已锁定遮罩
    .lock {
        position: absolute;
        top:0;
        left: 0;
        background-color: rgba($color: #000000, $alpha: .6);
        width: 100%;
        height: 100%;
        border-radius: 1rem;
        color: #fff;
        img {
            width: 3rem;
            margin: 1.5rem 0 1rem;
        }
    }
    .cuewords{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        p{
            margin-top: 9rem;
            color: #999
        }
    }
    .backgroundColor {
        background-color: #EDF0F5;
        width: 100%;
        height: 1.25rem;
    }

</style>
