<!--
 * @Author: 曹捷
 * @Date: 2021-03-25 11:32:15
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-03 17:09:40
 * @Description: fileContent
-->
<template>
  <obitUniversalDetails title="分配用户" 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="cancelAll" class="m-r-15">
        <i class="iconfont icon-ashbin  p-r-5"></i> 取消全部
      </a-button>
      <a-button type="primary" class="" @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"
      :scroll="{ x: '100%' }" :row-selection="rowSelection" :pagination="false" class="obit-atable"
      highlight-current-row style="width: 100%">
      <template #sort="{record,index}">
        {{index+1}}
      </template>
      <template #operation="{ record }" :key="record.userId">
        <a-button class="operation-btn" type="link" @click="cancel(record)">取消授权</a-button>
      </template>
    </a-table>
  </obitUniversalDetails>
  <userAddVue v-model:open="pageVisable" :detailsInfo="detailsInfo" @reload="pageQuery(true)">
  </userAddVue>
</template>
<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'
import { util } from '../../../entery'
import page from './../../../hook/page.js'
import { useRoute, useRouter } from 'vue-router'
import userAddVue from './userAdd.vue'

export default {
  components: { userAddVue },
  setup (props, context) {
    let router = useRouter()
    let route = useRoute()
    let pageIns = page({
      url: 'system/role/authUser/allocatedList',
      key: 'userId',
      getQueryParam () {
        return route.query;
      }
    })
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      pageSelectionList: [],
      query: route.query,
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          _data.pageSelectionList = selectedRowKeys
        }
      },
      tableColumns: [
        { dataIndex: 'userName', title: '用户名称', width: 120 },
        { dataIndex: 'nickName', title: '用户昵称', width: 120 },
        { dataIndex: 'email', title: '邮箱', width: 200 },
        { dataIndex: 'phonenumber', title: '手机', width: 150 },
        { dataIndex: 'status', customRender: ({ text, record, index }) => proxy.$fmt('sys_normal_disable', text), title: '状态', width: 100 },
        { dataIndex: 'createTime', title: '创建时间', width: 180 },
        { title: '操作', slots: { customRender: 'operation' }, width: 120 },
      ],
      paramList: [
        { name: '用户名称', key: 'userName' },
        { name: '手机号码', key: 'phonenumber' },
      ],
    })
    let _methods = {
      cancel (item) {
        proxy.$confirm({
          title: '提示',
          content: '是否取消当前用户授权',
          onOk () {
            let param = {
              userId: item.userId,
              roleId: route.query.roleId
            }
            http.saveSystemRoleCancel(param).then((res) => {
              proxy.$message.success('取消授权成功')
              pageIns._method.pageQuery()
            })
          },
        })
      },
      cancelAll () {
        proxy.$confirm({
          title: '提示',
          content: '是否取消当前用户授权',
          onOk () {
            let param = {
              userIds: util.util.cloneObj(_data.pageSelectionList),
              roleId: route.query.roleId
            }
            http.saveSystemRoleCancelAll(param).then((res) => {
              proxy.$message.success('取消授权成功')
              pageIns._method.pageQuery()
            })
          },
        })
      },
      back () {
        router.go(-1)
      },
    }
    onMounted(() => {
      pageIns._method.pageQuery()
    })
    return {
      ...toRefs(pageIns._data),
      ...pageIns._method,
      ...toRefs(_data),
      ..._methods,
    }
  },
}
</script>
<style lang="less">
.ant-checkbox-group {
  width: 100%;
}
.bind-modal {
  .ant-modal-body {
    padding: 0;
    padding-top: 20px;
    .fromTitle {
      padding: 0;
    }
    .role-tree {
      padding: 10px 20px;
    }
    .ant-layout {
      padding: 0;
      background: #fff;
    }
  }
}
</style>