<script setup lang="ts">
import AForm from '@/components/AForm/index.vue'
import DeptTreeSelect from '@/views/components/DeptTreeSelect/index.vue'
import { FormConfigType } from '@/components/AForm/type'
import { ToolbarConfigType } from '@/components/AToolbar/type'
import { ColumnConfigType } from '@/components/ATable/type'
import { StrAnyObj, StrAnyObjArr } from '@/typings'
import { useHandleData } from '@/utils/useHandleData'
import { getPageApi } from '@/api/system/user'
import { authUserApi } from '@/api/system/role'

const visible = ref<boolean>(false)
let title = ''
let roleId = ''

const queryRef = ref<InstanceType<typeof AForm>>()
const queryDeptRef = ref<InstanceType<typeof DeptTreeSelect>>()

const showQuery = ref<boolean>(true)
const selectKeys = ref<string[]>([])
const pageTotal = ref<number>(0)

const queryData = ref<StrAnyObj>({ pageNum: 1, pageSize: 10 })
const tableData = ref<StrAnyObjArr>([])

const queryConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'username',
    label: '账号'
  },
  {
    type: 'input',
    prop: 'nickname',
    label: '昵称'
  },
  {
    type: 'slot',
    prop: 'queryDept',
    label: '部门'
  }
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getPage()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getPage()
    }
  },
  {
    text: '批量授权',
    icon: 'user',
    type: 'success',
    disabled() {
      return selectKeys.value.length == 0
    },
    click() {
      handleAuthUser(selectKeys.value)
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    prop: 'username',
    label: '账号'
  },
  {
    prop: 'nickname',
    label: '昵称'
  },
  {
    prop: 'deptName',
    label: '部门'
  },
  {
    width: 150,
    handleConfig: [
      {
        icon: 'user',
        text: '授权',
        click(row) {
          handleAuthUser([row.id])
        }
      }
    ]
  }
]

defineExpose({ open })

function open(row: StrAnyObj) {
  visible.value = true
  title = `【${row.name}】授权用户`
  roleId = row.id
  getPage()
  nextTick(() => {
    queryDeptRef.value?.load()
  })
}

function closed() {
  queryRef.value?.resetFields()
  tableData.value = []
}

function getPage() {
  getPageApi({ ...queryData.value, neRoleId: roleId, status: 1 }).then((resp) => {
    tableData.value = resp.records
    pageTotal.value = resp.total
  })
}

function tableSelectionChange(item: StrAnyObjArr) {
  selectKeys.value = item.map((item) => item.id)
}

function handleAuthUser(userIdList: Array<string>) {
  useHandleData('是否确认授权？', () => {
    authUserApi({ roleId, userIdList }).then(() => {
      ElMessage.success('授权成功')
      getPage()
    })
  })
}
</script>

<template>
  <a-dialog v-model="visible" :title="title" :footer="false" width="1000px" @closed="closed">
    <el-card v-if="showQuery">
      <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="8">
        <template #queryDept>
          <dept-tree-select ref="queryDeptRef" v-model="queryData.deptId" />
        </template>
      </a-form>
    </el-card>

    <a-table
      selection
      :data="tableData"
      :page-total="pageTotal"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:showQuery="showQuery"
      v-model:page-num="queryData.pageNum"
      v-model:page-size="queryData.pageSize"
      @page-num-change="getPage"
      @page-size-change="getPage"
      @selection-change="tableSelectionChange"
    >
    </a-table>
  </a-dialog>
</template>
