<template>

    <div class="bodyBoxs">
      <div style="margin-bottom: 15px;width: 100%">
        <el-row>
              <el-col :span="8">
                  <el-row>
                      <el-col :span="6">
                        <div style="line-height: 36px;">
                          注册日期:
                        </div>
                    </el-col>
                      <el-col :span="18">
                        <el-date-picker style="width: 100%;" v-model="searchDate"  value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
                      </el-col>
                  </el-row>
              </el-col>
              <el-col :span="8">
                <el-input placeholder="请输入昵称或者手机号" v-model="search" class="input-with-select"> 
                    <el-button style="width: 80px;" slot="append" icon="el-icon-search" @click="getData">搜索</el-button>
                </el-input>
              </el-col>
          </el-row>
      </div>
        <div class="boxs">
          <el-table :data="tableData" v-loading="loading" @sort-change="handleSortChange"  style="width: 100%">
            <el-table-column prop="id" label="编号"  width="80"/>
            <el-table-column  prop="nick" label="昵称" />
            <el-table-column prop="headimg" label="头像">
              <template slot-scope="scope">
                <el-image v-if="scope.row.head"  style="width: 40px;border-radius: 50%;"  :src="scope.row.head"></el-image>
                <span v-else>暂未授权</span>
              </template>
            </el-table-column>
            <el-table-column prop="username" label="账号名称"/>
            <el-table-column sortable="custom"  prop="score" label="剩余钻石"/>
            <el-table-column prop="mobile" label="手机号"/>
            <el-table-column prop="lastLoginTime" label="最后登录时间"/>
            <el-table-column prop="lastLoginIp" label="最后登录IP"/>
            <el-table-column prop="createdAt" label="注册时间"/>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[15, 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{
          searchDate:'',
          crearedAt:'',
          userId:'1',
          selectUserId:'',
          loadingUser:false,
          userData:false,
          tableData : [],
          tableUserData:[],
          loading:false,
          page:1,
          pageSize:15,
          total:0,
          currentPage4:1,
          type:'2',
          search:''
        }
    },
    created(){
      this.getData()
    },
    methods:{
      handleSortChange({ prop, order }) {
        this.page = 1;
        if(order == 'descending'){
          this.getData('desc')
        }else{
          this.getData('asc')
        }
      },
      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(order = ''){
        this.loading = true;
        this.$api.getUserList({
          page: this.page,
          size: this.pageSize,
          search: this.search,
          searchDate: this.searchDate,
          order:order
        }).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: 15px;
    }
    .boxs{
      padding: 15px;
        width: 100%;
        background: #fff;
        border-radius: 15px;
    }
.input-with-select{
  width: 100%;
  margin-left: 15px;
}
</style>
