<template>
  <el-row>
    <!-- 表格头部 -->
    <el-row class="mb-20">
      <span class="list-title">
        组织管理
        <!-- <Lookicon v-if="filterButton('lookicon')" ref="Lookicon" :look-status="searchParams.lookStatus" @changeLook="changeLook" /> -->
      </span>
      <!-- <el-button v-if="isExpand" @click="handleexpand(list,false)">全部收起</el-button>
      <el-button v-else @click="handleexpand(list,true)">全部展开</el-button> -->
      <el-button v-if="filterButton('dept_add')" type="primary" :loading="global.loading" @click="$emit('rowOperation', {}, -1, 'add')">新增</el-button>
      <!-- <el-button v-if="filterButton('export')" :loading="global.loading" @click="exportExcel">导出</el-button> -->
    </el-row>
    <!-- 表格内容 -->
    <TableElement
      ref="divisionTable"
      row-key="id"
      :max-show="4"
      :table-data="list"
      :colum-obj="columObj"
      :page-obj="pageObj"
      :loading="global.loading"
      v-bind="$attrs"
      :tree-props="{ children: 'children' }"
      @rowOperation="rowOperation"
      @selectionChange="selectionChange"
      @getList="getList()"
    />
  </el-row>
</template>
<script>
import TableElement from '@/components/ElmTable/index.vue'
import request from '@/utils/request'
import { deepClone } from '@/utils'

export default {
  components: { TableElement },
  inject: ['global'],
  props: {
    treeIds: { // 侧边栏
      type: String,
      default: ''
    },
    searchParams: { // 搜索栏
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 是否默认展开
      isExpand: false,
      list: [], // 数据
      selectedList: [], // 选中的数据
      pageObj: { // 分页配置
        page: 1,
        size: 10,
        total: 0,
        pageNum: 0
      },
      columObj: {
        lazy: 'true',
        columnData: [
          { text: true, prop: 'name', label: '组织名称', minwidth: '90' },
          { ownDefined: true, prop: 'parentName', label: '上级组织', minwidth: '90', ownDefinedReturn: row => row.parentName || '--' },
          { ownDefined: true, prop: 'remark', label: '备注', minwidth: '160', ownDefinedReturn: row => row.remark || '--' },
          {
            isOperation: true, prop: 'operation', label: '操作', minwidth: '160', fixed: 'right', tooltip: false,
            operation: [
              { operation: 'seeDetail', type: 'text', label: '查看', isShow: () => this.filterButton('dept_see') || this.isAdmin },
              { operation: 'edit', type: 'text', label: '编辑', isShow: () => (this.filterButton('dept_edit') || this.isAdmin) },
              { operation: 'delete', type: 'text', label: '删除', isShow: (row) => (this.filterButton('dept_delete') || this.isAdmin) },
              { operation: 'addChild', type: 'text', label: '新增子组织', isShow: () => this.filterButton('dept_addChild') || this.isAdmin }
            ]
          }
        ]
      }
    }
  },
  methods: {
    async getList(params) { // 表格数据 - 获取
      this.global.loading = true
      if (params != null) this.searchParams = params
      try {
        // TODO: 获取数据
        // const { data } = { data: { records: [{ name: 'test' }], pages: 1, total: 1 }}
        const { data } = await request('/sys/dept/tree', { params: this.genQuery() })
        // const { data } = await getInvitationPage(this.genQuery())
        this.list = this.filterTabledata(data)
      } finally {
        this.global.loading = false
      }
    },
    filterTabledata(list) { // 表格数据 - 过滤
      return list.map(item => ({
        ...item
        // TODO: 表格数据展示是否要转换（看情况）
      }))
    },
    async exportExcel() { // 导出
      this.global.loading = true
      try {
        // TODO: 导出接口
        const res = await request('/tuserlists/userExport', { params: this.genQuery() })
        // const res = await exportExchangeOrder(this.genQuery())
        this.downloadExcel(res)
      } finally {
        this.global.loading = false
      }
    },
    genQuery() { // 产生最终参数
      const query = this.filterSearchParams() // 分页 & 查询
      return query
    },
    filterSearchParams() { // 查询字段过滤（请求数据过滤查询不影响原数据）
      // 复制一份
      const params = deepClone(this.searchParams)
      // 自定义部分
      // TODO: 搜索数据过滤
      // if (this.searchParams.timerange?.length) {
      //   params['starttime'] = this.searchParams.timerange[0]
      //   params['endtime'] = this.searchParams.timerange[1]
      //   delete params.timerange
      // }
      // 过滤空数据
      Object.entries(params).forEach(([key, val]) => {
        if (val == null || val === '') delete params[key]
      })
      return params
    },
    rowOperation(row, idx, actionName) { // 行操作
      console.log(actionName, row)
      this.$emit('rowOperation', row, idx, actionName)
    },
    selectionChange(list) { // 行选择
      this.selectedList = list
    },
    changeLook(e) {
      this.searchParams.lookStatus = e
      this.getList()
    },
    // 全部展开或折叠
    handleexpand(data, val) {
      this.isexpendall(data, val)
      this.isExpand = !this.isExpand
    },
    isexpendall(data, val) {
      data.forEach(ele => {
        this.$refs.divisionTable.toggleRowExpansion(ele, val)
        if (ele.children.length != 0) {
          this.isexpendall(ele.children, val)
        }
      })
    },
  }
}
</script>

<style scoped>

</style>
