<template>
  <div class="usersCoupon">
    <div class="head-title">
      优惠券管理

    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <el-date-picker v-model="dateList" @change="getList" size="small" type="datetimerange" range-separator="至"
                        value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div style="margin-top:20px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first" :dataId="-1"></el-tab-pane>
          <el-tab-pane v-for="(item,index) in StatusList" :dataId="item.Id" :key="index" :label="item.Name"
                       :name="item.Name"></el-tab-pane>
        </el-tabs>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">

        <el-table-column prop="MemberCouponId" label="ID" width="100">
        </el-table-column>
        <el-table-column prop="Name" label="优惠券名称" width="377">
        </el-table-column>
        <el-table-column prop="MinConsumePrice" label="最低消费金额（元）" width="180">
        </el-table-column>
        <el-table-column  label="优惠方式" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.CouponType==1">优惠:{{scope.row.DiscountsPrice}}元</div>
            <div v-if="scope.row.CouponType==2">
              <div>{{scope.row.DiscountsPrice}}折</div>
              <div v-if="scope.row.MaxDiscountsPrice!=0">优惠上限:{{scope.row.MaxDiscountsPrice}}元</div>
              <div v-if="scope.row.MaxDiscountsPrice==0">优惠上限:无上限</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column  label="有效时间" width="350">
          <template slot-scope="scope">
            <div>开始时间：{{scope.row.StartDate}}</div>
            <div>结束时间：{{scope.row.EndDate}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="CreateDate" label="领取时间" width="180">
        </el-table-column>
        <el-table-column  label="领取方式" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.GetType==0">领劵中心领取</div>
            <div v-if="scope.row.GetType==1">分享</div>
            <div v-if="scope.row.GetType==2">购买并付款</div>
            <div v-if="scope.row.GetType==3">新人领取</div>

          </template>
        </el-table-column>
        <el-table-column  label="状态" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.UseState==0">未使用</div>
            <div v-if="scope.row.UseState==1">已使用</div>
            <div v-if="scope.row.UseState==2">已作废</div>

          </template>
        </el-table-column>
        <el-table-column prop="CostFinanceId" label="操作" >
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
                     layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        activeName:'first',
        dateList:'',
        msg: {
          pageIndex: 1,
          pageSize: 15,
          UseState: -1, //0-未使用，1-已使用，2-已过期，-1全部
          UserId: 0, 
          StartDate: '',
          EndDate: '',
        },
        StatusList:[
          // {Name:'全部',Id:-1},
          {Name:'未使用',Id:0},
          {Name:'已使用',Id:1},
          {Name:'已过期',Id:2},
          ],
        total: 0,
        tableData: [], //列表数据

      }
    },
    created() {
     
      if(this.$route.query.UserId){
          this.msg.UserId = this.$route.query.UserId;
      }
       this.getList();
    },
    mounted() {
    },
    methods: {

      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartDate = this.dateList[0];
          this.msg.EndDate = this.dateList[1];
        } else {
          this.msg.StartDate = '';
          this.msg.EndDate = '';
        }
        this.loading = true;
        this.apipost("/api/Coupon/GetCouponPageListByMemberId", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.tableData = res.data.data.pageData;
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      handleClick(val){
        this.msg.UseState = val.$attrs.dataId;
        this.getList()
      },
      delete_b(row){
        let that=this;
        that.Confirm("是否删除?", function () {
          that.apipost(
            "/api/Coupon/DelMemberCoupon",
            {MemberCouponId:row.MemberCouponId},
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
          );
        });
      },


    }
  };

</script>
<style>
  .usersCoupon .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

</style>
