<template>
  <div class="user-wrapper">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="政府用户" name="政府用户">
        <div class="tools-wrapper">
          <el-button type="primary" @click="addUserDialogShow">新增用户</el-button>
          <el-button type="warning" :disabled="multipleSelection.length > 1 || multipleSelection.length === 0" @click="editUserDialogShow">编辑用户</el-button>
          <el-button type="danger" :disabled="multipleSelection.length === 0" @click="deleteUsersByIds">删除用户</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="curUsers"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="用户名称"
            prop="username"
          />
          <el-table-column
            label="所属角色"
          >
            <template slot-scope="scope">
              {{ scope.row.roles.map(item => item.name).join(' ') }}
            </template>
          </el-table-column>
          <el-table-column
            label="用户姓名"
            prop="nickName"
          />
          <el-table-column
            label="所属部门"
            prop="dept.name"
          />
          <el-table-column
            label="所属分组"
          >
            <template slot-scope="scope">
              {{ scope.row.groupId ? curGroups.filter(item => item.groupId === scope.row.groupId)[0].groupName: '' }}
            </template>
          </el-table-column>
          <el-table-column
            label="v网号"
            prop="vNetNum"
          />
          <el-table-column
            label="手机号"
            prop="phone"
          />
          <el-table-column
            label="备注"
            prop="remarks"
          />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="运营商用户" name="运营商用户">
        <div class="tools-wrapper">
          <el-button type="primary" @click="addUserDialogShow">新增用户</el-button>
          <el-button type="warning" :disabled="multipleSelection.length > 1 || multipleSelection.length === 0" @click="editUserDialogShow">编辑用户</el-button>
          <el-button type="danger" :disabled="multipleSelection.length === 0" @click="deleteUsersByIds">删除用户</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="curUsers"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="用户名称"
            prop="username"
          />
          <el-table-column
            label="所属角色"
          >
            <template slot-scope="scope">
              {{ scope.row.roles.map(item => item.name).join(' ') }}
            </template>
          </el-table-column>
          <el-table-column
            label="用户姓名"
            prop="nickName"
          />
          <el-table-column
            label="所属部门"
            prop="dept.name"
          />
          <el-table-column
            label="所属分组"
          >
            <template slot-scope="scope">
              {{ scope.row.groupId ? curGroups.filter(item => item.groupId === scope.row.groupId)[0].groupName: '' }}
            </template>
          </el-table-column>
          <el-table-column
            label="v网号"
            prop="vNetNum"
          />
          <el-table-column
            label="手机号"
            prop="phone"
          />
          <el-table-column
            label="备注"
            prop="remarks"
          />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="企业用户" name="企业用户">
        <div class="tools-wrapper">
          <el-button type="primary" @click="addUserDialogShow">新增用户</el-button>
          <el-button type="warning" :disabled="multipleSelection.length > 1 || multipleSelection.length === 0" @click="editUserDialogShow">编辑用户</el-button>
          <el-button type="danger" :disabled="multipleSelection.length === 0" @click="deleteUsersByIds">删除用户</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="curUsers"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="用户名称"
            prop="username"
          />
          <el-table-column
            label="所属角色"
          >
            <template slot-scope="scope">
              {{ scope.row.roles.map(item => item.name).join(' ') }}
            </template>
          </el-table-column>
          <el-table-column
            label="用户姓名"
            prop="nickName"
          />
          <el-table-column
            label="所属部门"
            prop="dept.name"
          />
          <el-table-column
            label="所属分组"
          >
            <template slot-scope="scope">
              {{ scope.row.groupId ? curGroups.filter(item => item.groupId === scope.row.groupId)[0].groupName: '' }}
            </template>
          </el-table-column>
          <el-table-column
            label="v网号"
            prop="vNetNum"
          />
          <el-table-column
            label="手机号"
            prop="phone"
          />
          <el-table-column
            label="备注"
            prop="remarks"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="新增用户"
      :visible.sync="addUserDialog"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="formInfo"
      >
        <el-form-item
          label="用户名"
        >
          <el-input
            v-model="formInfo.username"
          />
        </el-form-item>
        <el-form-item
          label="密码"
        >
          <el-input
            v-model="formInfo.password"
            type="password"
          />
        </el-form-item>
        <el-form-item
          label="姓名"
        >
          <el-input
            v-model="formInfo.nickName"
          />
        </el-form-item>
        <el-form-item
          label="所属角色"
        >
          <el-select
            v-model="formInfo.roles"
          >
            <el-option
              v-for="(item, index) in curRoles"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属部门"
        >
          <treeselect
            v-model="formInfo.dept"
            :options="curDepts"
            :normalizer="normalizer"
            placeholder="请选择部门"
          />
        </el-form-item>
        <el-form-item
          label="分组名"
        >
          <el-select v-model="formInfo.groupId">
            <el-option
              v-for="item in curGroups"
              :key="item.groupName"
              :label="item.groupName"
              :value="item.groupId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="v网号"
        >
          <el-input v-model="formInfo.vNetNum" />
        </el-form-item>
        <el-form-item
          label="电话"
        >
          <el-input
            v-model="formInfo.phone"
          />
        </el-form-item>
        <el-form-item
          label="备注"
        >
          <el-input
            v-model="formInfo.remarks"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserDialog = false">取消</el-button>
        <el-button type="primary" @click="addUserDialogConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="编辑用户"
      :visible.sync="editUserDialog"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="formInfo"
      >
        <el-form-item
          label="用户名"
        >
          <el-input
            v-model="formInfo.username"
          />
        </el-form-item>
        <el-form-item
          label="密码"
        >
          <el-input
            v-model="formInfo.password"
            type="password"
          />
        </el-form-item>
        <el-form-item
          label="姓名"
        >
          <el-input
            v-model="formInfo.nickName"
          />
        </el-form-item>
        <el-form-item
          label="所属角色"
        >
          <el-select
            v-model="formInfo.roles"
          >
            <el-option
              v-for="(item, index) in curRoles"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属部门"
        >
          <treeselect
            v-model="formInfo.dept"
            :options="curDepts"
            :normalizer="normalizer"
            placeholder="请选择部门"
          />
        </el-form-item>
        <el-form-item
          label="分组名"
        >
          <el-select v-model="formInfo.groupId">
            <el-option
              v-for="item in curGroups"
              :key="item.groupName"
              :label="item.groupName"
              :value="item.groupId"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="v网号"
        >
          <el-input v-model="formInfo.vNetNum" />
        </el-form-item>
        <el-form-item
          label="电话"
        >
          <el-input
            v-model="formInfo.phone"
          />
        </el-form-item>
        <el-form-item
          label="备注"
        >
          <el-input
            v-model="formInfo.remarks"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editUserDialog = false">取消</el-button>
        <el-button type="primary" @click="editUserDialogConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入vue-treeselect
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// remarks 备注的英文
// 获取所有的用户信息
import { getAllUsersInfo, deleteUsersInfo, getAllGroup, addUserInfo, editUserInfo } from '@/api/industry.js'
// 获取所有的部门
import { getDepts } from '@/api/system/dept'
// 获取所有角色
import { getAll } from '@/api/system/role'
export default {
  components: { Treeselect },
  data() {
    return {
      // 当前所有的用户
      curUsers: [],
      // 当前所有的部门
      curDepts: [],
      // 当前所有的角色
      curRoles: [],
      // 当前所有的分组
      curGroups: [],
      // 当前选中的行
      multipleSelection: [],
      // 添加用户对话框
      addUserDialog: false,
      // 编辑用户对话框
      editUserDialog: false,
      // form
      formInfo: {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 人员姓名
        nickName: '',
        // 所属角色
        roles: '',
        // 部门
        dept: null,
        // 所属分组
        groupId: null,
        // v网号
        vNetNum: '',
        // 手机号
        phone: '',
        // 备注
        remarks: ''
      },
      // options
      options: [],
      // 当前激活的标签页
      activeName: '政府用户'
      //
    }
  },
  computed: {
    // getGroupName(groupId) {
    //   console.log(this.curGroups, '这是干嘛了')
    //   console.log(groupId, '我去你妈的')
    //   return this.curGroups.filter(item => item.groupId === Number(groupId))[0].groupName
    // }
  },
  mounted() {
    // 在这里获取所有用户
    this.initUserInfo()
    // 在这里面获取所有的部门
    getDepts().then(res => {
      this.curDepts = [...res.content]
      for (let i = 0; i < this.curDepts.length; i++) {
        this.curDepts[i].label = this.curDepts[i].name
        this.recursiveAllDept(this.curDepts[i])
      }
    })
    // 在这里面获取所有的角色
    getAll().then(res => {
      console.log(res, '获取所有的角色')
      this.curRoles = [...res]
    })
    // 获取当前所有分组
    getAllGroup().then(res => {
      console.log(res, 'helloworldhelloworldhelloworld')
      this.curGroups = [...res.content]
    })
  },
  methods: {
    // 初始化所有用户的函数
    async initUserInfo() {
      await getAllUsersInfo().then(res => {
        this.curUsers = [...res.content]
      })
    },
    // 处理选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 递归获取所有部门
    recursiveAllDept(item) {
      if (item.hasChildren === true) {
        getDepts({ pid: item.id }).then(res => {
          item.children = [...res.content]
          for (let i = 0; i < item.children.length; i++) {
            item.children[i].label = item.children[i].name
            this.recursiveAllDept(item.children[i])
          }
        })
      }
    },
    // 新增用户显示
    addUserDialogShow() {
      this.addUserDialog = true
    },
    // 点击确定提交
    addUserDialogConfirm() {
      this.addUserDialog = false
      // 调用user接口上传用户信息
      // this.addUserDialogConfirm
      // 获取所有的部门名
      const replacedept = {
        dept: this.getDeptInfoById(this.formInfo.dept)
      }
      // 获取roles
      this.curRoles.filter(item => item.id === this.formInfo.roles)
      const relaceroles = {
        roles: this.curRoles.filter(item => item.id === this.formInfo.roles)
      }
      const replaceother = {
        avatarName: 'png',
        avatarPath: '389.png',
        createBy: null,
        createTime: '2018-08-23 09:11:56',
        email: '' + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + '@qq.com',
        enabled: true,
        gender: '男',
        jobs: [{ id: 11, name: '全栈开发' }],
        pwdResetTime: '2020-05-03 16:38:31',
        updateBy: 'admin',
        updateTime: '2021-07-03 17:38:25'
      }
      addUserInfo({ ...this.formInfo, ...replacedept, ...relaceroles, ...replaceother }).then(res => {
        this.$message({
          type: 'success',
          message: '添加用户成功'
        })
        // 刷新当前用户
        this.initUserInfo()
      }, () => {
        this.$message.error('添加用户失败')
      })
    },
    // 点击编辑提交
    editUserDialogConfirm() {
      this.editUserDialog = false
      // 点击user接口编辑用户信息提交
      const replacedept = {
        dept: this.getDeptInfoById(this.formInfo.dept)
      }
      const relaceroles = {
        roles: this.curRoles.filter(item => item.id === this.formInfo.roles)
      }
      const replaceother = {
        avatarName: 'png',
        avatarPath: '389.png',
        createBy: null,
        createTime: '2018-08-23 09:11:56',
        email: '' + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + '@qq.com',
        enabled: true,
        gender: '男',
        jobs: [{ id: 11, name: '全栈开发' }],
        pwdResetTime: '2020-05-03 16:38:31',
        updateBy: 'admin',
        updateTime: '2021-07-03 17:38:25'
      }
      editUserInfo({ ...this.formInfo, ...replacedept, ...relaceroles, ...replaceother }).then(res => {
        this.$message({
          type: 'success',
          message: '编辑用户成功'
        })
        // 刷新当前用户
        this.initUserInfo()
      }, () => {
        this.$message.error('编辑用户失败')
      })
    },
    // 点击删除用户
    deleteUsersByIds() {
      this.$confirm('此操作不可逆，确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口删除用户信息
        deleteUsersInfo(this.multipleSelection.map(item => item.id)).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.initUserInfo()
        }, () => {
          this.$message.error('删除失败')
        })
      })
    },
    // treeselect优化
    normalizer(node) {
      if (node.children == null || node.children === 'null') {
        delete node.children
      }
    },
    // 根据部门id获取部门
    getDeptInfoById(deptId) {
      let dept = {}
      // 遍历
      function traverse(item) {
        if (item.id === deptId) {
          dept = item
        }
        // 遍历
        if (item.children) {
          for (let i = 0; i < item.children.length; i++) {
            traverse(item.children[i])
          }
        }
      }
      for (let i = 0; i < this.curDepts.length; i++) {
        traverse(this.curDepts[i])
      }
      return dept
    },
    // 编辑用户信息对话框显示
    editUserDialogShow() {
      this.editUserDialog = true
      //       // 部门
      // dept: null,
      // // 所属分组
      // groupId: null,
      // 在这里初始化formInfo
      console.log(this.multipleSelection[0], '我真的要开始咯')
      this.formInfo = {
        ...this.multipleSelection[0],
        dept: this.multipleSelection[0].dept ? this.multipleSelection[0].dept.id : null,
        roles: this.multipleSelection[0].roles ? this.multipleSelection[0].roles[0].id : null
      }
    },
    // 选中标签页
    handleTabClick() {}
  }
}
</script>

<style>

</style>
