<script lang="ts" setup name="SystemDeptList">
import type { Ref } from 'vue'
import { getCurrentInstance, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Switch } from '@element-plus/icons-vue'
import type { DeptInfo } from './dept-interface'
import SystemEditDept from './editDept.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, align: 'center' },
])
// 数据列表
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(true)
// 展开或折叠
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>
  <app-container>
    <search-area @search="search">
      <search-item>
        <el-input v-model="listQuery.keyword" placeholder="组织名称" />
      </search-item>
    </search-area>
    <table-container>
      <template #btns-right>
        <el-button v-if="proxy.hasPerm('/sys/extend/dept/add')" type="primary" :icon="Plus" @click="add">
          新增
        </el-button>
        <el-button :icon="Switch" @click="expandOrCollapse">
          展开/折叠
        </el-button>
      </template>
      <el-table ref="table" v-loading="loading" :data="list" row-key="id" border stripe default-expand-all 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/extend/dept/update') || proxy.hasPerm('/sys/extend/dept/delete')" label="操作" width="140" align="center">
          <template #default="scope">
            <el-button v-if="proxy.hasPerm('/sys/extend/dept/update')" type="primary" text size="small" class="table-text-button" @click="edit(scope.row)">
              修改
            </el-button>
            <el-button v-if="proxy.hasPerm('/sys/extend/dept/delete')" type="primary" text size="small" class="table-text-button" @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </table-container>
    <system-edit-dept ref="editDialog" @close-refresh="search" />
  </app-container>
</template>

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