<script lang="ts" setup name="SystemResourceList">
import type { Ref } from 'vue'
import { computed, getCurrentInstance, reactive, ref } from 'vue'
import { ElButton, ElInput, ElMessage, ElMessageBox, ElOption, ElSelect, ElTable, ElTableColumn } from 'element-plus'
import { Plus, Switch } from '@element-plus/icons-vue'
import type { ResourceInfo, ResourceTypeInfo } from './resource_interface'
import SystemEditResource from './edit.resource.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: 80 },
  { 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>
  <AppContainer>
    <SearchArea @search="search">
      <SearchItem>
        <ElInput v-model="listQuery.resourceName" placeholder="资源名称" />
      </SearchItem>
      <SearchItem>
        <ElInput v-model="listQuery.resourceUrl" placeholder="资源路径" />
      </SearchItem>
      <SearchItem>
        <ElSelect v-model="listQuery.resourceType" placeholder="资源类型" clearable>
          <ElOption
            v-for="item in resourceTypeList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </ElSelect>
      </SearchItem>
    </SearchArea>
    <TableContainer>
      <template #btns-left>
        <ElButton v-if="proxy.hasPerm('/sys/resource/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
          新增
        </ElButton>
        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
          展开/折叠
        </ElButton>
      </template>
      <ElTable ref="table" v-loading="loading" :data="list" row-key="id" :border="false" style="width: 100%;" :tree-props="{ children: 'children' }">
        <ElTableColumn v-for="column of columns" :key="column.value" :label="column.text" :prop="column.value" :width="column.width" :align="column.align" />
        <ElTableColumn v-if="proxy.hasPerm('/sys/resource/update') || proxy.hasPerm('/sys/resource/delete')" label="操作" width="140" align="center">
          <template #default="scope">
            <ElButton v-if="proxy.hasPerm('/sys/resource/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
              修改
            </ElButton>
            <ElButton v-if="proxy.hasPerm('/sys/resource/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
              删除
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </TableContainer>
    <SystemEditResource ref="editDialog" :resource-type-list="resourceTypeList" @close-refresh="search" />
  </appcontainer>
</template>

<style lang="scss" scoped>
.table-text-button {
  margin-left: 0;
}
</style>