<template>
  <div class="pomentWrap">
    <el-row :gutter="5" type="flex" justify="space-around">
      <el-col :xs="12" :sm="12" :md="6" :lg="4" :xl="4">
        <div class="topBar">
          <el-tree
            :data="treeData"
            :props="treeProps"
            ref="Tree"
            node-key="id"
            :highlight-current="true"
            :default-expanded-keys="[0]"
            :default-checked-keys="[]"
            @node-click="nodeClick"
          >
            <template slot-scope="{node, data}">
              <span>
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="'#' + iconArrClass[data.level]" />
                </svg>
                {{node.label}}
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :md="18" :lg="20" :xl="20">
        <el-row class="topBar">
          <el-col>
            <el-form :inline="true" :model="searchData">
              <el-form-item label>
                <el-input v-model="searchData.userName" placeholder="请输用户名"></el-input>
              </el-form-item>
              <el-form-item label>
                <el-input v-model="searchData.account" placeholder="请输账户名"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchFun()">
                  <i class="el-icon-search"></i> 搜索
                </el-button>
                <el-button type="primary" @click="resetFun()">
                  <i class="el-icon-refresh"></i> 重置
                </el-button>
              </el-form-item>
              <el-form-item class="fr">
                <el-button plain type="primary" @click="addFun()">
                  <i class="el-icon-plus"></i> 新增
                </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row v-if="treecheckedObj.fullName != undefined && treecheckedObj.id != 0">
          <h4 align="center" class="TaletName">{{treecheckedObj.fullName}}</h4>
        </el-row>
        <el-table :data="tableData.pageData" border style="width:100%;" v-loading="loading">
          <el-table-column width="50" type="index" label="序号"></el-table-column>
          <el-table-column prop="userName" label="用户名"></el-table-column>
          <el-table-column prop="account" label="登录账号"></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <font v-if="scope.row.sex == 1">男</font>
              <font v-if="scope.row.sex == 2">女</font>
            </template>
          </el-table-column>
          <el-table-column prop="mobliePhone" label="手机"></el-table-column>
          <el-table-column prop="accountStatus" label="账号状态" align="center">
            <template slot-scope="scope">
              <span
                class="dbtn sd qiCr"
                @click="setLock(scope.row,'unlock')"
                v-if="scope.row.accountStatus == 0"
              >
                <i class="el-icon-unlock"></i>正常
              </span>
              <span
                class="dbtn sd"
                @click="setLock(scope.row,'lock')"
                v-if="scope.row.accountStatus == 2"
              >
                <i class="el-icon-lock"></i>已锁定
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="270" align="center">
            <template slot-scope="scope">
              <span class="dbtn" @click="editFun(scope.row)">
                <i class="el-icon-edit"></i>修改
              </span>
              <span class="dbtn dg" @click="delFun(scope.row)">
                <i class="el-icon-delete"></i>删除
              </span>
              <span class="dbtn wr" @click="setRole(scope.row)">
                <i class="el-icon-setting"></i>角色
              </span>
              <span class="dbtn su" @click="setPw(scope.row)">
                <i class="el-icon-key"></i>密码
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="PAGE.page"
          :page-size="PAGE.size"
        ></el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="jsdialogVisible"
      title="用户分配角色"
      :show-close="false"
      :close-on-click-modal="false"
      v-if="jsdialogVisible"
    >
    <el-row>
      <el-radio-group v-model="userRole.roleId">
        <el-radio
          v-for="(item, index) in roleData"
          :key="index"
          :label="item.id"
          border
        >{{ item.roleName }}</el-radio>
      </el-radio-group>
    </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round size="small" @click="deluserRole" class="fl">删除用户角色</el-button>
        <el-button type="primary" size="small" @click="roleConfirm()">确定</el-button>
        <el-button @click="jsdialogVisible = false" size="small">取消</el-button>
      </span>
    </el-dialog>
    <UserMgEdit
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      :editForm="formData"
      :checkedObj="treecheckedObj"
      :dialoTitle="dialogTit"
      @dialogFun="closeDialog"
      @refreshTableData="getTableData('refresh')"
      :key="zjKey"
    ></UserMgEdit>
  </div>
</template>
<style lang="scss" scped>
@import '@/utils/default.scss';
</style>
<script lang="ts">
import { Component, Vue, Provide, Watch } from "vue-property-decorator";
import UserMgEdit from "./UserMgEdit.vue";
@Component({
  components: { UserMgEdit }
})
export default class UserMg extends Vue {
  @Provide() tableData: Object = { pageData: [], total: 0 };
  @Provide() PAGE: any = { page: 1, size: 10 };
  @Provide() searchData: any = { account: "", userName: "" };
  @Provide() loading: Boolean = false;
  //编辑组件
  @Provide() dialogVisible: Boolean = false;
  @Provide() dialogTit: String = "新增";
  @Provide() formData: Object = {};
  @Provide() zjKey: any = 0;
  @Provide() jsdialogVisible: Boolean = false;
  @Provide() roleData: any = [];
  @Provide() userRole: any = {
    roleId: ""
  };
  /*
  树 icon:icon-bumenguanli1 icon-bumenqun icon-bumen1 icon-bumen3
  */

  @Provide() iconArrClass: any = [
    "icon-bumenguanli1",
    "icon-bumenqun",
    "icon-bumen1",
    "icon-bumen3",
    "icon-bumen2"
  ];
  @Provide() treeData: any = [
    {
      id: 0,
      fullName: "组织机构",
      level: 0,
      icon: "icon-yh",
      parentIds: "",
      childList: []
    }
  ];
  @Provide() treeProps: Object = {
    children: "childList",
    label: "fullName"
  };
  @Provide() treecheckedObj: any = {};

  getTableData() {
    let that = this,
      param = Object.assign(
        {
          deptId:
            that.treecheckedObj.id == 0 ? "" : that.treecheckedObj.id || ""
        },
        that.PAGE,
        that.searchData
      );
    that.loading = true;
    (this as any).$axios.post(`/user/getUserList`, param).then((res: any) => {
      that.loading = false;
      if( res ) that.tableData = res;
    });
  }
  getRoleData() {
    let that = this;
    (this as any).$axios.get(`/role/getAllRoles`).then((res: any) => {
      that.roleData = res;
    });
  }
  getTreeData() {
    let that = this;
    (this as any).$axios.get(`/dept/getDeptInfoTree`).then((res: any) => {
      console.log(res)
      that.treeData[0].childList = res;
    });
  }
  getuserRoleData(uid: string) {
    let that = this;
    (that as any).$axios
      .get(`/user/getUserRolesByUid/${uid}`)
      .then((res: any) => {
        if ( res ) that.userRole.roleId = res.roleId;
        else that.userRole.roleId = "";
        that.jsdialogVisible = true;
      });
  }
  setRole(row: any) {
    let that = this;
    that.userRole.userId = row.uid;
    that.getuserRoleData(row.uid);
  }
  deluserRole(){
    let that = this;
    (that as any).$axios
      .get(`/user/deleteUserRolesByRid/${that.userRole.roleId}`)
      .then((res: any) => {
        (that as any).$message.success("操作成功！");
        that.userRole.userId =  '';
        that.jsdialogVisible = false
      });
  }
  roleConfirm() {
    let that = this;
    (that as any).$axios
      .post(`/user/addOrEditUserRolesInfo`, that.userRole)
      .then((res: any) => {
        if( res ){
          (that as any).$message.success("操作成功！");
          that.jsdialogVisible = false;
        }
      });
  }
  searchFun() {
    this.PAGE = { page: 1, size: 10 };
    this.getTableData();
  }
  resetFun() {
    this.PAGE = { page: 1, size: 10 };
    this.searchData = { account: "", userName: "" };
    this.getTableData();
  }
  addFun() {
    this.dialogTit = "新增";
    this.zjKey++;
    if (this.treecheckedObj.id == 0 || this.treecheckedObj.id == undefined) {
      (this as any).$message({
        message: "请选择所属部门",
        type: "warning"
      });
    } else {
      this.dialogVisible = true;
    }
  }
  editFun(row: any) {
    this.dialogTit = "编辑";
    this.formData = Object.assign({}, row);
    this.zjKey++;
    this.dialogVisible = true;
  }
  delFun(row: any) {
    let that = this;
    (that as any).METHOD.deleteFun(
      that,
      `/dept/delDeptInfoById/${row.id}`,
      function() {
        that.getTableData();
      }
    );
  }
  handleSizeChange(val: any) {
    this.PAGE.size = val;
    this.getTableData();
  }
  handleCurrentChange(val: any) {
    this.PAGE.page = val;
    this.getTableData();
  }
  closeDialog() {
    this.dialogVisible = false;
    this.formData = {};
  }
  nodeClick(data: any, node: any, target: any) {
    let that = this;
    that.treecheckedObj = node.data;
    that.getTableData();
  }
  setLock(row: any, word: any) {
    let that = this,
      url =
        word == "lock"
          ? "/user/unLockSysUserByUid/"
          : "/user/lockSysUserByUid/";
    (that as any)
      .$confirm(
        `确定${word == "lock" ? "解锁" : "锁定"}账号 ${row.account} 吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
      .then(() => {
        (that as any).$axios.get(url + row.uid).then((res: any) => {
          (that as any).$message.success("操作成功");
          that.getTableData()
        });
      });
  }
  setPw(row: any) {
    let that = this;
    (that as any)
      .$confirm(`确定重置账号 ${row.account} 的密码为66668888吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        (that as any).$axios
          .get(`/user/resetUserPwd/${row.uid}`)
          .then((res: any) => {
            (that as any).$message.success("操作成功");
          });
      });
  }
  created() {
    let that = this;
    that.getTreeData();
    that.getTableData();
    that.getRoleData();
  }
}
</script>
