<template>
  <ArtTableFullScreen>
    <div class="permission-page" id="table-full-screen">
      <!-- 搜索栏 -->
      <ArtSearchBar
        v-model:filter="searchForm"
        :items="searchFormItems"
        :show-expand="false"
        @reset="handleReset"
        @search="handleSearch"
      ></ArtSearchBar>

      <ElCard shadow="never" class="art-table-card">
        <!-- 表格头部 -->
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <ElButton @click="showDialog('add')" v-permission="'permission:add'">新增权限</ElButton>
          </template>
        </ArtTableHeader>

        <!-- 表格 -->
        <ArtTable
          ref="tableRef"
          row-key="id"
          :data="permissionList"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          :default-expand-all="false"
          :pagination="false"
          :marginTop="10"
        >
          <template #default>
            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </ArtTable>

        <!-- 新增/编辑对话框 -->
        <ElDialog
          v-model="dialogVisible"
          :title="dialogType === 'add' ? '新增权限' : '编辑权限'"
          width="600px"
          align-center
        >
          <ElForm ref="formRef" :model="form" :rules="rules" label-width="100px">
            <ElFormItem label="权限名称" prop="perm_name">
              <ElInput v-model="form.perm_name" placeholder="请输入权限名称" />
            </ElFormItem>
            <ElFormItem label="权限标识" prop="perm_code">
              <ElInput
                v-model="form.perm_code"
                placeholder="例如：菜单权限:menu:role 按钮权限: role:add"
                type="textarea"
                :rows="2"
              />
            </ElFormItem>
            <ElFormItem label="权限类型" prop="perm_type">
              <ElSelect v-model="form.perm_type" placeholder="请选择权限类型" style="width: 100%">
                <ElOption
                  v-for="option in PERMISSION_TYPE_OPTIONS"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="父级权限" prop="parent_id">
              <ElTreeSelect
                v-model="form.parent_id"
                :data="permissionTreeOptions"
                placeholder="请选择父级权限（可选）"
                clearable
                check-strictly
                :render-after-expand="false"
                style="width: 100%"
              />
            </ElFormItem>
            <ElFormItem v-if="form.perm_type === PermissionType.MENU" label="菜单路径" prop="url">
              <ElInput v-model="form.url" placeholder="请输入菜单路径，如：/system/user" />
            </ElFormItem>
            <ElFormItem label="适用端口" prop="platform">
              <ElSelect v-model="form.platform" placeholder="请选择适用端口" style="width: 100%">
                <ElOption label="全部" value="all" />
                <ElOption label="Web后台" value="web" />
                <ElOption label="H5端" value="h5" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="排序序号" prop="sort">
              <ElInputNumber v-model="form.sort" :min="0" :max="9999" style="width: 100%" />
            </ElFormItem>
            <ElFormItem label="状态" prop="status">
              <ElRadioGroup v-model="form.status">
                <ElRadio :value="1">启用</ElRadio>
                <ElRadio :value="0">禁用</ElRadio>
              </ElRadioGroup>
            </ElFormItem>
          </ElForm>
          <template #footer>
            <div class="dialog-footer">
              <ElButton @click="dialogVisible = false">取消</ElButton>
              <ElButton type="primary" @click="handleSubmit" :loading="submitLoading"
                >提交</ElButton
              >
            </div>
          </template>
        </ElDialog>
      </ElCard>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { h } from 'vue'
  import {
    ElMessage,
    ElMessageBox,
    ElTag,
    ElRadio,
    ElRadioGroup,
    ElButton,
    type FormInstance,
    type FormRules
  } from 'element-plus'
  import { PermissionService } from '@/api/modules'
  import type { CreatePermissionParams, PermissionTreeNode } from '@/types/api'
  import type { SearchFormItem } from '@/types'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { useAuth } from '@/composables/useAuth'
  import {
    PermissionType,
    PERMISSION_TYPE_OPTIONS,
    PERMISSION_TYPE_SELECT_OPTIONS,
    getPermissionTypeText,
    getPermissionTypeTag,
    CommonStatus,
    getStatusText
  } from '@/config/constants'

  defineOptions({ name: 'Permission' })

  const { hasAuth } = useAuth()

  // 搜索表单初始值
  const initialSearchState = {
    perm_name: '',
    perm_code: '',
    perm_type: undefined as number | undefined
  }

  // 搜索表单
  const searchForm = reactive({ ...initialSearchState })

  // 搜索表单配置
  const searchFormItems: SearchFormItem[] = [
    {
      label: '权限名称',
      prop: 'perm_name',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入权限名称'
      }
    },
    {
      label: '权限标识',
      prop: 'perm_code',
      type: 'input',
      config: {
        clearable: true,
        placeholder: '请输入权限标识'
      }
    },
    {
      label: '权限类型',
      prop: 'perm_type',
      type: 'select',
      options: PERMISSION_TYPE_SELECT_OPTIONS,
      config: {
        clearable: true,
        placeholder: '请选择'
      }
    }
  ]

  // 列配置
  const columnOptions = [
    { label: '权限名称', prop: 'perm_name' },
    { label: '权限标识', prop: 'perm_code' },
    { label: '权限类型', prop: 'perm_type' },
    { label: '菜单路径', prop: 'url' },
    { label: '适用端口', prop: 'platform' },
    { label: '状态', prop: 'status' },
    { label: '排序', prop: 'sort' }
  ]

  // 权限列表（树形结构）
  const permissionList = ref<PermissionTreeNode[]>([])
  // 原始权限树数据（用于搜索过滤）
  const originalPermissionTree = ref<PermissionTreeNode[]>([])

  const tableRef = ref()
  const dialogVisible = ref(false)
  const dialogType = ref('add')
  const currentPermissionId = ref<number>(0)
  const submitLoading = ref(false)

  // 表单引用和数据
  const formRef = ref<FormInstance>()
  const form = reactive<CreatePermissionParams & { status?: number }>({
    perm_name: '',
    perm_code: '',
    perm_type: PermissionType.MENU,
    parent_id: undefined,
    url: '',
    platform: 'all',
    sort: 0,
    status: CommonStatus.ENABLED
  })

  // 表单验证规则
  const rules = reactive<FormRules>({
    perm_name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
    perm_code: [
      { required: true, message: '请输入权限标识', trigger: 'blur' },
      {
        pattern: /^[a-zA-Z0-9:_-]+$/,
        message: '权限标识只能包含字母、数字、冒号、下划线和连字符',
        trigger: 'blur'
      }
    ],
    perm_type: [{ required: true, message: '请选择权限类型', trigger: 'change' }]
  })

  // 权限树选项（用于选择父级权限）
  const permissionTreeOptions = ref<any[]>([])

  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    {
      prop: 'perm_name',
      label: '权限名称',
      width: 240,
      showOverflowTooltip: true
    },
    {
      prop: 'perm_code',
      label: '权限标识',
      width: 240,
      showOverflowTooltip: true
    },
    {
      prop: 'perm_type',
      label: '权限类型',
      width: 120,
      formatter: (row: PermissionTreeNode) => {
        return h(ElTag, { type: getPermissionTypeTag(row.perm_type) }, () =>
          getPermissionTypeText(row.perm_type)
        )
      }
    },
    {
      prop: 'url',
      label: '菜单路径',
      showOverflowTooltip: true
    },
    {
      prop: 'platform',
      label: '适用端口',
      width: 120,
      formatter: (row: PermissionTreeNode) => {
        const platformMap: Record<string, string> = {
          all: '全部',
          web: 'Web后台',
          h5: 'H5端'
        }
        return platformMap[row.platform || 'all'] || row.platform
      }
    },
    {
      prop: 'status',
      label: '状态',
      width: 80,
      formatter: (row: PermissionTreeNode) => {
        const status = row.status ?? CommonStatus.ENABLED
        return h(
          ElTag,
          {
            type: status === CommonStatus.ENABLED ? 'success' : 'info'
          },
          () => getStatusText(status)
        )
      }
    },
    {
      prop: 'sort',
      label: '排序',
      width: 80
    },
    {
      prop: 'actions',
      label: '操作',
      width: 160,
      fixed: 'right',
      formatter: (row: PermissionTreeNode) => {
        const buttons: any[] = []

        if (hasAuth('permission:edit')) {
          buttons.push(
            h(
              ElButton,
              {
                type: 'primary',
                link: true,
                onClick: () => showDialog('edit', row)
              },
              () => '编辑'
            )
          )
        }

        if (hasAuth('permission:delete')) {
          buttons.push(
            h(
              ElButton,
              {
                type: 'danger',
                link: true,
                onClick: () => deletePermission(row)
              },
              () => '删除'
            )
          )
        }

        return h('div', { style: 'display: flex; gap: 8px;' }, buttons)
      }
    }
  ])

  // 过滤权限树（根据搜索条件）
  const filterPermissionTree = (
    tree: PermissionTreeNode[],
    filters: typeof searchForm
  ): PermissionTreeNode[] => {
    return tree.reduce<PermissionTreeNode[]>((acc, node) => {
      // 克隆节点避免修改原始数据
      const newNode = { ...node }

      // 检查当前节点是否匹配搜索条件
      let matches = true

      if (filters.perm_name && !newNode.perm_name.includes(filters.perm_name)) {
        matches = false
      }
      if (filters.perm_code && !newNode.perm_code.includes(filters.perm_code)) {
        matches = false
      }
      if (filters.perm_type !== undefined && newNode.perm_type !== filters.perm_type) {
        matches = false
      }

      // 递归过滤子节点
      if (newNode.children && newNode.children.length > 0) {
        newNode.children = filterPermissionTree(newNode.children, filters)
      }

      // 如果当前节点匹配或有匹配的子节点，则保留
      if (matches || (newNode.children && newNode.children.length > 0)) {
        acc.push(newNode)
      }

      return acc
    }, [])
  }

  // 获取权限树
  const getPermissionList = async () => {
    try {
      const response = await PermissionService.getPermissionTree()
      if (response.code === 0) {
        originalPermissionTree.value = response.data || []

        // 应用搜索过滤
        const hasFilters =
          searchForm.perm_name || searchForm.perm_code || searchForm.perm_type !== undefined

        if (hasFilters) {
          permissionList.value = filterPermissionTree(originalPermissionTree.value, searchForm)
        } else {
          permissionList.value = originalPermissionTree.value
        }

        // 构建权限树选项
        buildPermissionTreeOptions()
      }
    } catch (error) {
      console.error(error)
    }
  }

  // 构建权限树选项
  const buildPermissionTreeOptions = () => {
    const buildTree = (list: PermissionTreeNode[]): any[] => {
      return list.map((item) => ({
        value: item.id,
        label: item.perm_name,
        children: item.children && item.children.length > 0 ? buildTree(item.children) : undefined
      }))
    }
    permissionTreeOptions.value = buildTree(originalPermissionTree.value)
  }

  // 搜索
  const handleSearch = () => {
    getPermissionList()
  }

  // 重置
  const handleReset = () => {
    Object.assign(searchForm, { ...initialSearchState })
    getPermissionList()
  }

  // 刷新表格
  const handleRefresh = () => {
    getPermissionList()
  }

  // 显示对话框
  const showDialog = async (type: string, row?: PermissionTreeNode) => {
    dialogVisible.value = true
    dialogType.value = type

    if (formRef.value) {
      formRef.value.resetFields()
    }

    if (type === 'edit' && row) {
      currentPermissionId.value = row.id
      // 从API获取完整的权限数据（包含parent_id）
      try {
        const response = await PermissionService.getPermission(row.id)
        if (response.code === 0 && response.data) {
          Object.assign(form, {
            perm_name: response.data.perm_name,
            perm_code: response.data.perm_code,
            perm_type: response.data.perm_type,
            parent_id: response.data.parent_id || undefined,
            url: response.data.url || '',
            platform: response.data.platform || 'all',
            sort: response.data.sort || 0,
            status: response.data.status ?? CommonStatus.ENABLED
          })
        }
      } catch (error) {
        console.error('获取权限详情失败:', error)
        // 如果API获取失败，使用树节点数据作为备选
        Object.assign(form, {
          perm_name: row.perm_name,
          perm_code: row.perm_code,
          perm_type: row.perm_type,
          parent_id: undefined,
          url: row.url || '',
          platform: row.platform || 'all',
          sort: row.sort || 0,
          status: row.status ?? CommonStatus.ENABLED
        })
      }
    } else {
      currentPermissionId.value = 0
      resetForm()
    }
  }

  // 删除权限
  const deletePermission = (row: PermissionTreeNode) => {
    // 检查是否有子权限
    if (row.children && row.children.length > 0) {
      ElMessage.warning('该权限下存在子权限，请先删除子权限')
      return
    }

    ElMessageBox.confirm(`确定删除权限 ${row.perm_name} 吗？`, '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    })
      .then(async () => {
        try {
          await PermissionService.deletePermission(row.id)
          ElMessage.success('删除成功')
          await getPermissionList()
        } catch (error) {
          console.error(error)
        }
      })
      .catch(() => {
        // 用户取消删除
      })
  }

  // 提交表单
  const handleSubmit = async () => {
    if (!formRef.value) return

    await formRef.value.validate(async (valid) => {
      if (valid) {
        submitLoading.value = true
        try {
          if (dialogType.value === 'add') {
            await PermissionService.createPermission(form)
            ElMessage.success('新增成功')
          } else {
            await PermissionService.updatePermission(currentPermissionId.value, form)
            ElMessage.success('修改成功')
          }
          dialogVisible.value = false
          if (formRef.value) {
            formRef.value.resetFields()
          }
          await getPermissionList()
        } catch (error) {
          console.error(error)
        } finally {
          submitLoading.value = false
        }
      }
    })
  }

  // 重置表单
  const resetForm = () => {
    Object.assign(form, {
      perm_name: '',
      perm_code: '',
      perm_type: PermissionType.MENU,
      parent_id: undefined,
      url: '',
      platform: 'all',
      sort: 0,
      status: CommonStatus.ENABLED
    })
  }

  // 页面加载时获取权限列表
  onMounted(() => {
    getPermissionList()
  })
</script>

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