<template>
  <div class="user" v-loading="loading">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px" inline>
      <el-form-item label="ID">
        <el-input v-model="searchFrom.userId"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="searchFrom.nickName"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="searchFrom.mobile"></el-input>
      </el-form-item>
      <el-form-item label="等级">
        <el-input v-model="searchFrom.level"></el-input>
      </el-form-item>
      <!--<el-form-item label="标签">
        <el-cascader
          style="width: 320px" placeholder="选择标签" clearable @change="tagChange"
          :options="options" :props="{ multiple: true, checkStrictly: true }"></el-cascader>
      </el-form-item>-->
      <el-form-item>
        <div class="flexRow">
          <el-button type="primary" plain @click="getUser">搜索</el-button>
          <!--<el-button type="success" plain @click="syncUser">同步最新数据</el-button>-->
        </div>
      </el-form-item>
    </el-form>
    <el-table
      :data="userList"
      style="width: 100%">
      <el-table-column className="f-c" label="用户">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar">{{scope.row.nickname}}<br>(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column prop="created_at" label="注册时间" width="105px" sortable></el-table-column>
      <el-table-column prop="last_login_at" label="最后登录" width="105px" sortable></el-table-column>
      <!--<el-table-column prop="last_login_at" label="最后登录时间" width="120px" sortable></el-table-column>-->
      <el-table-column prop="baby_name" label="宝宝名称"></el-table-column>
      <el-table-column prop="birthday" label="宝宝生日" width="105px"></el-table-column>
      <el-table-column prop="sex" label="宝宝性别" width="80px" :formatter="sexFormatter"></el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="goToDetail(scope.row.user_id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <detail-dialog :dialogObj="dialogDetailObj" @changeShow="changeShow"/>
    <teacher-dialog :dialogObj="dialogObj" @reflash="getUser"></teacher-dialog>
    <el-dialog  width="90%" top="5vh"  :visible.sync="dialogDetail.show">
      <div v-if="dialogDetail.show">
        <user-detail :parentDetail="dialogDetail"></user-detail>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getUserListApi,getSyncUserApi} from "../../service/api";
  import page from '../framework/page'
  import detailDialog from './detail'
  import teacherDialog from './dialog'
  import userDetail from '../userDetail/index'
  export default {
    name: "index",
    data(){
      return {
        searchFrom:{
          nickName:'',
          mobile:'',
          level:'',
          userId: ''
        },
        dialogDetail:{
          show:false,
          id:''
        },
        userList:[],
        total:0,
        nowPage:1,
        limit: 10,
        showDetail:false,
        showId:'',
        dialogObj:{
          show:false,
          title:'绑定老师',
          id:0,
          teacher_id: 0
        },
        dialogDetailObj: {
          show: false,
          id: ''
        },
        loading: false
      }
    },
    components:{
      page,
      detailDialog,
      userDetail,
      teacherDialog
    },
    mounted(){
      this.getUser()
    },
    methods:{
      tagChange() {

      },
      sexFormatter(item){
        if(item.sex==0){
          return '保密'
        }
        if(item.sex==1){
          return '男'
        }
        if(item.sex==2){
          return '女'
        }
      },
      onPageChange(val){
        this.nowPage = val
        this.getUser()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getUser()
      },
      getUser(){
        let json = {
            page: this.nowPage,
            limit: this.limit
        }
        if (this.searchFrom.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
            json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        if (this.searchFrom.level) {
          json.level = this.searchFrom.level
        }
        getUserListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total
        })
      },
      detail(data){
        this.dialogDetailObj = {
          show: true,
          id: data.user_id
        }
      },
      changeShow(data){
        this.dialogDetailObj.show=data
      },
      bindTeacher(data){
        this.dialogObj = {
          show:true,
          title:'绑定老师',
          id:data.user_id,
          teacher_id: data.teacher_id
        }
      },
      goToDetail(id){
        this.dialogDetail.id = id;
        this.dialogDetail.show = true
        // this.$router.push('/userDetail/'+ id);
      },
      syncUser(){
        this.loading = true
        getSyncUserApi().then((data)=>{
          this.loading = false
          this.$message({
            showClose: true,
            message: `已更新${data}条用户数据`,
            type: 'success'
          })
        }).catch(()=>{
          this.loading = false
        })
      }
    }
  }
</script>

<style lang="less">
  /*@import "../../util/public";*/
  .user{
    /*height: 100%;*/
    overflow: auto;
    padding: 20px 0;
    .btn-content{
      text-align: center;
    }
  }
  .flexRow {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }

</style>
