<template>
  <div class="center">
    <el-card style="margin-bottom: 20px">
      <div style="display: flex; align-items: center">
        <div style="width: 5%;margin-right: 10px">卡券核销:</div>
        <div style="width: 80%;">
          <!--            17615834396-->
          <el-input v-model="queryParams.mobile" placeholder="请输入会员手机号码"></el-input>
        </div>
        <div style="width: 10%;margin-left: 20px">
          <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
        </div>

      </div>
      <div class="wrap-box">
        <div class="coupon-box" v-for="(item,index) in couponList" :key="index">
          <div class="box-top">
            <span>{{item.exchangeName}}</span>
          </div>
          <div class="box-title">{{item.name}}</div>
          <div class="box-hui"><span style="width: 35%">券码:</span>     <span>{{item.ticketCode}}</span>  </div>
          <div class="box-hui"><span style="width: 35%">有效期:</span>   <span>{{item.outTime}}</span>  </div>
          <div class="box-hui"><span style="width: 35%">获得方式:</span> <span>{{item.exchangeFrom}}</span> </div>
          <div class="anniu" @click="getcardExchangeRecord(item.id)" >
            <span>立即核销</span>
          </div>
        </div>
      </div>
      <el-empty :image-size="300" v-if="total == 0"></el-empty>


    </el-card>
  </div>
</template>

<script>
import { listRecord,cardExchangeRecord } from "@/api/online";
export default {
  name: 'index',
  data(){
    return{
      queryParams : {
        pageNum: 1,
        pageSize: 999,
        cardExchangeId: null,
        mtStaffId: null,
        realName: null,
        staffMobile: null,
        mtUserId: null,
        name: null,
        mobile: null,
        photo: null,
        exchangeName: null,
        ticketCode: null,
        exchangeFrom: null,
        status: 0,
        outTime: null,
        cancelTime: null,
        startTime: null,
        endTime: null,
      },
      couponList:[],
      recordList:[],
      total:0,
    }
  },
  methods:{
    getList() {
      if(!this.queryParams.mobile ){
        this.$message.error("输入框不能为空")
        return
      }
      this.loading = true;
      listRecord(this.queryParams).then(response => {
        this.couponList = response.data.records;
        this.total = response.data.total
        if( response.data.total == 0){

        }else{

        }
        this.loading = false;
      });
    },
    getcardExchangeRecord(id){
      this.$confirm('是否确认核销?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id:id,
          status:1
        }
        cardExchangeRecord(data).then(res=>{
          if(res.code == 200){
            this.$message.success("核销成功")
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消核销'
        });
      });







    }
  }

}
</script>

<style scoped>
.center{
  width: 95%;
  height: 100vh;
  margin: 10px;

}
.wrap-box{
  width: 100%;
  flex-wrap: wrap;
  margin-top: 20px;
  display: flex;
}
.coupon-box{
  width: 200px;
  height: 250px;
  background: #ffffff;
  border: 1px solid #eef1f6;
  border-radius: 2px;
  margin: 10px;
}
.box-top{
  width: 100%;
  height: 100px;
  background: #00afff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}
.box-title{
  font-size: 18px;
  font-weight: bold;
  box-sizing: border-box;
  padding: 5px 15px;
}
.box-hui{
  box-sizing: border-box;
  padding: 0px 15px;
  color: #999999;
  display: flex;
  font-size: 12px;
}
.anniu{
  box-sizing: border-box;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ecf5ff;
  color: #409EFF;
  width: 100px;
  border-radius: 6px;
  margin: 5px auto;
  cursor: pointer;
  margin-top: 15px;
}


</style>
