<template>
  <div class="app-container">
    <Custom-table :tableConfigData="tableConfigData" @handle-show="handleShow">
      <template v-slot:tableButton="scope">
        <el-link type="primary" :underline="false" @click="drawerData.handleShow(scope)">授权</el-link>
        <el-divider direction="vertical" />
      </template>
      <template v-slot:drawer>
        <el-form-item v-for="(item, index) in editData" :key="index" :label="item.label" :prop="item.prop">
          <custom-form-item v-model:modValue="tableConfigData.drawerformData[item.prop]" :type="item.type"
            :inputType="item.inputValue" :options="tableData" :selectProp="item.selectProp">
          </custom-form-item>
        </el-form-item>
      </template>
    </Custom-table>
    <el-drawer v-model="drawerData.drawerShow" title="授权" direction="rtl" :before-close="drawerData.handleClose">
      <el-tree ref="tree" :data="drawerData.treeData" node-key="key" :default-expand-all="true" :check-strictly="true"
        show-checkbox />
      <el-button type="primary" @click="drawerData.onSubmit(ruleFormRef)">保存</el-button>
      <el-button @click="drawerData.handleClose">取消</el-button>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { ref, Ref, reactive } from 'vue'
import { Scope } from '@/table/type'
import { roleConfigData } from './tableConfigData/roleManage'
import { getQueryRoleMenu, getQueryTreeList, saveRole } from '@/services/api/role/roleAPI'
import type { ElTree } from 'element-plus';
import { ElNotification } from 'element-plus'
export default {
  name: 'MenuManage',
  setup() {
    // type: 编辑的输入类型不填表示不加入编辑功能 inputType: input类型
    const tableConfigData = reactive(roleConfigData)

    const editData: Ref<any[]> = ref([])

    tableConfigData.tableTitle.forEach(item => {
      if (item.type) {
        editData.value.push(item)
      }
    })
    const tableData: Ref<any[]> = ref([])
    const handleShow = ref((params: { key: string, tableData: object[], scope?: Scope }) => {
      tableData.value = params.tableData
      const key = params.key
      switch (key) {
        case '新增':
          tableConfigData.drawerformData = {
            id: '',
            roleCode: '',
            roleName: '',
            roleDesc: ''
          }
          break
        case '编辑': {
          if (!params.scope) return false
          const row = params.scope.row
          tableConfigData.drawerformData = {
            id: row.id,
            roleCode: row.roleCode,
            roleName: row.roleName,
            roleDesc: row.roleDesc
          }
          break
        }
      }
    })
    const tree = ref<InstanceType<typeof ElTree>>()

    const permissionParams: { permissionIds: Array<any>, lastPermissionIds: Array<any>, roleId: string } = {
      permissionIds: [],
      lastPermissionIds: [],
      roleId: ''
    }
    // 授权抽屉数据
    const drawerData = reactive({
      drawerShow: false,
      treeData: [],
      handleClose: () => {
        drawerData.drawerShow = false
      },
      handleShow: (scope: Scope) => {
        drawerData.drawerShow = true
        permissionParams.roleId = scope.row.id
        getQueryRoleMenu({ id: scope.row.id }).then((res: any) => {
          if (res.code === 200) {
            permissionParams.lastPermissionIds = res.data
            tree.value!.setCheckedKeys(res.data as Node[], true)
          }
        })
      },
      onSubmit: () => {
        permissionParams.permissionIds = tree.value!.getCheckedKeys(false)
        saveRole(permissionParams).then((res: any) => {
          if (res.code === 200) {
            drawerData.handleClose()
            ElNotification({
              title: '温馨提示',
              message: '保存成功！',
              type: 'success'
            })
          }
        })
      }
    })
    getQueryTreeList().then((res: any) => {
      if (res.code === 200) {
        drawerData.treeData = res.data.treeList
      }
    })

    return {
      handleShow,
      tableConfigData,
      tableData,
      editData,
      drawerData,
      tree
    }
  }
}
</script>

<style lang="scss">
</style>
