
<template>
  <div class="dataList app-container">

     <div class="search">
        <div>
            <el-input
            v-model="query.userName"
            size="small"
            clearable
            placeholder="请输入用户名称"
            class="item-width-200 "
            ></el-input>
             <el-input
            v-model="query.phoneNum"
            size="small"
            clearable
            placeholder="请输入手机号码"
            class="item-width-200 ml10"
            ></el-input>
            <el-select
          v-model="query.prizeType"
          size="small"
          class="item-width-200 ml10"
          placeholder="请选择奖品类型"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
       
        <el-button
        class="ml10"
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleSearch"
        >
            搜索
        </el-button>
        </div>
    </div>


  
    <!-- <div class="export-box">
         <el-button
            type="primary"
            size="small"
            :disabled="total == 0"
            @click="handleExport"
            :loading="downloadLoading"
        >
            导出数据
        </el-button>
    </div> -->
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="用户名称"
        prop="nickname"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="手机号码"
        prop="phoneNum"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="奖品信息"
        prop="orderNo"
        show-overflow-tooltip
      >
      <template slot-scope="scope">
        <img :src="scope.row.prizeIcon" class="img" alt=""> <span>{{scope.row.prizeName}}</span>
        </template>
      </el-table-column>
       <el-table-column
        align="center"
        label="抽奖时间"
        prop="createTime"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        label="领取方式"
        prop="orderNo"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
       <span>{{ sendTypeObj[scope.row.sendType]}}</span>
        </template>
      </el-table-column>
       <el-table-column
        align="center"
        label="状态"
        prop="orderNo"
        show-overflow-tooltip
      >
      
       <template slot-scope="scope">
       <span>{{scope.row.status == 1?'未发放':'已发放'}}</span>
        </template>
      </el-table-column>
       <el-table-column
        align="center"
        label="备注"
        prop="notes"
        show-overflow-tooltip
      >
       <template slot-scope="scope">
         <div style="text-align:left" v-html="filterNote(scope.row.notes)"></div>
        </template>
      </el-table-column>
       <el-table-column prop="address" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="scope.row.status == 1" @click="handleAudit(scope.row.rafflePrizeLogId)">发放</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
  <script>
  import {debounce} from '@/utils/index'
  import {verification} from '@/api/activity'
  import {prizeList,sendPrize} from '@/api/luckyDraw.js'


  import {timeFormat} from '@/utils/index'
export default {
  name: "dataList",
  data() {
    return {
      sendTypeObj:{
        1:'线下自提',
        2:'邮寄发货',
        3:'线上发货',
      },
      options:[
        {
          label:'加油券',
          value:1
        },
        {
          label:'视频会员',
          value:2
        },
        {
          label:'普通商品',
          value:3
        },
        {
          label:'文字描述',
          value:4
        },
      ],
      tableData: [],
      loading: false,
      downloadLoading: false,
      list:[],
      query: {
        "raffleId":0,
        "userName": '',
        "prizeType": '',
        "phoneNum": '',
        "currentPage": 1,
        "pageSize": 10,
      },
      title: "",
      total: 0,
    };
  },

  methods: {
    filterNote(value) {
      let obj = JSON.parse(value)
      let keyObj = {
        address:'地址',
        phone:'手机号',
        name:'姓名'
      }
      let str = ''
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
            str+= keyObj[key]+'：'+obj[key]+'<br>'
          
        }
      }
      return str || '无'
    },
    handleSearch(){
      this.query.currentPage = 1
      this.prizeList();
    },

    handleExport() {
      this.downloadLoading = true
      let query = JSON.parse(JSON.stringify(this.query))
      query.currentPage = 1
      query.pageSize = this.total
       prizeList(query).then(res=>{
        this.loading = false
        if(res.state == 'Success'){
          this.list = res.content.records
          this.Export()
        }
      })
      
    },
    Export(){
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = []
        for (const key in this.list[0]) {
          if (Object.hasOwnProperty.call(this.list[0], key)) {
            tHeader.push(key)
          }
        }
        const multiHeader = [[`活动时间：${this.info.activityStartTime} 至 ${this.info.activityEndTime}`,`报名时间：${this.info.signupStartTime} 至 ${this.info.signupEndTime}`,`报名费用：${this.info.price}元`]]
        tHeader.map((item,index)=>{
          if(!multiHeader[0][index]){
            multiHeader[0][index] = ''
          }
        })
        const data = this.formatJson(tHeader, this.list)
        // console.log(data);
        // let data = [[1,2,3,4,5]]
        excel.export_json_to_excel({
          multiHeader,
          header: tHeader,
          data,
          filename: this.info.activityName,
          // autoWidth: false,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    timeFormat(val){
      return timeFormat(val)
    },
    handleAudit(rafflePrizeLogId){
         this.$confirm(`此操作将发放该奖励, 是否继续?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
          sendPrize({rafflePrizeLogId}).then(res=>{
            if(res.state == 'Success'){
              this.handleCurrentChange(1)
                 this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
              });
            }
          })
        })
    },
    handleSizeChange(val) {
      this.query.currentPage = 1;
      this.query.pageSize = val;
      this.prizeList()
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.prizeList()
    },

     prizeList(){
      this.loading = true
      prizeList(this.query).then(res=>{
        this.loading = false
        if(res.state == 'Success'){
          this.tableData = res.content.records
          this.total = res.content.total
        }
      })
    }
  },
  created() {
    this.query.raffleId = this.$route.query.id
   this.prizeList()
  },
};
</script>
  
<style lang="scss" >
.dataList {
    .img{
      width: 40px;
      height: 40px;
    }

    .export-box{
        display: flex;
        justify-content: flex-end;
    }
}

</style>
  