<script lang="ts" setup name="SystemResourceList">
import type { Ref } from 'vue'
import { computed, getCurrentInstance, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Switch } from '@element-plus/icons-vue'
import type { ResourceInfo, ResourceTypeInfo } from './resource-interface'
import SystemEditResource from './editResource.vue'
import { delResource, getResourceList, getResourceTypeList } from '@/api/system/resource'
import { toTreeList } from '@/utils/structure'

const { proxy } = getCurrentInstance() as any

const editDialog = ref() // 组件

// 默认查询条件
const defaultQuery = {
  resourceName: '',
  resourceUrl: '',
  level: '',
  resourceType: '',
}
// 查询条件
const listQuery = reactive({ ...defaultQuery })
// 搜索重置
function reset() {
  Object.assign(listQuery, defaultQuery)
  fetchData()
}
// 表格表头
const columns = ref([
  { text: '资源名称', value: 'name', type: 'expand' },
  { text: '资源编号', value: 'code' },
  { text: '请求地址', value: 'url' },
  { text: '资源类型', value: 'resourceTypeName', width: 100, align: 'center' },
  { text: '层级', value: 'levels', width: 60, align: 'center' },
  { text: '排序', value: 'num', width: 60, align: 'center' },
])
// 数据列表
const list: Ref<ResourceInfo[]> = ref([])
const loading = ref(false)

// 搜索按钮
function search() {
  fetchData()
}
// 查询数据
function fetchData() {
  loading.value = true
  getResourceList(listQuery).then((res) => {
    const treeData = toTreeList<ResourceInfo>(res.data)
    list.value = treeData
    loading.value = false
  })
}

// 获取资源类型列表
const resourceTypeList: Ref<ResourceTypeInfo[]> = ref([])
function fetchResourceType() {
  getResourceTypeList().then((res) => {
    resourceTypeList.value = res.data
  })
}
// 编辑资源
function edit(row: ResourceInfo) {
  editDialog.value.initDialog('update', row)
}
// 删除资源
function del(row: ResourceInfo) {
  ElMessageBox.confirm(
    `确定要删除${row.name}吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delResource(row.id).then((res) => {
      ElMessage.success('删除成功')
      fetchData()
    })
  })
}
// 添加资源
function add() {
  editDialog.value.initDialog('create')
}

// 表格组件
const table = ref()
const expansion = ref(false)
// 展开或折叠
function expandOrCollapse() {
  expansion.value = !expansion.value
  toggleRowExpansionAll(list.value, expansion.value)
}
// 展开所有行的递归函数
function toggleRowExpansionAll(data: ResourceInfo[], isExpansion: boolean) {
  data.forEach((item) => {
    table.value.toggleRowExpansion(item, isExpansion)
    if (item.children && item.children.length > 0) {
      toggleRowExpansionAll(item.children, isExpansion)
    }
  })
}

onMounted(() => {
  fetchResourceType()
  fetchData()
})
</script>

<template>
  <app-container>
    <search-area @search="search">
      <search-item>
        <el-input v-model="listQuery.resourceName" placeholder="资源名称" />
      </search-item>
      <search-item>
        <el-input v-model="listQuery.resourceUrl" placeholder="资源路径" />
      </search-item>
      <search-item>
        <el-select v-model="listQuery.resourceType" placeholder="资源类型" clearable>
          <el-option
            v-for="item in resourceTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </search-item>
    </search-area>
    <table-container>
      <template #btns-right>
        <icon-button v-if="proxy.hasPerm('/sys/resource/add')" icon="icon-add" title="新增" @click="add" />
        <icon-button icon="icon-fold" title="展开/折叠" @click="expandOrCollapse" />
      </template>
      <el-table ref="table" v-loading="loading" :data="list" row-key="id" border stripe style="width: 100%;" :tree-props="{ children: 'children' }">
        <el-table-column v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
        <el-table-column v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
          <template #default="scope">
            <el-button v-if="proxy.hasPerm('/sys/resource/update')" type="primary" link size="small" class="table-text-button" @click="edit(scope.row)">
              修改
            </el-button>
            <el-button v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" link size="small" class="table-text-button" @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </table-container>
    <system-edit-resource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
  </app-container>
</template>