<template>
  <div class="bodyBoxs">
    <div class="boxs">
      <div style="margin-bottom: 15px;width: 700px;float: left">
        <el-input v-model="search" placeholder="请输入奖品名称" class="input-with-select">
          <!--          <el-button slot="prepend" type="danger" style="width: 60px;" icon="el-icon-delete" @click="deleteAward"/>-->
          <!--          <el-select slot="prepend" v-model="isAward"-->
          <!--                     style="width: 130px;border-left: 1px rgb(220,223,230) solid "-->
          <!--                     placeholder="请选择"-->
          <!--          >-->
          <!--            <el-option label="全部" value="2"/>-->
          <!--            <el-option label="已中奖" value="0"/>-->
          <!--            <el-option label="未中奖" value="1"/>-->
          <!--          </el-select>-->
          <el-button slot="append" style="width: 70px;" icon="el-icon-search" @click="getData(1)" />
          <el-button slot="append" style="border-left: rgb(220,223,230) solid 1px" icon="el-icon-download"
            @click="userExport"></el-button>
        </el-input>
      </div>
      <el-table v-loading="loading" ref="multipleTable" :data="tableData" style="width: 100%">
        <el-table-column label="奖品编号" prop="id">
        </el-table-column>
        <el-table-column label="微信昵称" prop="user.nick">
        </el-table-column>
        <el-table-column prop="head" label="微信头像">
          <template slot-scope="scope">
            <el-image v-if="scope.row.user.headimg" style="width: 50px;" :src="scope.row.user.headimg" />
            <span v-else>暂未授权</span>
          </template>
        </el-table-column>
        <el-table-column prop="awardName" label="奖品名称" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sendTime" label="中奖时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="ip" label="中奖IP" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="中奖地址" show-overflow-tooltip></el-table-column>
      </el-table>
      <el-pagination :current-page="currentPage4" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'

import { getTaskList } from '@/api/api'


export default {
  data() {
    return {
      isExchange: '2',
      isAward: '2',
      tableData: [],
      loading: false,
      awardId: '',
      pages: 1,
      isAddr: '2',
      pageSize: 10,
      total: 0,
      currentPage4: 1,
      search: ''
    }
  },
  async created() {
    this.getData()

    this.$api.getTaskList({
      // page: this.page,
      // size: this.pageSize,
      // search: this.search,
    }).then((res) => {
      // this.loading = false;
    console.log('任务列表返回值：', res);

      if (res.code == 0) {
        // this.tableData = res.data.data;
        // this.total = res.data.total;
        // this.currentPage4 = res.data.current_page;
      } else {
        this.$message({
          message: res.message,
          type: 'success'
        });
      }
    }).catch((res) => {
      this.loading = false;
    });

  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      console.log('点击了')
      this.pages = val
      this.getData()
    },
    getData(type = 0) {
      this.loading = true
      if (type === 1) {
        this.pages = 1;
      }
      this.loading = true
      this.$api.getAwardList({
        page: this.pages,
        size: this.pageSize,
        search: this.search,
        isExchange: this.isExchange,
      }).then((res) => {
        this.loading = false
        this.tableData = res.data.data
        this.total = res.data.total
        this.currentPage4 = res.data.current_page
      }).catch((res) => {
        this.loading = false
      })
    },
    userExport() {
      console.log(getToken())
      window.location.href = 'https://jingji-h5.ecps.com.cn/index.php?s=admin/getAwardList&isExport=1&token=' + getToken()
    }
  }
}
</script>
<style scoped>
.bodyBoxs {
  padding: 40px;
}

.boxs {
  width: 100%;
  background: #fff;
  border-radius: 15px;
  padding: 10px;
  min-height: 700px;
}
</style>
