<script setup lang="ts">
import AForm from '@/components/AForm/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 { getListApi, editApi, deleteApi, refreshCacheApi } from '@/api/system/permission'
import { useHandleData } from '@/utils/useHandleData'

const queryRef = ref<InstanceType<typeof AForm>>()
const formRef = ref<InstanceType<typeof AForm>>()

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

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

const dialogTitle = ref<string>('')
const dialogVisible = ref<boolean>(false)

const queryConfig: FormConfigType[] = [
  {
    type: 'select',
    prop: 'method',
    label: '请求方式',
    option: [
      {
        key: 'GET',
        label: 'GET'
      },
      {
        key: 'POST',
        label: 'POST'
      },
      {
        key: 'PUT',
        label: 'PUT'
      },
      {
        key: 'DELETE',
        label: 'DELETE'
      }
    ]
  },
  {
    type: 'input',
    prop: 'bestMatching',
    label: '匹配路径'
  },
  {
    type: 'input',
    prop: 'code',
    label: '权限标识'
  },
  {
    type: 'select',
    prop: 'status',
    label: '状态',
    dict: 'enable_disable'
  }
]

const toolbarConfig: ToolbarConfigType[] = [
  {
    common: 'search',
    click() {
      queryData.value.pageNum = 1
      getList()
    }
  },
  {
    common: 'reset',
    click() {
      queryRef.value?.resetFields()
      getList()
    }
  },
  {
    text: '刷新缓存',
    icon: 'refresh',
    type: 'danger',
    permissions: 'sysPermission:refreshCache',
    click() {
      refreshCacheApi().then(() => {
        ElMessage.success('刷新缓存成功')
      })
    }
  }
]

const columnConfig: ColumnConfigType[] = [
  {
    prop: 'method',
    label: '请求方法'
  },
  {
    prop: 'bestMatching',
    label: '匹配路径'
  },
  {
    prop: 'code',
    label: '权限标识'
  },
  {
    prop: 'status',
    label: '状态',
    dict: 'enable_disable'
  },
  {
    prop: 'remark',
    label: '备注',
    showOverflowTooltip: true
  },
  {
    width: 150,
    handleConfig: [
      {
        if(row) {
          return row.status === 0
        },
        icon: 'CircleCheckFilled',
        text: '启用',
        permissions: 'sysPermission:edit',
        click(row) {
          dialogVisible.value = true
          dialogTitle.value = '编辑'
          formData.value = { ...row }
          formData.value.status = 1
          if (!formData.value.code) {
            formData.value.code = formData.value.bestMatching.slice(1).replaceAll('/', ':')
          }
        }
      },
      {
        if(row) {
          return row.status === 1
        },
        icon: 'CircleCloseFilled',
        text: '禁用',
        permissions: 'sysPermission:delete',
        click(row) {
          useHandleData('是否确认禁用？', () => {
            deleteApi({ id: row.id, status: 0 }).then(() => {
              ElMessage.success('禁用成功')
              getList()
            })
          })
        }
      }
    ]
  }
]

const formConfig: FormConfigType[] = [
  {
    type: 'input',
    prop: 'method',
    label: '请求方法',
    disabled: true
  },
  {
    type: 'input',
    prop: 'bestMatching',
    label: '匹配路径',
    disabled: true
  },
  {
    type: 'input',
    prop: 'code',
    label: '权限标识',
    rule: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
  },
  {
    type: 'input',
    prop: 'remark',
    label: '备注',
    itemType: 'textarea',
    rows: 5
  }
]

onMounted(() => {
  getList()
})

function getList() {
  getListApi(queryData.value).then((resp) => {
    tableData.value = resp
  })
}

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

function formSubmit() {
  formRef.value?.validate(() => {
    editApi(formData.value).then(() => {
      dialogVisible.value = false
      ElMessage.success('修改成功')
      getList()
    })
  })
}

function formClosed() {
  formRef.value?.resetFields()
}
</script>

<template>
  <div>
    <el-card v-if="showQuery">
      <a-form ref="queryRef" v-model="queryData" :config="queryConfig" :span="6"> </a-form>
    </el-card>

    <a-table
      selection
      :data="tableData"
      :toolbar-config="toolbarConfig"
      :column-config="columnConfig"
      v-model:showQuery="showQuery"
      @selection-change="tableSelectionChange"
    >
    </a-table>

    <a-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      @submit="formSubmit"
      @closed="formClosed"
    >
      <a-form ref="formRef" v-model="formData" :config="formConfig" :span="24"> </a-form>
    </a-dialog>
  </div>
</template>
