<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
                @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>
      </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>
        很抱歉，你想要的信息我们真的找不到了
      </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: "不限",
        typeActive: 1,
        totalCount: 1,
        pageSize: 1,
        msg: {
          pageIndex: 1,
          pageSize: 8,
          useState: 1,
          lineId: 0,
          lineteamId: 0,
          couponsName: "",
          couponsType: "",
          couponStatus: 1,
          couponEffectStatus: 1,
          couponsUseScope: 0,
          userId: '',
        },
        dataList: [],
        dataLoading: false,
        currentPage: 1,
        Count: 1,
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getList();
      if (this.$route.query.customerId) {
        this.msg.userId = this.$route.query.customerId;
      }
    },
    methods: {
      // 获取数据
      getList() {
        this.dataLoading = 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.dataLoading = false;
          },
          null
        );
      },

      //查询初始化页码
      resetPageIndex() {
        this.msg.pageIndex = 1;
      },
      // 翻页
      handleCurrentChange(val) {
        this.msg.pageIndex = parseInt(val);
        this.getList();
      }
    }
  };

</script>
