<script lang="ts" setup name="SystemDeptList">
import type { Ref } from 'vue'
import { 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 { DeptInfo, DeptTreeNode } from './dept_interface'
import SystemEditDept from './edit.dept.vue'
import { delDept, getDeptList } from '@/api/system/dept'
import { toTreeList } from '@/utils/structure'

const { proxy } = getCurrentInstance() as any

// 默认查询条件
const defaultQuery = {
  keyword: '',
}
// 查询条件
const listQuery = reactive({ ...defaultQuery })
// 搜索重置
function reset() {
  Object.assign(listQuery, defaultQuery)
  fetchData()
}
// 表格表头
const columns = ref([
  { text: '组织名称', value: 'simpleName', align: 'left' },
  { text: '组织全称', value: 'fullName' },
  { text: '备注', value: 'tips' },
  { text: '排序', value: 'num', width: 80 },
])
// 数据列表
const list: Ref<DeptInfo[]> = ref([])
const loading = ref(false)

// 搜索按钮
function search() {
  fetchData()
}
// 查询数据
function fetchData() {
  loading.value = true
  getDeptList(listQuery).then((res) => {
    const treeData = toTreeList<DeptInfo>(res.data.list, '0', false)
    list.value = treeData
    loading.value = false
  })
}
const editDialog = ref() // 弹窗组件
// 编辑组织
function edit(row: DeptInfo) {
  editDialog.value.initDialog('update', row)
}
// 删除组织
function del(row: DeptInfo) {
  ElMessageBox.confirm(
    `确定要删除${row.simpleName}吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delDept(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: DeptInfo[], isExpansion: boolean) {
  data.forEach((item) => {
    table.value.toggleRowExpansion(item, isExpansion)
    if (item.children && item.children.length > 0) {
      toggleRowExpansionAll(item.children, isExpansion)
    }
  })
}

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

<template>
  <AppContainer>
    <SearchArea @search="search">
      <SearchItem>
        <ElInput v-model="listQuery.keyword" placeholder="组织名称" />
      </SearchItem>
    </SearchArea>
    <TableContainer>
      <template #btns-left>
        <ElButton v-if="proxy.hasPerm('/sys/dept/add')" :icon="Plus" style="margin-bottom: 10px;" @click="add">
          新增
        </ElButton>
        <ElButton :icon="Switch" style="margin-bottom: 10px;" @click="expandOrCollapse">
          展开/折叠
        </ElButton>
      </template>
    </TableContainer>
    <div>
      <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/dept/update') || proxy.hasPerm('/sys/dept/delete')" label="操作" width="140" align="center">
          <template #default="scope">
            <ElButton v-if="proxy.hasPerm('/sys/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
              修改
            </ElButton>
            <ElButton v-if="proxy.hasPerm('/sys/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
              删除
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
    <SystemEditDept ref="editDialog" @close-refresh="search" />
  </appcontainer>
</template>

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