<template>
  <el-dialog :visible.sync="show.show" width="700px" center title="用户列表">
    <el-form label-width="40px" inline>
          <el-form-item label="ID">
            <el-input v-model="form.userId"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="float: right" type="primary" plain @click="getUserList">搜索</el-button>
          </el-form-item>
    </el-form>
    <el-table
      :data="userList"
      ref="multipleTable"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column
        className="f-c"
        label="用户">
        <template slot-scope="scope">
          <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号">
      </el-table-column>
    </el-table>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <span slot="footer" class="dialog-footer">
        <el-button @click="show.show = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
  import page from '../framework/page'
  import {getUserListApi} from "../../service/api";
  export default {
    name: "userList",
    props:['show'],
    components:{
      page
    },
    data(){
      return {
        userList:[],
        form:{
          userId:'',
          nickName:'',
          mobile:'',
        },
        nowPage:1,
        limit:5,
        total:0,
        multipleSelection:null
      }
    },
    methods:{
      handleCurrentChange(val) {
        if(val){
          this.multipleSelection = val.user_id
        }
      },
      onAdd(){
        if(this.multipleSelection){
          this.$emit('addUser',this.multipleSelection)
        }else{
          this.$message('请点击选择用户')
        }
      },
      onPageChange(val){
        this.nowPage = val;
        this.getUserList()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getUserList()
      },
      getUserList(){
        let json = {
          page: this.nowPage,
          limit:  this.limit,
        };
        if (this.form.userId) {
          json.user_id = this.form.userId
        }
        if (this.form.nickName) {
          json.nickname = this.form.nickName
        }
        if (this.form.mobile) {
          json.mobile = this.form.mobile
        }
        getUserListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total;
        })
      },
      initPage(){
        this.multipleSelection = null;
        this.form={
            userId:'',
            nickName:'',
            mobile:'',
        };
        this.getUserList()
      }
    },
    watch:{
      'show.show'(value){
        if(value){
          this.initPage()
        }
      }
    }
  }
</script>

<style scoped>

</style>
