<style>
.MyCoupon{
    background-color: RGBA(246, 245, 248, 1);
    height: 100%;
}
.MyCoupon .menu_list ul{
height: 40px;
line-height: 40px;
}
.MyCoupon .menu_list ul li{
float: left;
width: 137px;
text-align: center;
cursor: pointer;
}
.MyCoupon .menu_list ul li:last-child{
    float: right;
    width: 60px;
}
.MyCoupon .menu_list ul li .__cp i{
padding-left: 25px;
}
.MyCoupon .menu_list ul li span.__cp{
font-size: 14px;
}
.MyCoupon .menu_list ul li span.__cp._active{
color: rgba(13, 36, 129, 1);
border-bottom: 2px solid rgba(13, 36, 129, 1);
display: inline-block;
}
.Coupon-box{
    position: relative;
    max-height: calc(100vh - 45px);
    overflow: auto;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-flow:row wrap;
}
.Coupon-item{
    position: relative;
    height: 205px;
    margin-bottom: 25px;
    width: 218px;
    margin-right: 25px;
}
.Coupon-item .top{
    position: absolute;
    width: calc(100%);
    height: 104px;
    background: url('../../assets/img/cust/bg1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px 30px;
    box-sizing: border-box;
    color: white
}
.Coupon-item .top2{
    background: url('../../assets/img/cust/bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.Coupon-item .top3{
    background: url('../../assets/img/cust/bg3.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.Coupon-item .top .zhe{
    font-size: 30px;
}
.Coupon-item .top .zhe span{
    font-size: 20px;
}
.Coupon-item .top .di{
    font-size: 20px;
}
.Coupon-item .top .di span{
    font-size: 30px;
}
.Coupon-item .top .man{
    color: white;
    font-size: 12px;
    margin-bottom: 5px;
}
.Coupon-item .top .time{
    font-size: 12px;
    color: rgba(80, 105, 204, 1);
}
.Coupon-item .bottom{
    position: absolute;
    top: 104px;
    background-color: white;
    width: calc(100%);
    padding: 10px 14px;
    box-sizing: border-box;
}
.Coupon-item .bottom .bold{
    margin-bottom: 4px;
}
</style>
<template>
    <div class="MyCoupon">
        <el-row class="menu_list">
            <ul class="clearfix">
                <li>
                    <el-dropdown trigger="click" placement="bottom-start">
                        <span class="el-dropdown-link">
                        <span class="__cp">
                            {{dropdownText}}
                            <i class="el-icon-arrow-down"></i>
                        </span>
                        </span>
                        <el-dropdown-menu class="changelanguage" slot="dropdown">
                        <el-dropdown-item @click.native="dropdownText = '不限', msg.couponsUseScope = 0, getList(), resetPageIndex()">不限</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '通用', msg.couponsUseScope = 1, getList(), resetPageIndex()">通用</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '跟团游', msg.couponsUseScope = 2, getList(), resetPageIndex()">跟团游</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '当地游'">当地游</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '定制游'">定制游</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '签证', msg.couponsUseScope = 3, getList(), resetPageIndex()">签证</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '机票', msg.couponsUseScope = 4, getList(), resetPageIndex()">机票</el-dropdown-item>
                        <el-dropdown-item @click.native="dropdownText = '酒店', msg.couponsUseScope = 10, getList(), resetPageIndex()">酒店</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li>
                    <span class="__cp" :class="{_active: typeActive === 1 }" @click="typeActive = 1, msg.couponsType = 0, msg.couponEffectStatus = 1, getList(), resetPageIndex()">全部优惠券</span>
                </li>
                <li>
                    <span class="__cp" :class="{_active: typeActive === 2 }" @click="typeActive = 2, msg.couponsType = 2, msg.couponEffectStatus = 1, getList(), resetPageIndex()">折扣券</span>
                </li>
                <li>
                    <span class="__cp" :class="{_active: typeActive === 3 }" @click="typeActive = 3, msg.couponsType = 1, msg.couponEffectStatus = 1, getList(), resetPageIndex()">抵扣券</span>
                </li>
                <li>
                    <span class="__cp" :class="{_active: typeActive === 4 }" @click="typeActive = 4, msg.couponEffectStatus = 3, getList(), resetPageIndex()">已过期</span>
                </li>
                <li>
                    <img src="../../assets/img/cust/close.png" alt="" @click="$emit('handleClose')">
                </li>
            </ul>
        </el-row>
        <div class="Coupon-box" v-loading="loading">
            <div class="Coupon-item" v-for="(item, index) in dataList" :key="index">
                <div class="top" :class="{'top2': item.couponsType !== 1, 'top3': item.couponEffectStatus===3}">
                    <p class="zhe" v-if="item.couponsType !== 1">{{item.denomination}} <span>折</span></p>
                    <p class="di" v-else>￥ <span>{{item.denomination}}</span></p>
                    <p class="man">满{{item.useCondition}}可用</p>
                    <p class="time" :style="{'color': item.couponsType !== 1 && tem.couponEffectStatus !== 3 ? 'rgba(197, 120, 80, 1)': item.couponEffectStatus===3 ? 'rgba(153, 153, 153, 1)' : ''}">{{item.effectDate | YMD}}-{{item.expirationDate | YMD}}</p>
                </div>
                <div class="bottom font-size-12">
                    <p class="bold">可用系列及线路</p>
                    <p class="font-color-info" style="margin-bottom: 5px;">{{item.lineName === '' ? '不限' : item.lineName}}-{{item.lineTeamName === '' ? '不限' : item.lineTeamName}}</p>
                    <p class="bold">优惠券来源</p>
                    <p class="font-color-info">{{item.remark}}</p>
                </div>
            </div>
        </div>
        <div v-if="dataList.length < 1" class="nodata font-color-info">
            <p>暂无数据</p>
        </div>
    </div>
</template>
<script>
import moment from 'moment'
export default {
  props: ['CustomerAccountId'],
  data() {
    return {
        loading: false,
        dropdownText: "不限",
        typeActive: 1,
        msg: {
            pageIndex: 1,
            pageSize: 999,
            useState: 1,
            lineId: 0,
            lineteamId: 0,
            couponsName: "",
            couponsType: "",
            couponStatus: 1,
            couponEffectStatus: 1,
            couponsUseScope: 0,
            userId:'',
        },
        dataList: [],
        totalCount: 0,
        Count: 0,
    };
  },watch:{
    
 },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
        this.msg.userId = this.CustomerAccountId
        this.loading = true;
        this.apiJavaPost(
            "/api/b2b/user/getUserCouponAllotList",
            this.msg,
            res => {
            let nowTime = moment().format("YYYY-MM-DD HH:mm:ss");
            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;
                this.Count = res.data.data.count;
                this.$forceUpdate()
            } else {
                this.Error(res.data.message);
            }
            this.loading = false;
            },
            null
        );
    },
   
    //查询初始化页码
    resetPageIndex() {
      this.msg.pageIndex = 1;
    },
  }
}
</script>