<template>
  <!-- 员工管理 -->
  <div>
    <actionBar menuTitle="员工管理" :operateList="operateList" :formList="formList" :ruleForm="searchRuleForm"
      @openModel="openModel" @searchProtocol="searchProtocol"></actionBar>
    <tables :key="Math.random()" :suspension="true" :tableList="tableList" :tableData="tableData"
      @buttonData="buttonData"></tables>
    <!-- 分页 -->
    <div class="paging_bottom" v-if="Total">
      <pagination :total="Total" :currentPage="Pagination.PageIndex" @changeSize="changeSize"
        @changeCurrent="changeCurrent">
      </pagination>
    </div>
    <el-dialog :title="staffTitle" :visible.sync="staffDialogVisible" width="60%" :close-on-click-modal="false"
      @close="closeDialog">
      <form-employee ref="outlet" :staffDialogVisible="staffDialogVisible" :ruleForm="ruleForm" :menuData="menuData"
        :operationType="operationType" :forbid="forbid"></form-employee>
      <span slot="footer" class="dialog-footer" v-if="operationType == 'add' || operationType == 'edit'">
        <el-button plain @click="staffDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="fillingLoading" @click="postgres">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getUser,
    getUserDetails,
    addUser,
    putUser,
    putResetUser,
    delUser
  } from '@/api/user'
  import {
    getRole
  } from '@/api/power'
  import actionBar from '@/components/actionBar'
  import tables from '@/components/tables'
  import pagination from '@/components/pagination'
  import formEmployee from '@/components/formEmployee'
  import {
    employee
  } from "./shopTable.js";
  export default {
    components: {
      actionBar,
      tables,
      pagination,
      formEmployee
    },
    data() {
      return {
        staffTitle: '添加',
        staffDialogVisible: false,
        Pagination: {
          PageIndex: 1,
          PageSize: 10,
        },
        formList: [{
          type: 'input',
          label: '用户编码',
          field: 'uuid',
          placeholder: '用户编码',
        }, {
          type: 'input',
          label: '登录账号',
          field: 'username',
          placeholder: '姓名',
        }, {
          type: 'input',
          label: '姓名',
          field: 'name',
          placeholder: '姓名',
        }],
        searchRuleForm: {
          uuid: '',
          username: '',
          name: '',
        },
        operateList: [{
          type: 'add',
          title: '添加',
          icon: 'el-icon-plus',
        }],
        tableList: employee(),
        tableData: [],
        Total: 0,
        operationType: '',
        userinfo: {},
        ruleForm: {
          username: '',
          password: '',
          roleId: null,
          provUser: {
            name: '',
            idCard: '',
            no: '',
            phone: '',
            userType: null,
            isorders: 0,
            hireStatus: '',
            hireTime: '',
            education: '',
            jobCategory: '',
            description: '',
          },
          provTruck: {
            certificateNo: '',
            type: 1,
            issueAuthority: '',
            issueTime: '',
            firstIssueTime: '',
            expireTime: '',
            remarks: '',
          }
        },
        menuData: [],
        fillingLoading: false,
        searchValue: {},
        forbid: false,
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      // 搜索
      searchProtocol(value) {
        this.searchValue = value
        this.getList()
      },
      // 获取用户列表
      getList() {
        var params = {
          page: this.Pagination.PageIndex,
          pageSize: this.Pagination.PageSize,
          ...this.searchValue
        }
        getUser(params).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.list
            this.Total = res.data.count
          }
        })
      },
      // 获取所有权限角色
      getRoleList() {
        getRole().then(res => {
          if (res.code == 200) {
            this.menuData = res.data.list
          }
        })
      },
      // 添加用户
      postgres() {
        let flag = this.$refs['outlet'].validateForm();
        if (flag) {
          const arrList = JSON.parse(JSON.stringify(this.ruleForm))
          if (arrList.provUser.userType == 3) {
            arrList.provStoreUserBindCertificate = arrList.provTruck
            delete arrList.provTruck
          } else if (arrList.provUser.userType == 4) {
            arrList.provTruckUserBindCertificate = arrList.provTruck
            delete arrList.provTruck
          } else if (arrList.provUser.userType == 5) {
            delete arrList.provTruck
          }
          if (this.operationType == 'add') {
            this.addUsers(arrList)
          } else if (this.operationType == 'edit') {
            arrList.id = this.userinfo.id
            this.modifyUser(arrList)
          }
          // console.log(arrList, 26)
        }
      },
      // 添加用户
      addUsers(params) {
        this.fillingLoading = true
        addUser(params).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList()
            // 清空表单内容
            this.$refs.outlet.clearForm();
            this.staffDialogVisible = false
          }
          this.fillingLoading = false
        }).catch(() => {
          this.fillingLoading = false
        })
      },
      // 修改用户信息
      modifyUser(params) {
        this.fillingLoading = true
        putUser(params).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getList()
            // 清空表单内容
            this.$refs.outlet.clearForm();
            this.staffDialogVisible = false
          }
          this.fillingLoading = false
        }).catch(() => {
          this.fillingLoading = false
        })
      },
      // 右侧按钮
      openModel(type) {
        this.forbid = false
        this.operationType = type
        if (type == 'add') {
          this.getRoleList()
          this.staffTitle = '添加'
        }
        this.staffDialogVisible = true
      },
      buttonData(row, type) {
        this.forbid = false
        // console.log(row,type,667)
        this.getRoleList()
        this.userinfo = row
        this.operationType = type
        if (type == 'edit') {
          this.staffTitle = '编辑'
          this.$nextTick(() => {
            this.assignment(row)
          })
          this.staffDialogVisible = true
        } else if (type == 'logs') {
          this.forbid = true
          this.staffTitle = '详情'
          this.$nextTick(() => {
            this.assignment(row)
          })
          this.staffDialogVisible = true
        } else if (type == 'del') {
          this.deleteUser(row.id)
        } else if (type == 'reset') {
          this.resetPasswords()
        }
      },
      // 删除用户
      deleteUser(id) {
        this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delUser({
            id: id,
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.getList()
            }
          })
        }).catch(() => {});
      },
      // 重置密码
      resetPasswords() {
        this.$prompt('请输入新密码', '重置密码', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({
          value
        }) => {
          putResetUser({
            id: this.userinfo.id,
            password: value
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '重置成功'
              });
            }
          })
        }).catch(() => {});
      },
      // 编辑赋值
      assignment(value) {
        const arr = JSON.parse(JSON.stringify(value))
        this.ruleForm.username = arr.username
        this.ruleForm.roleId = arr.roleId
        if (arr.provUser.userType == 3) {
          delete arr.provUser.userId
          delete arr.provStoreUserBindCertificate.userId
          this.ruleForm.provUser = arr.provUser
          this.ruleForm.provTruck = arr.provStoreUserBindCertificate
        } else if (arr.provUser.userType == 4) {
          delete arr.provUser.userId
          delete arr.provTruckUserBindCertificate.userId
          this.ruleForm.provUser = arr.provUser
          this.ruleForm.provTruck = arr.provTruckUserBindCertificate
        } else if (arr.provUser.userType == 5) {
          delete arr.provUser.userId
          this.ruleForm.provUser = arr.provUser
        }
      },
      changeSize(val) {
        this.Pagination.PageSize = val
        this.getList()
      },
      changeCurrent(val) {
        this.Pagination.PageIndex = val
        this.getList()
      },
      // 清空表单
      closeDialog() {
        this.$nextTick(() => {
          this.ruleForm.provUser.cmpCode = ''
          this.ruleForm.provUser.description = ''
          this.ruleForm.provUser.personQual = ''
          this.ruleForm.provTruck.certificateNo = ''
          this.ruleForm.provTruck.issueAuthority = ''
          this.ruleForm.provTruck.issueTime = ''
          this.ruleForm.provTruck.firstIssueTime = ''
          this.ruleForm.provTruck.expireTime = ''
          this.ruleForm.provTruck.remarks = ''
          this.ruleForm.provTruck.imgUrl = ''
          this.$refs.outlet.clearForm();
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
