<!--
  @description: 系统设置->用户管理
  @author: change by sunxinman
  @routerPath: /systemManagement/userManagement
  @date:  2019/11/15-23:33
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form="searchForm"
      :menu="true"
      search-label-width="80px"
      @on-load="loadData"
    >
      <template v-slot:header>
        用户管理
      </template>
      <template v-slot:search="search">
        <el-form-item label="用户名">
          <el-input
            v-model.trim="searchForm.userName"
            placeholder="请输入用户名"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input
            v-model.trim="searchForm.realName"
            class="filter-item"
            placeholder="请输入真实姓名"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <!-- <el-form-item label="所属机构">
          <el-input
            v-model.trim="searchForm.companyName"
            placeholder="请输入所属机构"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item> -->
        <el-form-item label="所属部门">
          <el-input
            v-model.trim="searchForm.departName"
            placeholder="请输入所属部门"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="searchForm.roleCode" placeholder="请选择" style="width: 220px">
            <el-option
              v-for="item in roleNameList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <el-button type="primary" plain @click="addUser('')">
          新增用户
        </el-button>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
          />
          <el-table-column
            header-align="center"
            prop="userName"
            label="用户名"
            min-width="80"
          />
          <el-table-column
            prop="realName"
            header-align="center"
            label="真实姓名"
            min-width="80"
          />
          <el-table-column
            header-align="center"
            min-width="200"
            prop="companyName"
            label="所属机构"
          />
          <el-table-column
            header-align="center"
            min-width="200"
            prop="departName"
            label="所属部门"
          />
          <el-table-column
            prop="roleName"
            label="角色"
          />
          <el-table-column
            prop="useStatus"
            align="center"
            label="状态"
            width="60"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.useStatus==='02'">冻结</span>
              <span v-if="scope.row.useStatus==='01'">激活</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="300"
            header-align="center"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="addUser(scope.row)">
                [编辑]
              </el-link>
              <el-link type="primary" @click.stop="deletUser(scope.row)">
                [删除]
              </el-link>
              <el-link
                type="primary"
                @click.stop="setRole(scope.row)"
              >
                [设置角色]
              </el-link>
              <el-link
                type="primary"
                @click.stop="resetPassword(scope.row)"
              >
                [重置密码]
              </el-link>
              <el-link
                v-if="scope.row.useStatus==='01'"
                type="primary"
                @click.stop="freezeUser(scope.row,'02')"
              >
                [冻结]
              </el-link>
              <el-link
                v-if="scope.row.useStatus==='02'"
                type="primary"
                @click.stop="freezeUser(scope.row,'01')"
              >
                [激活]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <!-- 新增用户-编辑用户 -->
    <userManage-dialog ref="userManage" @call-back="callBack" />
    <!-- 设置角色 -->
    <setRole-dialog ref="setRole" @call-back="callBack" />
    <!-- 重置密码 -->
    <resetPassword-dialog ref="resetPassword" />
  </div>
</template>

<script>
/* api */
import { fetchList, deleteUserByUserIdAdnRoleIdAndOrgId, frozenUser } from '@/api/common/user'
/* 混入 */
import { ListMixin } from '@/mixins/ListMixin'
/* 组件 */
import userManageDialog from './userManage-dialog'// 新增用户-编辑用户
import setRoleDialog from './setRole-dialog'// 设置角色
import resetPasswordDialog from './resetPassword-dialog'// 重置密码
export default {
  components: {
    'userManage-dialog': userManageDialog, // 新增用户-编辑用户
    'setRole-dialog': setRoleDialog, // 设置角色
    'resetPassword-dialog': resetPasswordDialog// 设置角色
  },
  mixins: [ListMixin],
  data() {
    return {
      loading: true,
      // 搜索
      searchForm: {
        userName: '', // 用户名
        realName: '', // 真实姓名
        departName: '', // 所属机构
        roleCode: '' // 角色
      },
      // 角色 code
      roleNameList: [
        { typecode: '', typename: '全部' },
        { typecode: '12', typename: '供应商' },
        { typecode: '10', typename: '采购人' },
        { typecode: 'OFF_EXPERT', typename: '正式专家' },
        { typecode: '11', typename: '代理机构' }
      ],
      tableData: [] // 用户列表
    }
  },
  methods: {
    // 获取数据
    loadData(params, callback) {
      fetchList(params).then(response => {
        this.loading = false
        this.tableData = Object.freeze(response.data.records)
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    // 新增/编辑用户
    addUser(row) {
      // 打开弹框
      this.$refs.userManage.open(row)
    },
    // 操作回调
    callBack() {
      this.$refs.tableCrud.onSearchChange()
    },
    // 删除用户
    deletUser(row) {
      this.$confirm('确认要删除用户么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        const data = {
          userId: row.userId, // 用户id
          departId: row.departId// 机构id
        }
        deleteUserByUserIdAdnRoleIdAndOrgId(data).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.callBack()
        })
      })
    },
    // 设置角色
    setRole(row) {
      this.$refs.setRole.open({
        userId: row.userId, // 用户id
        departId: row.departId// 机构id
      })
    },
    // 重置密码
    resetPassword(row) {
      const data = {
        id: row.userId,
        realName: row.realName, // 真实姓名
        userName: row.userName, // 用户名
        email: row.email, // 邮箱
        mobilePhone: row.mobilePhone // 手机号码
      }

      this.$refs.resetPassword.open(data)
    },
    // 冻结/激活用户
    freezeUser(row, useStatus) {
      this.$confirm('确认冻结用户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        const data = {
          departId: row.departId, // 机构id
          useStatus: useStatus, // 使用状态 00临时 01有效 02作废
          userId: row.userId // 用户id
        }
        frozenUser(data).then(() => {
          this.$message({
            message: '冻结成功',
            type: 'success'
          })
          this.callBack.onSearchChange()
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
