<!--
 * @Author: 曹捷
 * @Date: 2021-03-15 14:54:07
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-02 16:31:32
 * @Description: 用户管理
-->
<template>
  <obitUniversalTable name="用户管理" :pagination="pagination" v-if="$fmt(['sys_normal_disable'])">
    <template #search>
      <obit-search-form :params="params" :paramList="paramList" @search="pageQuery(true)">
      </obit-search-form>
    </template>
    <template #btn>
      <a-button @click="removeAll" class="m-r-15">
        <i class="iconfont icon-ashbin  p-r-5"></i> 删除全部
      </a-button>
      <a-button type="primary" @click="addDialog">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table :loading="pageLoading" rowKey="userId" :columns="tableColumns" :dataSource="pageDataList"
      :row-selection="rowSelection" :pagination="false" class="obit-atable" highlight-current-row
      :scroll="{ x: '100%' }" style="width: 100%">
      <template #dept="{record}">
        {{record.dept && record.dept.deptName || ''}}
      </template>
      <template #operation="{ record}" :key="record.userId">
        <div v-if="record.userId!=='1'">
          <a-button class="operation-btn" type="link" @click="editDialog(record)">编辑 </a-button>
          <a-button class="operation-btn" type="link" @click="remove(record)">删除</a-button>
          <a-button class="operation-btn" type="link" @click="resetPassword(record)">重置密码 </a-button>
          <a-button class="operation-btn" type="link" @click="editRoleDialog(record)">分配角色</a-button>
        </div>
      </template>
    </a-table>
  </obitUniversalTable>
  <userAdd :addType="pageType" v-model:open="pageVisable" :detailsInfo="detailsInfo" @reload="pageQuery">
  </userAdd>
  <resetPass v-model:open="passwordVisable" :dataInfo="dataInfo" @reload="pageQuery"></resetPass>
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'
import page from './../../../hook/page.js'
import userAdd from './userAdd.vue'
import resetPass from './resetPassword.vue'
import { useRoute, useRouter } from 'vue-router'
export default {
  components: { userAdd, resetPass },
  setup (props, contenxt) {
    let router = useRouter()
    let { proxy } = getCurrentInstance()
    let http = inject('http')
    let pageIns = page({
      url: 'system/user/pageList',
      key: 'userId',
      removeUrl: 'system/user/remove',
      removeAll: 'system/user/removeAll',
      beforeSuccess (data) {
        data.data && data.data.forEach(element => {
          element.roleNameAll = element.roles.join(', ')
        });
      }
    })
    let _data = reactive({
      roleVisable: false,
      passwordVisable: false,
      userId: '',
      dataInfo: {},
      name: '',
      tableColumns: [
        // { dataIndex: 'userId', title: '编号', width: 100 },
        { dataIndex: 'userName', title: '用户名称', width: 150 },
        { dataIndex: 'nickName', title: '用户昵称', width: 150 },
        { slots: { customRender: 'dept' }, title: '用户部门', width: 100 },
        { dataIndex: 'phonenumber', title: '手机号码', width: 150 },
        { dataIndex: 'status', customRender: ({ text, record, index }) => proxy.$fmt('sys_normal_disable', text), title: '状态', width: 100 },
        { dataIndex: 'createTime', title: '创建时间', width: 200 },
        { title: '操作', slots: { customRender: 'operation' }, width: 300 },
      ],
      paramList: [
        {
          type: 'tree',
          key: 'deptId',
          name: '公司部门',
          children: 'children',
          valueName: 'id',
          label: 'label',
          customApi: true,
          url: 'sysGetTreeSelect',
        },
        { name: '用户名称', key: 'userName' },
        { name: '手机号码', key: 'phonenumber' },
        {
          type: 'ajax',
          key: 'status',
          name: '用户状态',
          valuename: 'dictValue',
          labelname: 'dictLabel',
          ajaxurl: 'system/dict/data/type/sys_normal_disable',
        },
        { name: '操作时间', endKey: 'endTime', startKey: 'beginTime', type: 'dateBetween' },
      ],
    })
    let _methods = {
      resetPassword (item) {
        _data.dataInfo = item
        _data.passwordVisable = true
      },
      editRoleDialog (item) {
        router.push({ path: 'user/bindRole', query: { userId: item.userId } })
      }
    }
    onMounted(() => {
      pageIns._method.pageQuery()
    })
    return {
      ...toRefs(pageIns._data),
      ...pageIns._method,
      ...toRefs(_data),
      ..._methods,
    }
  },
}
</script>

<style>
</style>