<style>
  .MyCoupon {
    background-color: #F5F5F5;
  }

  .MyCoupon .menu_list ul {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #F2DADA;
  }

  .MyCoupon .menu_list ul li {
    float: left;
    width: 137px;
    text-align: center;
    cursor: pointer;
  }

  .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: #E73828
  }

  .MyCoupon ._table_box {
    margin-top: 20px;
  }

  .MyCoupon ._content_item {
    display: flex;
    flex-wrap: wrap;
    min-height: 572px;
  }

  .MyCoupon ._content_item ._item {
    width: 220px;
    height: 276px;
    position: relative;
    transition: all linear .5s;
    overflow: hidden;
    margin: 5px 4px;
  }

  .MyCoupon ._content_item ._item:hover {
    box-shadow: 0px 1px 13px 0px rgb(189, 189, 189);
  }

  .MyCoupon ._content_item ._top {
    background-color: #F1BC69;
  }

  .MyCoupon ._content_item ._top ._time {
    color: #A7711C;
  }

  .MyCoupon ._content_item ._top._blue {
    background-color: #8794E2;
  }

  .MyCoupon ._content_item ._top._blue ._time {
    color: #4C58A4;
  }

  .MyCoupon ._content_item div._top._gray {
    background-color: #7d7d7d !important;
  }

  .MyCoupon ._content_item div._top._gray ._overdue,
  .MyCoupon ._content_item div._top._gray ._info_bottom {
    display: none
  }

  .MyCoupon ._content_item div._top._gray ._info_sale {
    color: #FFFFFF !important;
  }

  .MyCoupon ._content_item div._top._gray ._time {
    color: #777777 !important;
  }

  .MyCoupon ._top_raduis {
    display: flex;
    justify-content: space-between;
  }

  .MyCoupon ._top_raduis span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: white;
    margin-top: -4px;
  }

  .MyCoupon ._item ._top ._overdue {
    background-color: #E9F026;
    color: #666666;
    padding: 4px 6px;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
  }

  .MyCoupon ._item ._top ._info_details {
    padding: 15px 10px;
  }

  .MyCoupon ._item ._top ._info_details ._info_sale {
    font-size: 30px;
    color: white;
  }

  .MyCoupon ._item ._top ._info_details ._info_sale span {
    font-size: 20px;
    color: white;
  }

  .MyCoupon ._item ._top ._info_details ._info_full {
    color: #FFFFFF;
    font-size: 12px;
    padding: 5px 0;
  }

  .MyCoupon ._item ._top ._info_details ._info_time {
    font-size: 12px;
  }

  .MyCoupon ._item ._top ._info_details ._info_bottom {
    padding: 1px 5px;
    color: #A7711C;
    font-size: 12px;
    position: absolute;
    border: 1px solid #A7711C;
    border-radius: 4px;
    right: 13px;
    top: 24px;
    cursor: pointer;
  }

  .MyCoupon ._item ._bottom {
    padding: 15px 10px;
    background-color: #F9F9F9;
  }

  .MyCoupon ._item ._bottom p {
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 5px !important;
  }

  .MyCoupon ._item ._bottom p._bottom_info {
    color: #666666;
    font-weight: 300;
  }

  .MyCoupon ._item ._bottom p._margin_bt0 {
    margin-bottom: 0 !important;
  }

  .MyCoupon p._info_coupon_name {
    font-size: 18px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
  }

  /* 分页样式 */
  .MyCoupon ._pagination {
    height: 45px;
    background-color: #EBEBEB;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .MyCoupon .el-pagination .btn-next,
  .MyCoupon .el-pagination .btn-prev {
    width: 40px !important;
    height: 20px !important;
    border: 1px solid rgba(238, 68, 84, 1);
    border-radius: 10px;
    color: #f56c6c;
  }

  .MyCoupon .el-pagination {
    display: flex;
    align-items: center;
  }

  .MyCoupon .el-pager li {
    background: transparent;
    font-weight: initial;
  }

  .MyCoupon .el-pager li:hover {
    color: #f56c6c;
  }

  .MyCoupon .el-pager li.active {
    color: #f56c6c;
  }

  .MyCoupon .empty-data {
    width: 100%;
    padding: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    color: #bbb;
    font-size: 12px;
  }

</style>

<template>
  <!-- 优惠券 -->
  <el-row 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 v-for="(item,index) in ScopeOfUseList" :key="index"
                @click.native="dropdownText = item.Id>0?item.Name:$t('pub.unlimitedSel'), msg.CouponsUseScope = item.Id, getList(), resetPageIndex()">{{ item.Name }}
              </el-dropdown-item>
              <!-- <el-dropdown-item
                @click.native="dropdownText = $t('active.cl_tongyong'), msg.couponsUseScope = 1, getList(), resetPageIndex()">{{$t('active.cl_tongyong')}}
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="dropdownText = $t('objFill.gentuanyou'), msg.couponsUseScope = 2, getList(), resetPageIndex()">{{$t('objFill.gentuanyou')}}
              </el-dropdown-item>
              <el-dropdown-item @click.native="dropdownText = $t('MarketingActi.local')">{{$t('MarketingActi.local')}}</el-dropdown-item>
              <el-dropdown-item @click.native="dropdownText = $t('objFill.dinzhiyou')">{{$t('objFill.dinzhiyou')}}</el-dropdown-item>
              <el-dropdown-item
                @click.native="dropdownText = $t('active.cl_qianzheng'), msg.couponsUseScope = 3, getList(), resetPageIndex()">{{$t('active.cl_qianzheng')}}
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="dropdownText = $t('active.cl_jipiao'), msg.couponsUseScope = 4, getList(), resetPageIndex()">{{$t('active.cl_jipiao')}}
              </el-dropdown-item>
              <el-dropdown-item
                @click.native="dropdownText = $t('hotel.hotel'), msg.couponsUseScope = 10, getList(), resetPageIndex()">{{$t('hotel.hotel')}}
              </el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <span class="__cp" :class="{_active: typeActive === 1 }"
            @click="typeActive = 1, msg.CouponStatus = 1, msg.CouponsType = 0, getList(), resetPageIndex()">{{$t('objFill.quanbuyouhuiquan')}}</span>
        </li>
        <li>
          <span class="__cp" :class="{_active: typeActive === 2 }"
            @click="typeActive = 2, msg.CouponsType = 2, msg.CouponStatus = 1, getList(), resetPageIndex()">{{$t('active.cl_zkquan')}}</span>
        </li>
        <li>
          <span class="__cp" :class="{_active: typeActive === 3 }"
            @click="typeActive = 3, msg.CouponsType = 1, msg.CouponStatus = 1, getList(), resetPageIndex()">{{$t('objFill.dikouquan')}}</span>
        </li>
        <li>
          <span class="__cp" :class="{_active: typeActive === 4 }"
            @click="typeActive = 4,msg.CouponsType=0, msg.CouponStatus = 3, getList(), resetPageIndex()">{{$t('active.cl_ygqi')}}</span>
        </li>
      </ul>
    </el-row>
    <!-- 列表 -->
    <el-row class="_table_box" v-loading="dataLoading">
      <div v-if="dataList.length>0" class="_content_item">
        <template v-for="(item, index) in dataList">
          <VCoupon :item='item' />
        </template>
      </div>
      <div class="empty-data" v-else>
        <i style="display:block;font-size:90px" class="iconfont icon-kong"></i>
        {{$t('objFill.henbaoqianxxzbd')}}
      </div>
      <!-- 分页 -->
      <el-row class="_pagination" v-if="totalCount > 1 && dataList.length>0">
        <el-pagination :current-page.sync="currentPage" :page-size="msg.pageSize" layout="total, prev, pager, next"
          :total="Count" @current-change='handleCurrentChange'>
        </el-pagination>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
  import moment from 'moment'
  import Coupon from './SmallComponents/Coupon'
  export default {
    components: {
      VCoupon: Coupon,
    },
    data() {
      return {
        dropdownText: this.$t('pub.unlimitedSel'),
        typeActive: 1,
        totalCount: 1,
        pageSize: 1,
        msg: {
          pageIndex: 1,
					pageSize: 14,
					userId: 0, //CustomerAccountId
					lineId: 0, //线路
					lineteamId: 0, //系列ID
					CustomerType: 0, //0-同行，1-直客
					CouponStatus: 1, //1未使用  2已使用  3已过期 
					CouponsUseScope: -1, //优惠券使用范围 有枚举
					FromPlatform: 0, //来源平台 1app 2小程序
					CouponsType: 0, //优惠券类型 1：抵用券，2：折扣卷
        },
        dataList: [],
        dataLoading: false,
        currentPage: 1,
        Count: 1,
        ScopeOfUseList: [],
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getScopeOfUse()
      this.getList();
      if (this.$route.query.customerId) {
        this.msg.userId = this.$route.query.customerId;
      }
    },
    methods: {
      getScopeOfUse() {
            this.apipost("coupon_post_GetCouponAllotOrderTypeEnumList", {}, (res) => {
            if (res.data.resultCode == 1) {
              this.ScopeOfUseList = res.data.data
              this.ScopeOfUseList.unshift({
                Id: -1,
                Name: '不限'
              })
            }
          }, (error) => {
        })
			},
      // 获取数据
      getList() {
        this.dataLoading = true;
        this.apipost("coupon_post_GetUserCanUseCouponPageList",
          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.dataLoading = false;
          },
          null
        );
      },
      //查询初始化页码
      resetPageIndex() {
        this.msg.pageIndex = 1;
      },
      // 翻页
      handleCurrentChange(val) {
        this.msg.pageIndex = parseInt(val);
        this.getList();
      }
    }
  };

</script>