<template>
  <el-form :model="queryParams" inline class="query-form" ref="queryInstance">
    <el-form-item label="子公司编码" prop="companyCode">
      <el-input v-model="queryParams.companyCode" placeholder="请输入子公司编码" clearable></el-input>
    </el-form-item>
    <el-form-item label="子公司全称" prop="companyDesc">
      <el-input v-model="queryParams.companyDesc" placeholder="请输入子公司全称" clearable></el-input>
    </el-form-item>
    <el-form-item label="子公司简称" prop="companyName">
      <el-input v-model="queryParams.companyName" 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="subCompanyId"
      :lazy="true"
      v-loading="loading"
      @expand-change="expandChange"
      @cell-click="cellClick"
      v-tabh
  >
    <el-table-column prop="companyDesc" label="子公司全称"/>
    <el-table-column prop="companyCode" label="子公司编码"/>
    <el-table-column prop="companyName" label="	子公司简称"/>
    <el-table-column prop="createTime" label="创建时间"/>
  </el-table>
</template>

<script setup>
import {Search, Refresh,Sort} from "@element-plus/icons-vue";
import {getSubCompanyList} from "@/api/subsidiary";
const queryInstance = ref()
const queryParams = reactive({
  companyCode: '',
  companyDesc: '',
  companyName: ''
})
const loading = ref(true)
const list = ref([])
const tableTree = ref()
const isExpand = ref(true)
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
  getSubCompanyList(queryParams).then(res => {
    list.value = res.data
    loading.value = false
  })
}
getList()
</script>

<style scoped>

</style>
