<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<!-- eslint-disable vue/v-on-event-hyphenation -->

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-card>
          <el-input clearable v-model="data.name" />
          <el-tree
            ref="tree"
            style="height: 35rem; overflow: auto"
            class="filter-tree"
            :data="data.treeData"
            default-expand-all
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :props="{ children: 'children', label: 'name' }"
            @node-click="handleNodeClick"
          />
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-form ref="form" :model="data.form" label-width="100px">
          <el-card header="用户列表">
            <el-table
              ref="listTable"
              v-loading="data.loading"
              :data="data.tableData"
              :height="data.tableHeight"
              @selection-change="jigou"
              border
            >
              <el-table-column type="selection" width="40" />
              <el-table-column prop="username" label="mip账号" show-overflow-tooltip />
              <el-table-column prop="name" label="姓名" show-overflow-tooltip />
              <!--
              <el-table-column prop="postName" label="Post Name" show-overflow-tooltip />
              <el-table-column label="Operation" width="200">
                <template #default>

                </template>
              </el-table-column> -->
            </el-table>

            <el-row class="footer-box">
              <!--              <el-col :span="12">-->
              <!--                <el-button type="primary" @click="handleEdit(null);">新增</el-button>-->
              <!--              </el-col>-->
              <el-col :span="12">
                <pagination
                  :total="data.pagination.total"
                  v-model:page="data.pagination.current"
                  v-model:limit="data.pagination.size"
                  @pagination="getPage"
                />
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { treeList, getInfoByGroupId, saveOrUpdate } from '@/api/system/group'
import { reactive, ref } from 'vue'
import { isEmpty } from '@/utils/validate'
import { getUserListByGroupId, listPageApi } from '@/api/system/admin'
import { emit } from 'process'

const data = reactive({
  name: '',
  form: {},
  treeData: [],
  treeDatas: [],
  tableData: [],
  userLisData: [],
  tableHeight: window.innerHeight - 385,
  loading: false,
  baseLoading: false,
  // 分页
  pagination: {
    total: 0,
    size: 20,
    current: 1
  },
  condition: {
    name: null,
    id: null
  },
  // 编辑弹窗显示隐藏
  showEdit: false,
  // 新增数据
  item: {},
  // 部门负责人名称
  userName: ''
})
const showEdit = ref(false)
// watch: {
//   name(val) {
//     this.$refs.tree.filter(val)
//   }
// },
// created() {
//   this.getListTreePage()
// },

const onSubmit = (formName) => {
  data.baseLoading = true

  saveOrUpdate(data.form).then(() => {
    // this.$message.success('操作成功')
    data.baseLoading = false
    getListTreePage()
  })
}

const handleNodeClick = (datas) => {
  console.log(datas)
  if (datas.managerId) {
    datas.managerId = datas.managerId + ''
  }
  data.form = datas

  data.condition.id = datas.id

  listPageApi(
    {},
    {
      total: 0,
      size: 20000,
      current: 1
    }
  ).then((response) => {
    const { current, total, size, records } = response.data
    data.userLisData = records
    if (data.form.managerId) {
      data.form.managerId = data.form.managerId + ''
    }
  })

  // 根据组织架构id获取用户信息
  if (!isEmpty(datas.id)) {
    getUserListByGroupId(datas.id, data.pagination).then((response) => {
      const { current, total, size, records } = response.data
      data.tableData = records
      data.pagination.total = total
      data.pagination.current = current
      data.pagination.size = size
    })
  }
}
const filterNode = (value, data, node) => {
  if (!value) return true
  return findSearKey(node, value)
}
// 递归搜索父级是否包含关键字
const findSearKey = (node, key) => {
  if (node.label.indexOf(key) !== -1) {
    return true
  } else {
    if (node.parent.parent == null) {
      return false
    } else {
      return findSearKey(node.parent, key)
    }
  }
}
const getListTreePage = () => {
  treeList().then((res) => {
    data.treeData = res.data
    const digui = (data, arr = []) => {
      data.map((i) => {
        const { name: label, id: value, ...val } = i
        if (Array.isArray(val.children) && val.children.length) {
          val.children = digui(val.children)
        }
        arr.push({
          ...val,
          value,
          label
        })
      })
      return arr
    }
    data.treeDatas = digui(data.treeData)

    // console.log(treList)
  })
}
getListTreePage()
// 显示新增界面
const handleEdit = (data) => {
  console.log(data)
  data.item = data
  console.log(data.item, 'data.item')
  showEdit.value = true
}
// 关闭新增界面
const closeEdit = () => {
  showEdit.value = false
  data.item = {}
  getListTreePage()
}
const emit = defineEmits(['getPage'])
const jigou = (val) => {
  console.log(val)
  emit('getPage', val[0].username)
}
// 列表数据分页
const getPage = () => {}
// 上级菜单返回参数
const popoverHide = (value, data) => {
  data.form.parentName = data.name
  data.form.parent = value
}
/** 选中部门负责人 */
const userSelect = (data) => {
  data.form.managerId = isEmpty(data) ? '' : data.id
  data.userName = isEmpty(data) ? '' : data.name
}
</script>

<style scoped></style>
