<template>

    <div class="bodyBoxs">
      <div style="margin-bottom: 15px;width: 440px">
<!--        <el-select style="width: 120px;" @cancel="selectType" v-model="type"  placeholder="请选择">-->
<!--          <el-option label="时间范围" value=1></el-option>-->
<!--          <el-option label="微信昵称" value=2></el-option>-->
<!--        </el-select>-->
        <el-input placeholder="请输入姓名或者手机号" v-model="search" class="input-with-select">
          <el-button style="width: 70px;" slot="append" icon="el-icon-search" @click="getData"></el-button>
<!--          <el-button style="border-left: rgb(220,223,230) solid 1px" slot="append" @click="userExport">导出</el-button>-->
        </el-input>
      </div>
        <div class="boxs">
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            :row-class-name="tableRowClassName"
            stripe
            style="width: 100%">
            <el-table-column
              prop="uid"
              label="编号"
              width="80">
            </el-table-column>
            <el-table-column
              prop="nick"
              label="昵称"
              width="80">
            </el-table-column>
            <el-table-column
              prop="headimg"
              label="头像">
              <template slot-scope="scope">
                <el-image v-if="scope.row.headimg"  style="width: 40px;border-radius: 50%;"  :src="scope.row.headimg"></el-image>
                <span v-else>暂未授权</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="lotteryNum"
              label="抽奖次数"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            ></el-table-column>
            <el-table-column
              prop="mobile"
              label="手机号"
            >
            </el-table-column>
            <el-table-column
              prop="ip"
              label="ip"
            >
            </el-table-column>
            <el-table-column
              prop="createdAt"
              label="首次进入时间"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
          </el-pagination>
        </div>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
          value2: '',
          crearedAt:'',
          userId:'1',
          selectUserId:'',
          loadingUser:false,
          userData:false,
          tableData : [],
          tableUserData:[],
          loading:false,
          page:1,
          pageSize:10,
          total:0,
          currentPage4:1,
          type:'2',
          search:''
        }
    },
    created(){
      this.getData()
    },
    methods:{
      selectType(res){
        if (res == '1'){

        }else {

        }
      },

      userExport(){
        window.location.href = 'https://jsbanquet.swellfun.com//index.php?s=admin/getUserData';
      },
      userDataClose() {
        this.userData = false;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData()
      },
      handleCurrentChange(val) {
        console.log('点击了');
        this.page = val;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getData(){
        this.loading = true;
        this.$api.getUserList({
          page: this.page,
          size: this.pageSize,
          search: this.search,
        }).then((res) => {
          this.loading = false;
          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;
        });
      },
      showUserData(row){
        this.userData = true
          this.userId = row.id;
          this.selectUserId = row.id;
        this.tableUserData = row.queryDatas
      }
    }
}
</script>
<style scoped>
    .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }

</style>
