<!--
 * @Author: 曹捷
 * @Date: 2021-03-25 11:32:15
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-03 16:45:02
 * @Description: fileContent
-->
<template>
  <obitUniversalDetails title="分配角色">
    <a-descriptions title="基本信息">
      <a-descriptions-item label="用户昵称">{{formData.nickName}}</a-descriptions-item>
      <a-descriptions-item label="用户名称">{{formData.userName}}</a-descriptions-item>
    </a-descriptions>
    <a-table expandRowByClick :loading="pageLoading" rowKey="roleId" :columns="tableColumns"
      :dataSource="pageDataList.roles" :row-selection="rowSelection" :pagination="false" class="obit-atable"
      highlight-current-row style="width: 100%">
      <template #sort="{record,index}">
        {{index+1}}
      </template>
    </a-table>
    <div class="t-c m-t-10 b-t p-t-10">
      <a-button type="primary" class="m-r-15" @click="selectAll">
        提 交
      </a-button>
    </div>
  </obitUniversalDetails>
</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'

export default {
  setup (props, context) {
    let router = useRouter()
    let route = useRoute()
    let pageIns = page({
      url: `system/user/authRole/${route.query.userId}`,
      key: 'roleId',
      afterSuccess (data) {
        _data.formData = {}
        _data.formData = util.util.cloneObj(data.user)
        _data.rowSelection.selectedRowKeys = []
        if (data.user.roles) {
          data.user.roles.forEach(element => {
            _data.rowSelection.selectedRowKeys.push(element.roleId)
          });
        }
      }
    })
    let http = inject('http')
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      formData: {},
      query: route.query,
      pageLoading: false,
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          _data.rowSelection.selectedRowKeys = selectedRowKeys
        },
      },
      tableColumns: [
        { slots: { customRender: 'sort' }, title: '序号' },
        { dataIndex: 'roleId', title: '角色编号' },
        { dataIndex: 'roleName', title: '角色名称' },
        { dataIndex: 'roleKey', title: '权限字符' },
        { dataIndex: 'createTime', title: '创建时间' },
      ],
    })
    let _methods = {
      selectAll () {
        proxy.$confirm({
          title: '提示',
          content: '是否分配当前角色',
          onOk () {
            let param = {
              userId: route.query.userId,
              roleIds: util.util.cloneObj(_data.rowSelection.selectedRowKeys)
            }
            http.saveSystemUserRoles(param).then((res) => {
              proxy.$message.success('角色分配成功')
              router.go(-1)
            })
          },
        })

      },
      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>