<template>
  <div class="page">
    <block-header title="搜索"/>
    <div class="page-search">
      <el-form :inline="true" size="small" label-suffix=":" :model="queryModel">
        <el-form-item prop="search" label="登陆名">
          <el-input placeholder="请输入用户查询条件(登陆名)" icon="search" v-model="search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="querySearchUser" type="primary">查询</el-button>
          <el-button @click="addUser" icon="el-icon-plus" type="primary">新增用户</el-button>
        </el-form-item>
      </el-form>
    </div>


    <!--用户信息列表-->
    <block-header title="用户列表"/>
    <div class="b-table">
      <el-table :data="records" size="small" border stripe style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="loginName" sortable label="登录用户"></el-table-column>
        <el-table-column prop="userCell" sortable label="手机号码"></el-table-column>
        <el-table-column prop="userName" sortable label="用户姓名"></el-table-column>
        <el-table-column prop="lastLogin" :formatter="transDateFormat" sortable label="最近登陆时间"></el-table-column>
        <el-table-column align="center" prop="status" label="状态" :formatter="statusFormat"></el-table-column>
        <el-table-column prop="memo" sortable label="备注信息"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small"
                       @click="resetPassword(scope.row)">重置密码
            </el-button>
            <el-button type="text" size="small"
                       @click="updateUsers(scope.row)">修改用户
            </el-button>
            <el-button type="text" size="small" @click="userSetRole(scope.row)">设置用户角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="b-pagination">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-size="page.size"
          layout="prev, pager, next"
          :total="page.total">
      </el-pagination>
    </div>


    <!--窗口组件-->
    <template>
      <!--新增窗口-->
      <addUserManagementDialog
          v-if="ui.addUserManagementDialog.visible"
          :dialogVisible.sync="ui.addUserManagementDialog.visible">
      </addUserManagementDialog>
    </template>


    <!--窗口组件-->
    <template>
      <!--修改窗口-->
      <updateUserManagementDialog
          v-if="ui.updateUserManagementDialog.visible"
          :loginName="ui.updateUserManagementDialog.loginName"
          :userName="ui.updateUserManagementDialog.userName"
          :status="ui.updateUserManagementDialog.status"
          :userCell="ui.updateUserManagementDialog.userCell"
          :dialogVisible.sync="ui.updateUserManagementDialog.visible">
      </updateUserManagementDialog>
    </template>

    <!--窗口组件-->
    <template>
      <!--设置用户角色窗口-->
      <userSetRoleManagementDialog
          v-if="ui.userSetRoleManagementDialog.visible"
          :user="ui.userSetRoleManagementDialog.user"
          :dialogVisible.sync="ui.userSetRoleManagementDialog.visible">
      </userSetRoleManagementDialog>
    </template>

  </div>
</template>


<script>
import * as moment from "moment";
import addUserManagementDialog from "../user/AddUserManagementDialog";
import updateUserManagementDialog from "../user/UpdateUserManagementDialog";
import userSetRoleManagementDialog from "../user/UserSetRoleManagementDialog";

export default {
  name: "UserManagement",
  components: {
    addUserManagementDialog,
    updateUserManagementDialog,
    userSetRoleManagementDialog,
  },
  data() {
    return {
      queryModel: {
        type: Object
      },
      search: "",
      records: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      record: "",
      ui: {
        addUserManagementDialog: {
          visible: false
        },
        updateUserManagementDialog: {
          visible: false,
          loginName: '',
          userName: '',
          status: '',
          userCell: '',

        },
        userSetRoleManagementDialog: {
          visible: false,
          user: {}
        },
      },
    }
  },


  mounted: function () {
    this.loadSearchData();
  },

  methods: {
    addUser() {
      this.ui.addUserManagementDialog = {
        visible: true,
      };
    },

    querySearchUser() {
      this.loadSearchData();
    },

    /** 加载搜索数据 */
    loadSearchData() {
      var url = '';
      if (this.search === '') {
        url = "/user/search/" + this.page.current
      } else {
        url = "/user/search/" + this.search + "/" + this.page.current
      }
      this.$$get(url)
          .then(res => {
            if (res.data.code !== '200')
              throw res.data.message;
            // 修改分页返回参数规则
            this.page = this.clonePage(res.data.result);
            this.records = res.data.result.data;
          })
          .catch(err => this.$$msg.err(err))
    },
    /*重置密码*/
    resetPassword(record) {
      this.$$post('/user/resetPassword', {
        loginName: record.loginName,
        bindStatus: 'ENABLED'
      })
          .then(res => {
            if (res.data.code < 1) {
              this.$message.error(res.data.msg);
              return
            }
            this.$message({message: '重置成功', type: 'success'});
            this.loadSearchData();
          })
          .catch(err => {
            this.showErrorAlert(err)
          })
    },

    /*修改用户*/
    updateUsers(record) {
      this.ui.updateUserManagementDialog = {
        visible: true,
        loginName: record.loginName,
        userName: record.userName,
        status: record.status,
        userCell: record.userCell,
      };
    },

    /*设置用户角色*/
    userSetRole(record) {
      this.$$get(`/user/get/` + record.loginName)
          .then(res => {
            if (res.data.code !== '200')
              throw res.data.msg;
            this.ui.userSetRoleManagementDialog = {
              visible: true,
              user: res.data.result
            };
          })
          .catch(err => {

          })
    },
    /** 处理分页操作*/
    handleCurrentChange() {
      this.loadSearchData();
    },
  }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

.top {
  width 30%
}


</style>