<template>
  <div class="user">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="昵称">
            <el-input v-model="searchFrom.nickName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="电话">
            <el-input v-model="searchFrom.mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="等级">
            <el-input v-model="searchFrom.level"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" plain>搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column
        prop="user_id"
        label="账号ID">
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="用户名">
      </el-table-column>
      <el-table-column
        prop="avatar"
        label="头像">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar">
        </template>
      </el-table-column>
      <el-table-column
        prop="invite_code"
        label="邀请码">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="level"
        label="等级">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="last_login_at"
        label="最后登录时间">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="detail(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" v-model="nowPage"/>
    <detail-dialog :showDetail = "showDetail" :showId="showId" />
  </div>
</template>

<script>
  import {getUserListApi} from "../../service/api";
  import page from '../framework/page'
  import detailDialog from './detail'
  export default {
    name: "index",
    data(){
      return {
        searchFrom:{
          nickName:'',
          mobile:'',
          level:''
        },
        userList:[],
        total:0,
        nowPage:0,
        showDetail:false,
        showId:''
      }
    },
    components:{
      page,
      detailDialog
    },
    mounted(){
      this.getUser()
    },
    methods:{
      getUser(){
        getUserListApi(this.searchFrom).then(res=>{
          this.userList = res.list;
          this.total = res.total
        })
      },
      detail(data){
        this.showId = data.user_id;
        this.showDetail = true
      },
      changeShow(data){
        this.showDetail=data
      }

    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .avatar {
    width: 50px;
  }
  .user{
    height: 100%;
    overflow: auto;
    padding: 20px;
    .btn-content{
      text-align: center;
    }
  }
</style>