<template>
  <div>
    <div class="tab-header">
      <el-form ref="form" :inline="true" :model="search" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="用户姓名">
              <el-input v-model="search.xm" clearable></el-input>
            </el-form-item>
            <el-form-item label="部门名称">
              <el-input v-model="search.deptmentName" clearable></el-input>
            </el-form-item>
            <el-button @click="getOrgUserList()">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div class="table-describe clearfix">
      <h4 style="">本单位用户列表</h4>
      <pagination class="pagesize" layout="sizes" :total="page.total" :page.sync="page.current" :limit.sync="page.size"
                  @pagination="pagination"/>
    </div>
    <el-table :data="userTable" border style="width: 100%;">
      <el-table-column label="序号" width="50px" type="index" align="center">
      </el-table-column>
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scope">
          <el-button @click="setRole(scope.row)" type="primary" size="mini">
            设置角色
          </el-button>
          <el-button @click="setOrg(scope.row)" type="primary" size="mini">
            设置部门
          </el-button>
          <el-button @click="initPwd(scope.row)" type="danger" size="mini">
            初始化密码
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名" align="center">
        <template slot-scope="scope">
          <span class="tablerow-click" @click="userinfo(scope.row)">{{scope.row.userName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" align="center">
      </el-table-column>
      <el-table-column prop="idNo" label="身份证号码" align="center">
      </el-table-column>
      <el-table-column prop="name" label="真实姓名" width="120px" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码" align="center" width="140px">
      </el-table-column>
      <el-table-column prop="deptmentName" label="所属部门" align="center">

      </el-table-column>
    </el-table>
    <pagination :total="page.total" :page.sync="page.current" :limit.sync="page.size" @pagination="pagination"/>
    <!-- 角色设置 -->
    <el-dialog title="设置角色" :visible.sync="roleDialog" width="30%">
      <el-form :model="roleForm" :rules="rules" ref="roleForm">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleSid">
          <el-select v-model="roleForm.roleSid" placeholder="请选择">
            <el-option v-for="item in roleList"
                       :key="item.sid"
                       :label="item.roleName"
                       :value="item.sid"
            ></el-option>
          </el-select>
          <el-button type="primary" size='mini' @click="toNav('RoleAdminister')" style="margin-left: 10px;" circle
                     icon="el-icon-plus"></el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveRole('roleForm')">保 存</el-button>
        <el-button @click="roleDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 部门设置 -->
    <el-dialog title="部门设置" :visible.sync="bm_Dialog" width="30%">
      <el-form :model="bm_Form" :rules="rules" ref="bm_Form">
        <el-form-item label="部门名称" :label-width="formLabelWidth" prop="departmentSid">
          <!-- <el-select v-model="bm_Form.departmentSid" placeholder="请选择">
             <el-option v-for="item in bm_List"
               :key="item.departmentSid"
               :label="item.departmentName"
               :value="item.departmentSid"
             ></el-option>
           </el-select> -->
          <el-cascader
            v-model="bm_Form.departmentSid"
            :options="treedata"
            :props="props"></el-cascader>
          <el-button type="primary" size='mini' @click="toNav('deptManage')" style="margin-left: 10px;" circle
                     icon="el-icon-plus"></el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveOrg('bm_Form')">保 存</el-button>
        <el-button @click="bm_Dialog = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {orgUserList} from '@/api/system/userAdminister/index.js'
  import {orgrolesList, saveOrgRole, getOrgList, saveDepartment} from '@/api/system/userAdminister/index.js'
  import {initPwd} from '@/api/system/user/Auser.js'
  import {getOrgTree} from '@/api/system/departments/departments.js'

  export default {
    data() {
      return {
        activeName: 'first',
        search: {
          userName: '',
          xm: '',
          orgSid: this.$store.getters.userInfo.orgSid
        },
        props: {
          value: "sid",
          label: "name",
          children: "orgDepartmentVoList"
        },
        treedata: null,
        page: {
          total: 0, // 默认数据总数
          current: 1, // 默认开始页面
          size: 10, // 每页的数据条数
        },
        userTable: [],
        clientTable: [],
        // 设置角色
        formLabelWidth: '100',
        roleDialog: false,
        roleList: [],
        roleForm: {
          orgSid: this.$store.getters.userInfo.orgSid,
          roleSid: "",
          userSid: ""
        },
        // 部门
        bm_Dialog: false,
        bm_Form: {departmentSid: ''},
        bm_List: [],
        rules: {
          roleSid: [
            {required: true, message: '请选择角色名称', trigger: 'change'}
          ],
          departmentSid: [
            {required: true, message: '请选择部门名称', trigger: 'change'}
          ],
        }
      };
    },
    mounted() {
      this.getOrgUserList()
      orgrolesList({orgSid: this.$store.getters.userInfo.orgSid, roleName: ''}).then(res => {
        this.roleList = res.data
      })
      this.getOrgTree()
      getOrgList(this.$store.getters.userInfo.orgSid).then(res => {
        this.bm_List = res.data
      })
    },
    methods: {
      // 列表 + 初始化
      getOrgUserList() {
        let params = this.page
        params.params = this.search
        orgUserList(this.page).then(res => {
          this.page.total = res.data.total
          this.userTable = res.data.records
        })
      },
      // 分页
      pagination(val) {
        this.page.current = val.pageNum
        this.page.size = val.pageSize
        this.getOrgUserList()
      },
      getOrgTree() { // 获取部门树形列表
        function treeArr(data) {
          if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
              if (data[i].orgDepartmentVoList.length > 0) {
                treeArr(data[i].orgDepartmentVoList)
              } else {
                delete data[i].orgDepartmentVoList
              }
            }
          }
        }

        getOrgTree({organizationSid: this.$store.getters.userInfo.orgSid}).then(res => {
          let tree = res.data[0].orgDepartmentVoList
          treeArr(tree)
          this.treedata = tree
        })
      },
      //设置角色   设置 用户ID
      setRole(row) {
        this.roleDialog = true
        this.roleForm.userSid = row.sid
      },
      //设置角色  提交
      saveRole(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            saveOrgRole(this.roleForm).then(res => {
              if (res.code == "200") {
                this.roleDialog = false
                this.getOrgUserList()
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //设置部门  获取 用户ID
      setOrg(row) {
        this.bm_Dialog = true
        this.bm_Form.departmentSid = ''
        this.$set(this.bm_Form, 'staffSid', row.staffSid)
      },
      //设置部门  提交
      saveOrg(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = { // 请求的参数
              departmentSid: this.bm_Form.departmentSid[this.bm_Form.departmentSid.length - 1],
              staffSid: this.bm_Form.staffSid,
            }
            saveDepartment(params).then(res => {
              if (res.code == "200") {
                this.getOrgUserList()
                this.bm_Dialog = false
                this.$message({
                  message: res.msg,
                  type: 'success'
                })
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      initPwd(row) {
        this.$confirm('此操作将初始化该用户密码, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          initPwd({sid: row.sid}).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            });
          })
        })
      },
      toNav(src) {
        this.$router.push("/" + src);
      }
    }
  };
</script>

<style scoped="scoped">
  .el-select > .el-input {
    display: block;
    width: 300px;
  }
</style>
