<template>
  <el-form :model="queryParams" inline class="query-form" ref="queryInstance">
    <el-form-item label="部门编码" prop="departmentCode">
      <el-input v-model="queryParams.departmentCode" placeholder="请输入部门编码" clearable></el-input>
    </el-form-item>
    <el-form-item label="部门标志" prop="departmentMark">
      <el-input v-model="queryParams.departmentMark" placeholder="请输入部门标志" clearable></el-input>
    </el-form-item>
    <el-form-item label="部门名称" prop="departmentName">
      <el-input v-model="queryParams.departmentName" placeholder="请输入部门名称" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button color="#DED0B2" @click="getList" :icon="Search">搜索</el-button>
      <el-button @click="handleReset(queryInstance)" :icon="Refresh">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="table-header-btn">
    <el-button color="#DED0B2" @click="handleExpand" :icon="Sort">{{ isExpand ? '全部收起' : '全部展开' }}</el-button>
  </div>
  <el-table
      :data="list"
      ref="tableTree"
      :default-expand-all="isExpand"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="departmentId"
      :lazy="true"
      v-loading="loading"
      @expand-change="expandChange"
      @cell-click="cellClick"
      v-tabh
  >
    <el-table-column prop="departmentMark" label="部门标志"/>
    <el-table-column prop="departmentCode" label="部门编码"/>
    <el-table-column prop="departmentName" label="部门名称"/>
    <el-table-column prop="matrix" label="矩阵审批">
      <template #default="scope">
       <el-tag :type="scope.row.matrix?'success':'danger'"> {{scope.row.matrix?'完备':'缺失'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column prop="oper" label="操作">
      <template #default="{ row }">
        <el-button type="primary" v-perm="['admin:department:update']" link @click="goEdit(row.departmentId)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
import {getDepartmentList} from "@/api/subsidiary";
import { useRouter } from "vue-router";
const queryInstance = ref()
const queryParams = reactive({
  departmentCode: '',
  departmentMark: '',
  departmentName: ''
})
const router = useRouter()
const loading = ref(true)
const isExpand = ref(true)
const list = ref([])
const tableTree = ref()
const cellClick = (row,column) => {
  if ("operation" !== column.property){
    tableTree.value.toggleRowExpansion(row)
  }
}
const handleExpand = () => {
  isExpand.value = !isExpand.value
  expandChange(list.value, isExpand)
  getList()
}
//展开收缩封装函数
const expandChange = (data, isExpansion) => {
  for (let i = 0; i < data.length; i++) {
    tableTree.value.toggleRowExpansion(data[i], isExpansion);
    if (data[i].children !== null) {
      expandChange(data[i].children, isExpansion);
    }
  }
}
const handleReset = (instance) => {
  if (!instance) return
  instance.resetFields()
  getList()
}
const getList =  () => {
  loading.value = true
  getDepartmentList(queryParams).then(res => {
    list.value = res.data
    loading.value = false
  })
}

const goEdit = (id) => {
  router.push({
    name: 'Mosrdeptedit',
    query: {
      id
    }
  })
}
getList()
</script>

<style scoped>

</style>
