<style>
@import "../../assets/mall/PsMyCoupon.css";

</style>

<template>
    <el-row class="PsMyCoupon">
        <el-col :span="20" :offset="2" class="_content">
            <el-row class="_el_tab">
                <ul>
                    <li :class="active==3?'active':''" @click="active=3, msg.couponsUseScope = 1, getList(), resetPageIndex()">通用</li>
                    <li :class="active==0?'active':''" @click="active=0, msg.couponsUseScope = 2, getList(), resetPageIndex()">跟团游</li>
                    <li :class="active==1?'active':''" @click="active=1, msg.couponsUseScope = 4, getList(), resetPageIndex()">机票</li>
                    <li :class="active==2?'active':''" @click="active=2, msg.couponsUseScope = 3, getList(), resetPageIndex()">签证</li>
                </ul>
            </el-row>
            <el-row class="_el_tab_2">
                <ul>
                    <li :class="activeSub==0?'active':''" @click="activeSub=0, msg.couponsType = 0, msg.couponEffectStatus = 1, getList(), resetPageIndex()">全部</li>
                    <li :class="activeSub==1?'active':''" @click="activeSub=1, msg.couponsType = 2, msg.couponEffectStatus = 1, getList(), resetPageIndex()">折扣券</li>
                    <li :class="activeSub==2?'active':''" @click="activeSub=2, msg.couponsType = 1, msg.couponEffectStatus = 1, getList(), resetPageIndex()">抵扣券</li>
                    <li :class="activeSub==3?'active':''" @click="activeSub=3, msg.couponEffectStatus = 3, getList(), resetPageIndex()">已过期</li>
                    <!-- <li :class="activeSub==3?'active':''" @click="active=0,getList(),resetPageIndex()">即将过期</li> -->
                </ul>
            </el-row>
            <el-row class="_table_box" v-loading='dataLoading'>
                <div v-if="dataList.length>0" class="_content_item">
                    <div class="_item" v-for="(item, index) in dataList">
                        <div class="_top" :class="{'_blue':item.couponsType===1,'_gray':item.couponEffectStatus===3,}">
                            <div class="_top_raduis">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                            <div class="_overdue" v-if="item.warning">
                                即将过期
                            </div>
                            <div class="_info_details">
                                <p class="_info_coupon_name" :title="item.couponsName">{{item.couponsName}}</p>
                                <p class="_info_sale" v-if="item.couponsType !== 1">{{item.denomination}}<span>折</span></p>
                                <p class="_info_sale" v-else><span>￥</span>{{item.denomination}}</p>
                                <p class="_info_full">满{{item.useCondition}}可用</p>
                                <p class="_info_time _time">有效时间：{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
                                <p class="_info_bottom" @click="goUrl('heel',true)">去使用</p>
                            </div>
                        </div>
                        <div class="_bottom">
                            <p class="_bottom_tit">可用线路及系列</p>
                            <p class="_bottom_info">{{item.lineName === '' ? '不限' : item.lineName}}-{{item.lineTeamName === '' ? '不限' : item.lineTeamName}}</p>
                            <p class="_bottom_tit">优惠券来源</p>
                            <p class="_bottom_info _margin_bt0">{{item.accessType === 1 ? '抽奖活动' : '其他'}}</p>
                        </div>
                    </div>
                </div>
                <div class="empty-data" v-else>
                    <i class="iconfont icon-kong"></i>
                    很抱歉，你想要的信息我们真的找不到了
                </div>
                <div class="item-pager" v-if="dataList.length">
                    <el-pagination
                        background
                        layout="prev, pager, next, jumper"
                        :total="totalCount"
                        :page-size='pageSize'
                        @current-change='handleCurrentChange'>
                    </el-pagination>
                </div>
            </el-row>
        </el-col>
    </el-row>
</template>
<script>
export default {
    components: {

    },
    data(){
        return {
            active: 3,
            activeSub: 0,
            totalCount: 20,
            pageSize: 1, 
            msg:{
                pageIndex: 1,
                pageSize: 14,
                useState: 1,
                lineId: 0,
                lineteamId: 0,
                couponsName: '',
                couponsType: '',
                couponStatus: 1,
                couponEffectStatus: 1,
                couponsUseScope: 1,
            },
            dataList: [{a:1}],
            dataLoading: false,
            LineList: [],
            QLineTeamList: [],
            LineTeamList: [],
        }
    },
    computed: {
        
    },
    created(){
        
    },
    mounted() {
        this.getList();
        // this.getLineList();
    },
    methods: { 
        getList(){  // 获取数据
            this.dataLoading = true;
            this.msg.orderType = this.active;
            this.apiJavaPost('/api/b2b/user/getUserCouponAllotList',this.msg,res=>{
           
                let nowTime = this.getNowDate()
                if(res.data.resultCode==1){
                    let data = res.data.data.pageData;
                    data.forEach((x, i) => {
                        let cha = this.DateDiff(nowTime, x.expirationDate)
                        if (cha<3) {
                            x.warning = true
                        } else {
                            x.warning = false
                        }
                    });
                    this.dataList = data;
                    this.totalCount=res.data.data.pageCount;
                }else{
                    this.Error(res.data.message);
                }
                this.dataLoading = false;
            },null)
        },
        //获取线路列表
        getLineList() {
            this.apipost('line_post_GetList', {}, res => {
                if (res.data.resultCode == 1) {
                    this.LineList = res.data.data
                }
            })
        },
        //获取系列列表
        getLineTeamList (LineID, type) {
        let msg = {
            lineID: LineID,
            isTOOP: 1
        }
        this.apipost('team_post_GetList', msg, res => {
            if (res.data.resultCode == 1) {
            if (type) {
                this.QLineTeamList = res.data.data
            } else {
                this.LineTeamList = res.data.data
            }
            }
        })
        },
        handleCurrentChange(val) {  // 翻页
            this.msg.pageIndex=parseInt(val)
            this.getList()
        },
        resetPageIndex() {//查询初始化页码
            this.msg.pageIndex = 1;
        },
        goUrl(path,bl){
           
            if(path=='heel'){
                sessionStorage.setItem("defaultKey",'2-1');
                this.$emit('forword', '2-1')
            }
            sessionStorage.setItem("Homepage",bl);
            this.$store.commit('HomePage',bl)
            this.$router.push({name:path});
        }
    }
}
</script>