<template>
  <div id="user-wrap" class="user-wrap">
    <el-card>
      <el-form :inline="true">
        <el-form-item label="人员">
          <el-input
            v-model="queryForm.nameOrAccount"
            clearable
            size="small"
            style="width: 200px;margin-left: 5px;"
            placeholder="请输入人员账号或名称"
          />
        </el-form-item>
        <el-form-item label="来源渠道">
          <el-select v-model="queryForm.userType" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input" placeholder="请选择来源渠道">
            <el-option
              v-for="item in userTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
            v-model="queryForm.createTimeBegin"
            type="date"
            placeholder="开始时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 00:00:00"
            class="user-search-input"
          >
          </el-date-picker>
          <span>---</span>
          <el-date-picker
            v-model="queryForm.createTimeEnd"
            type="date"
            placeholder="结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd 23:59:59"
            class="user-search-input"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="queryForm.roleId" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input"  placeholder="请选择角色">
            <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryForm.status" style="width: 130px;margin-left: 5px;" size="small"
                     class="user-search-input"  placeholder="请选择状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button size="small" style="margin-left: 10px" type="primary" :loading="searchBtnLoading" @click="search">
        查询
      </el-button>
      <el-button
        v-if="checkPermission(USER_PERMS.addOuterUser)"
        type="primary"
        size="small"
        @click="addOuterUser()"
      >
        新增外部用户
      </el-button>
      <el-button
        v-if="checkPermission(USER_PERMS.addInnerUser)"
        type="primary"
        size="small"
        @click="addInnerUser()"
      >
        新增内部用户
      </el-button>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-table
        v-loading="searchBtnLoading"
        size="small"
        :data="userPage"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="账号" prop="account" align="center" min-width="100"/>
        <el-table-column label="人员名称" prop="userName" align="center" min-width="100"/>
        <el-table-column label="来源渠道" prop="userTypeName" align="center" min-width="100"></el-table-column>
        <el-table-column label="状态" prop="statusName" align="center" min-width="100"/>
        <el-table-column label="注册时间" prop="createTimeStr" align="center" min-width="100"/>
        <el-table-column label="人员角色" prop="userRoleNames" align="center" min-width="100"/>
        <!--        <el-table-column :label="$t('system.user.table.sex')" prop="sex" align="center" min-width="100">-->
        <!--          <template slot-scope="scope">-->
        <!--            <el-tag :type="scope.row.sex | sexStatusFilter">{{ sexValueFilter(scope.row.sex) }}</el-tag>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="操作" align="center" fixed="right" width="260">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.isAdmin == 0 && checkPermission(USER_PERMS.modifyOuterUser)"
              size="small"
              type="text"
              @click="toEditPage(scope.row.userId,scope.row.userType)"
            >
              修改
            </el-button>
            <el-button
              v-if="scope.row.isAdmin == 0 && checkPermission(USER_PERMS.deleteUser)"
              size="small"
              type="text"
              @click="deleteUser(scope.row.userId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        :current-page.sync="queryForm.pageNum"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </el-card>
  </div>
</template>

<script>
import {deleteUser, getUserPage} from '../../../api/system/user'
import {USER_PERMS} from '../../../permission/permission-system'

import permissionMixin from '../../../mixins/permission-mixin'

export default {
  name: 'UserManagement',
  filters: {
    sexStatusFilter(status) {
      switch (status) {
        case 0:
          return 'info'
        case 1:
          return 'success'
        case 2:
          return 'green'
      }
    }
  },
  mixins: [permissionMixin],
  data() {
    return {
      departments: [],
      queryForm: {
        nameOrAccount: '',
        createTimeBegin: null,
        createTimeEnd: null,
        userType: 100,
        roleId: 100,
        status: 100,
        pageNum: 1
      },
      userPage: [],
      total: 0,
      searchBtnLoading: false,
      roleList:[
        {roleId:100,roleName:'全部'},
        {roleId:6,roleName:'标注员(内部)'},
        {roleId:7,roleName:'标注员(外部)'},
        {roleId:5,roleName:'资源管理负责人 '},
        {roleId:4,roleName:'分类管理负责人'},
        {roleId:3,roleName:'任务分配负责人'},
        {roleId:2,roleName:'人员管理负责人'},
        {roleId:1,roleName:'超级管理员'}
      ],
      USER_PERMS
    }
  },
  computed: {
    userTypeList: function () {
      return [
        {value: 100, label: '全部'},
        {value: 0, label: '外部员工'},
        {value: 1, label: '内部员工'}
      ]
    },
    statusList: function () {
      return [
        {value: 100, label: '全部'},
        {value: 0, label: '正常'},
        {value: 1, label: '作废'}
      ]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.queryForm.pageNum = 1
      this.fetchUserPage(this.queryForm)
    },
    //查询用户列表
    fetchUserPage(queryForm) {
      this.searchBtnLoading = true
      getUserPage(queryForm).then(res => {
        this.userPage = res.result.result
        this.total = Number(res.result.total)
        this.searchBtnLoading = false
      }, () => {
        this.searchBtnLoading = false
      })
    },
    changePage(page) {
      this.queryForm.pageNum = page
      this.fetchUserPage(this.queryForm)
    },
    //新增外部用户
    addOuterUser() {
      this.$router.push({name: `AddUserPage`, params: {flush: true}})
    },
    //新增内部用户
    addInnerUser() {
      this.$router.push({name: `AddInnerUserPage`, params: {flush: true}})
    },
    //编辑外部用户
    toEditPage(userId,userType) {
      if (userType==0){
        //外部
        this.$router.push({name: `EditUserPage`, params: {flush: true, userId: userId}})
      }else {
        this.$router.push({name: `EditInnerUserPage`, params: {flush: true, userId: userId}})
      }

    },
    deleteUser(userId) {
      this.$confirm(this.$t('system.user.deleteTip'), this.$t('common.tip'), {type: 'warning'}).then(() => {
        deleteUser({userId}).then(res => {
          this.$message.success('删除成功')
          this.search(this.queryForm.pageIndex)
        })
      }, () => {
      })
    },
    sexValueFilter(status) {
      switch (status) {
        case 0:
          return this.$t('common.gender.secrecy')
        case 1:
          return this.$t('common.gender.male')
        case 2:
          return this.$t('common.gender.female')
      }
    },
  }
}
</script>
<style lang="scss" scoped="">
.user-wrap {

  .user-search-input {
    width: 180px;
    margin-left: 5px;
  }

  .filter-tree {
    width: 200px;
    height: 600px;
    overflow: auto;
  }

  .user-list {
    margin-left: 220px;
  }

  .filter-panel {
    margin-bottom: 10px;
  }

  .bg_color {
    display: inline-block;
    /*width: 80px;*/
    /*height: 23px;*/
    padding: 1px 10px;
    border-radius: 5px;
    color: white;
  }

  .bg-green {
    background-color: #37BC9B;
  }

  .bg-red {
    background-color: #DF5640;
  }

  .bg-gray {
    background-color: #777777;
  }

  .bg-blue {
    background-color: #3BAFDA;
  }

  .width430 {
    width: 63%;
    margin-right: 12px
  }

  .school-card {
    height: 100%;

    .item {
      height: 100%;
      font-size: 15px;
      margin-bottom: 5px;
    }
  }

  .end-button {
    text-align: right;
    margin-top: 20px;
  }
}
</style>
<style lang="scss">
#user-wrap {
  .el-tree-node.is-expanded > .el-tree-node__children {
    display: flex;
    flex-direction: column;
    width: max-content;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.el-cascader-menu__wrap {
  height: 250px;
}
</style>
