<template>
  <div class="customerTransfer flexOne">
    <div class="query-box" style="border: none;">
      <ul style="overflow: initial!important">
        <li>
          <span>
            <em>活动</em>
          </span>
          <el-select filterable  class='multiple_input'  v-model='msg.CouponId' :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value="0"></el-option>
                <el-option v-for="(item,index) in Actitylist" :key="index" :label="item.Remark" :value="item.Id"></el-option>
            </el-select>
        </li>
        <li>
          <span>
            <em>{{$t('salesModule.keyWords')}}</em>
          </span>
          <el-input v-model="msg.CustomerName" :placeholder="$t('pub.pleaseImport')"></el-input>
        </li>
        <li>
          <span>
            <em>是否支付</em>
          </span>
          <el-select filterable  class='multiple_input'  v-model='msg.IsPayCounpon' :placeholder="$t('pub.pleaseSel')">
            <el-option :label="$t('pub.unlimitedSel')" value="0"></el-option>
            <el-option label="未支付" :value="1"></el-option>
            <el-option label="已支付" :value="2"></el-option>
               
            </el-select>
        </li>
        <li>
          <span>
            <em>是否购买</em>
          </span>
          <el-select filterable  class='multiple_input'  v-model='msg.IsBuyCounpon' :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value="0"></el-option>
                <el-option label="未购买" :value="1"></el-option>
                <el-option label="已购买" :value="2"></el-option>
            </el-select>
        </li>
        <li>
          <input
            type="button"
            class="hollowFixedBtn"
            :value="$t('pub.searchBtn')"
            @click="resetPageIndex(),getList()"
          >
        </li>
      </ul>
    </div>
    <div class="clearfix"></div>
    <div class="_customerTransferTable">
      <table
        class="customerTransferTable mt20"
        border="0"
        cellspacing="0"
        cellpadding="0"
        v-loading="loading"
      >
        <tr>
          <th width="7%">活动ID</th>
          <th width="7%">{{$t('hotel.suplier_contact')}}</th>
          <th width="10%">{{$t('restaurant.res_ContactNumber')}}</th>
          <th width="20%">{{$t('admin.admin_address')}}</th>
          <th width="10%">购买状态</th>
          <th width="10%">支付状态</th>
        </tr>
        <tr>
          <td colspan="11" align="center" v-show="list.length==0">{{$t('system.content_noData')}}</td>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
         
          <td>{{item.CouponId}}</td>
          <td>{{item.Contact}}</td>
          <td>{{item.ContactNumber}}</td>
          <td>{{item.Address}}</td>
          <td>
              <span v-if="item.IsBuyCounpon==0">未购买</span>
              <span v-if="item.IsBuyCounpon>0">已购买</span>
          </td>
          <td>
              <span v-if="item.IsPayCounpon==2">已支付</span>
              <span v-else>未支付</span>

          </td>
          
        </tr>
      </table>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        layout="total,prev, pager, next, jumper"
        :page-size="msg.pageSize"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        currentPage:1,
        total:0,
        list:[],
        loading:false,
        msg: {
            pageIndex:1,
            pageSize:12,
            IsPayCounpon:'0',
            CouponId:'0',
            IsBuyCounpon:'0',
            CustomerName:'',
        },
 
        defaultImg:'this.src="' + require("../../assets/img/litheader.png") + '"',
        Actitylist:[],
    };
  },
  methods: {
    GetActity(){
        this.apipost(
        "sellorder_get_AllCouponList",
        {},
        res => {
            this.loading = false;
          if (res.data.resultCode == 1) {
            this.Actitylist = res.data.data;
            if(this.Actitylist.length>0){
              this.msg.CouponId=this.Actitylist[0].Id;
            }
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    getList() {
      this.loading = true;
      this.apipost(
        "app_customer_GetMyCustomerCounponOrderList",
        this.msg,
        res => {
            this.loading = false;
          if (res.data.resultCode == 1) {
            this.list = res.data.data.pageData;
            this.total=res.data.data.count;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    resetPageIndex() {
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
  },
  mounted() {
    this.GetActity();
    let userInfo = this.getLocalStorage();
    this.getList();
  }
};
</script>

<style>
.customerTransferTable {
  width: 100%;
  font-size: 14px;
  color: #333;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  border-bottom: none;
  border-right: none;
}
	.customerTransferTable ._class_b{
	color: #257BF1 !important
}
.customerTransferTable tr th {
  background: #dcdcdc;
  height: 30px;
  font-size: 12px;
  text-align: left;
  text-indent: 25px;
}
.customerTransferTable tr {
  text-align: left;
}
.customerTransferTable tr:nth-child(2n) {
  background: #f2f2f2;
}
.customerTransferTable tr:nth-child(2n + 1) {
  background: #ffffff;
}
.customerTransferTable tr:hover {
  background: #d0d2d9;
}
.customerTransferTable tr td {
  height: 40px;
  padding-left: 25px;
  border-bottom: 1px solid #dcdcdc;
  font-size: 14px;
  color: #333;
  border-right: 1px solid #dcdcdc;
}
.pd20 {
  padding: 12px 20px !important;
}
.el-popper[x-placement^="bottom"] {
  margin-top: 0px !important;
}
.el-popper[x-placement^="top"] {
  margin-bottom: 0px !important;
}
.customerTransferTable .el-button {
  position: relative;
  top: -5px;
}
.customerTransferTable .el-button + .el-button {
  margin: 0;
}
.customerTransfer ._mc_edit {
  overflow: auto;
  display: none;
  position: absolute;
  z-index: 50;
  bottom: 0;
  left: 0;
  border-top: 3px solid #38425d;
  background-color: #f9f9f9;
  padding: 10px;
  width: 100%;
  min-width: 1146px;
}
.customerTransfer ._mc_edit ._tit {
  padding-left: 10px;
  border-left: 3px solid #e95252;
  font-size: 16px;
  font-family: "PingFangSc-Fine";
  color: #000000;
}
.customerTransfer ._mc_edit ._info_box ul._form li {
  float: left;
}
.customerTransfer .edHeightOne {
  display: block !important;
  height: 450px;
}
.customerTransfer ._edHeight {
  height: 340px;
}
.customerTransfer ._remark textarea {
  resize: none;
  width: 646px;
  height: 100px;
}
.customerTransfer .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.customerTransfer .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.customerTransfer .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.customerTransfer .avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>