<template>
  <div>
    <Panel title="用户管理">
      <template slot="buttons">
        <el-button title="查询" icon="el-icon-fa-search" class="blue" @click="queryUserData">查询</el-button>
        <el-button title="重置" icon="el-icon-fa-reply-all" class="yellow" @click="pageTable.handleReset()">重置</el-button>
      </template>
      <el-form label-position="top" :model="pageTable.param" ref="queryform">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="用户名称" prop="username">
              <el-input v-model="pageTable.param.username" @keyup.native.enter="queryUserData"/>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="账号状态" prop="userstat">
              <el-select placeholder="状态" v-sys-code="'userstat'" v-model="pageTable.param.userstat" clearable>
                <el-option v-for="item in sysCode.userstat" :key="item.key" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="隶属机构" prop="orgId">
              <Selector v-model="pageTable.param.orgId" :clearable="true" label-key="label" value-key="id" placeholder="隶属组织机构">
                <SelectorTree tree-key="orgTree" searchField="ORG_NAME" rootLabel="组织机构"/>
              </Selector>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Panel>
    <Panel title="用户列表">
      <template slot="buttons">
        <el-button title="批量锁定" icon="el-icon-fa-lock" class="red" :disabled="!multipleSelection.length>0" @click="lockAndOpenUsers(true)">锁定</el-button>
        <el-button title="批量解锁" icon="el-icon-fa-unlock" class="blue" :disabled="!multipleSelection.length>0" @click="lockAndOpenUsers(false)">解锁</el-button>
        <el-button title="批量重置密码" icon="el-icon-fa-key" class="yellow" :disabled="!multipleSelection.length>0" @click="resetUserPw">重置密码</el-button>
        <el-button title="新增" class="green" @click="doAdd()" icon="el-icon-fa-plus">新增</el-button>
      </template>

      <el-table border :data="pageTable.data"
                element-loading-spinner="el-icon-loading"
                v-loading="pageTable.isLoading"
                ref="table"
                element-loading-text="数据加载中"
                height="calc(100vh - 280px)"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" align='center' width="55" fixed='left'/>
        <el-table-column prop="username" label="用户名称" show-overflow-tooltip/>
        <el-table-column prop="userid" label="登陆名称" show-overflow-tooltip/>
        <el-table-column prop="userstat" label="账号状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <SysCode type="userstat" :value="scope.row.userstat"/>
          </template>
        </el-table-column>
        <el-table-column prop="orgname" label="隶属机构" show-overflow-tooltip/>
        <el-table-column prop="usermobl" label="电话号码" show-overflow-tooltip/>
        <el-table-column label="操作" fixed='right' :width="tableAction" align="center">
          <template slot-scope="scope">
            <slot name="table-action-buttons" :data="scope"/>
            <el-button title="编辑" icon="el-icon-fa-edit" class="blue" @click="doEdit(scope.$index, scope.row)">
              {{ tableActionEditLabel }}
            </el-button>
            <el-button title="登陆时间轴" icon="el-icon-location" class="blue" @click="showTimeLine(scope.row)">时间轴</el-button>
          </template>
        </el-table-column>
      </el-table>
      <export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
      <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
    </Panel>

    <el-dialog close-on-press-escape append-to-body v-draggable :visible.sync="editor.show" title="用户管理" width="800px">
      <div class="dialog-button">
        <el-button title="保存" class="blue " icon="el-icon-fa-save" @click="doSubmit()" v-loading="editor.loading" :disabled="editor.stat==='6' ||editor.stat==='9'">保存</el-button>
        <el-button title="重置密码" icon="el-icon-fa-key" class="yellow" @click="resetPwd()" v-loading="editor.loading" :disabled="!editor.uuid||editor.stat!=='5'">重置密码</el-button>
        <!--5生效 6锁定 9注销-->
        <el-button title="注销" icon="el-icon-fa-trash" class="red" @click="doShut()" v-loading="editor.loading" :disabled="!editor.uuid||editor.stat==='9'">注销</el-button>
        <el-button title="锁定" icon="el-icon-fa-lock" class="red" @click="doClose()" v-loading="editor.loading" v-if="editor.uuid && editor.stat==='5'">锁定</el-button>
        <el-button title="解锁" icon="el-icon-fa-unlock" class="blue" @click="doOpen()" v-loading="editor.loading" v-if="editor.uuid && editor.stat==='6'">解锁</el-button>
      </div>
      <UserEditor style="min-height:250px" v-if="editor.show" ref="userEditor" :uuid="editor.uuid" :userType="userType"    @submit="saveUser" v-loading="editor.loading" :editRole="editRole"/>
    </el-dialog>

    <el-dialog close-on-press-escape append-to-body v-draggable :visible.sync="timeLine.visible" title="用户登录时间轴" width="500px">
      <div v-if="timeLine.visible">
        <UserTimeLine @closeDia='timeLine.visible = false' :user-uuid='timeLine.uuid'/>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import UserEditor from "./UserEditor";
import SelectorTree from "@/common/SelectorTree";
import UserAPI from "@/api/base/usrm/UserAPI";
import UserTimeLine from "./UserTimeLine.vue";
import PageTable from "@/libs/PageTable";

export default {
  props: {
    userType: {type: String, default: null},
    tableAction: {type: String, default: '150',},
    tableActionEditLabel: {type: String, default: '编辑',},
    editRole: {type: String, default: "true"},
  },
  name: "UserMgr",
  components: {UserEditor, SelectorTree, UserTimeLine},
  data() {
    return {
      pageTable: new PageTable({
        autoLoad: false,
        doLoad: UserAPI.queryUser,
        param: {},
        log: false
      }),
      timeLine: {
        visible: false,
        uuid: "",
        username: '',
      },
      queryform: {
        usercode: null,
        username: null,
        userstat: null,
        orgId: null,
        startTime: null,
        endTime: null
      },
      table: {
        data: []
      },
      editor: {
        show: false,
        uuid: null,
        visible: false, // 编辑器-显示
        loading: false,
        stat: ""
      },
      multipleSelection: []
    };
  },
  mounted() {
    this.queryUserData();
  },
  methods: {
    //批量重置用户密码
    async resetUserPw() {
      await this.confirm();
      let uuids = [];
      this.multipleSelection.forEach((value, index) => {
        uuids.push(value.uuid);
      });
      if (uuids.length > 0) {
        await UserAPI.resetUserPw({uuids: uuids});
        await this.pageTable.handleLoad();
      }
    },
    //显示登陆时间轴
    showTimeLine(row) {
      this.timeLine.username = row.username;
      this.timeLine.uuid = row.uuid;
      this.timeLine.visible = true;
    },
    // 重置密码
    async resetPwd(data) {
      await this.confirm(null, "是否重置该用户密码");
      this.editor.loading = true;
      this.editor.error = {}; // 还原错误信息(必须先还原)
      await UserAPI.resetPwd(this.$refs.userEditor.data);
      await this.pageTable.handleLoad();
      this.cancelEditorLoading(); // 最终要取消loading
    },
    // 注销
    async doShut(data) {
      await this.confirm(null, "是否注销该用户");
      this.editor.loading = true;
      this.editor.error = {}; // 还原错误信息(必须先还原)
      await UserAPI.shutUser(this.$refs.userEditor.data);
      await this.pageTable.handleLoad(); // 查询数据
      this.cancelEditorLoading(); // 最终要取消loading
    },
    // 解锁
    async doOpen(data) {
      await this.confirm(null, "是否解锁该用户");
      this.editor.loading = true;
      this.editor.error = {}; // 还原错误信息(必须先还原)
      await UserAPI.openUser(this.$refs.userEditor.data);
      await this.pageTable.handleLoad(); // 查询数据
      this.cancelEditorLoading(); // 最终要取消loading
    },
    // 锁定
    async doClose(data) {
      await this.confirm(null, "是否锁定该用户");
      this.editor.loading = true;
      this.editor.error = {}; // 还原错误信息(必须先还原)
      await UserAPI.lockUser(this.$refs.userEditor.data);
      await this.pageTable.handleLoad(); // 查询数据
      this.cancelEditorLoading(); // 最终要取消loading
    },
    // 打开编辑页面
    doEdit(index, rowData) {
      this.editor.show = true;
      this.editor.uuid = rowData.uuid;
      this.editor.stat = rowData.userstat;
    },
    // 打开新建画面
    doAdd() {
      this.editor.show = true;
      this.editor.uuid = null;
      this.editor.stat = "";
    },
    async doSubmit() {
      await this.confirm();
      this.$refs.userEditor.submitForm();
    },
    async saveUser(data) {
      try {
        this.editor.loading = true;
        let resp = await UserAPI.saveUser(data)
        if (resp.newuser === "true") {
          await this.$alert("该用户的默认密码是: " + resp.password, {showConfirmButton: false, type: "info"});
        }
      } finally {
        this.editor.loading = false;
      }
      await this.pageTable.handleLoad(); // 查询数据
      this.cancelEditorLoading(); // 最终要取消loading
    },
    cancelEditorLoading() {
      this.editor.show = false;
      this.editor.loading = false;
    },
    queryUserData() {
      if (this.userType) {
        this.pageTable.param.userType = this.userType;
      }
      this.pageTable.handleLoad();
    },
    resetquery() {
      this.$refs.queryform.resetFields();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //批量解锁或锁定用户
    async lockAndOpenUsers(b) {
      await this.confirm();
      let uuids = [];
      this.multipleSelection.forEach((value, index) => {
        uuids.push(value.uuid);
      });
      if (uuids.length > 0)
        if (b) {
          await UserAPI.lockAndOpenUsers({uuids: uuids, opType: "1"});
          await this.pageTable.handleLoad();
        } else {
          await UserAPI.lockAndOpenUsers({uuids: uuids, opType: "0"});
          await this.pageTable.handleLoad();
        }
    }
  }
};
</script>
