<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable filled v-model="msg.TaskName" label="任务名称" />
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable filled v-model="msg.CustomerName" label="客户名称" />
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable filled v-model="msg.ExchangeCode" label="兑换码" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" option-value="Id" option-label="Name" clearable filled
            v-model="msg.ExchangeStatus" :options="StatusList" emit-value map-options label="状态" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-right-column-table sticky-column-table" separator="none" :data="dataList" :columns="columns"
        row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">核销奖品</div>
          <q-space />
          <div class="page-option">
          </div>
        </template>
        <template v-slot:body-cell-TaskKudo="props">
          <q-td>
            <template v-if="props.row.TaskKudoImgList&&props.row.TaskKudoImgList.length>0">
              <img :src="props.row.TaskKudoImgList[0]" style="width:40px;height:40px;" />
              <br />
            </template>
            {{props.row.TaskKudo}}
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td>
 
            <q-btn v-if="props.row.ExchangeStatus==1" flat size="xs" icon="iconfont icon-view" style="font-weight:400" label="兑换"
              @click="exchangeKudo(props.row)" />
            <q-btn flat size="xs" icon="iconfont icon-view" style="font-weight:400" label="详情"
              @click="goToDetail(props.row)" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    queryCustomerFinishtaskPage,
    saveExchangeKudo
  } from '../../api/sale/peemanagement';

  export default {
    meta: {
      title: "核销奖品"
    },
    components: {

    },
    data() {
      return {
        columns: [{
            name: 'CustomerName',
            label: '客户名称',
            align: 'left',
            field: 'CustomerName'
          },
          {
            name: 'TaskName',
            label: '任务名称',
            align: 'left',
            field: 'TaskName'
          },
          {
            name: 'TaskKudo',
            label: '获得奖品',
            align: 'left',
            field: 'TaskKudo'
          },
          {
            name: 'ExchangeCode',
            label: '兑换码',
            field: 'ExchangeCode',
            align: 'left',
          },
          {
            name: 'ReceiveTimeStr',
            label: '获得时间',
            align: "left",
            field: 'ReceiveTimeStr',
          },
          {
            name: 'ExchangeStatusStr',
            label: '兑换状态',
            field: 'ExchangeStatusStr',
            align: 'left',
          },
          {
            name: 'ExchangeTimeStr',
            label: '兑换时间',
            field: 'ExchangeTimeStr',
            align: 'left',
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Id'
          }
        ],
        dataList: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 12,
          rowsPerPage: 12,
          TaskName: "", //任务
          CustomerName: "", //客户名称
          ExchangeStatus: "", //领取状态
          ExchangeCode: "", //兑换码
        },
        StatusList: [{
            Id: 1,
            Name: "已领取"
          },
          {
            Id: 2,
            Name: "已兑换"
          },
          {
            Id: 3,
            Name: "已过期"
          }
        ],
        pageCount: 0,
      }
    },
    created() {},
    mounted() {
      this.getList()
    },
    methods: {
      //兑换奖品
      exchangeKudo(item) {
        var postMsg = {
          Id:item.Id,
          CustomerId: item.CustomerId,
          ExchangeCode: item.ExchangeCode
        };
        var that = this;
        this.$confirm('是否要兑换此奖品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          saveExchangeKudo(postMsg).then(res => {
            if (res.Code == 1) {
              that.$message.success("兑换成功!")
              that.getList();
            } else {
              that.$message.error("兑换失败!");
            }
          })
        })
      },
      goToDetail(item) {
        this.OpenNewUrl('/sale/finishTaskDetails', {
          TaskId: item.TaskId,
          DetailsId: item.DetailsId,
          CustomerId: item.CustomerId,
          FinishId:item.Id
        })
      },
      resetSearch() {
        this.loading = true;
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.loading = true;
        this.getList();
      },
      //获取数据
      getList() {
        this.loading = true;
        queryCustomerFinishtaskPage(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
          }
        }).catch(() => {
          this.loading = false
        })
      }
    },
  }
</script>

<style lang="sass">
  @import url('~assets/css/table.sass')
</style>
<style lang="scss">
  .otherTask {
    display: inline-block;
    width: 22px;
    height: 22px;
    text-align: center;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .saleTaskTable {
    width: 400px;
    text-align: center;
  }

  .saleTaskTable tr td {
    height: 40px;
  }

  .saleTaskTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

  .border-bottom {
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }
</style>