<!-- 选择成员 -->
<script setup>
import { computed, getCurrentInstance, onMounted, reactive, ref, watch } from 'vue'
import { getUserList } from '@/api/system/user'
import { getDeptTreeList } from '@/api/system/dept'

import { toTreeList } from '@/utils/structure'
import SearchArea from '@/components/SearchArea/index.vue'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits(['update:visible', 'change'])
const table = ref()
// 树配置
const defaultProps = {
  children: 'children',
  label: 'name',
}
const select = ref()
// 表格表头
const columns = [
  // { text: '账号', value: 'account', align: 'center' },
  { text: '真实姓名', value: 'name', align: 'center' },
  { text: '所在组织机构', value: 'deptName', align: 'center' },
  // { text: '角色', value: 'roleName', align: 'center' },
  // { text: '手机号', value: 'phone', align: 'center' },
  // { text: '注册时间', value: 'createtime', align: 'center' },
]
// 表格数据
const list = ref([])
// 组织机构树数据
const treeData = ref([])
const tagNames = { 已冻结: 'danger', 启用: 'success' }

const loading = ref(false)
const total = ref(0)
// 查询参数
const listQuery = reactive({
  keywords: '',
  beginTime: '',
  endTime: '',
  deptId: '',
  offset: 1,
  limit: 10,
  sort: 'id',
  deptType: '',
})
const { proxy } = getCurrentInstance()
const checkedList = ref([])
// 多选的数据
const multipleTable = ref([])
const closeDialog = () => {
  emits('update:visible', false)
}
const visibleDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    closeDialog()
  },
})
watch(() => props.visible, (val) => {
  if (!val) {
    console.log(table.value)
    table.value.clearMulti()
  }
})
const saveDialog = () => {
  const checkedList = multipleTable.value.map(item => ({
    ...item,
    type: 2, // type是啥
    // targetId: item.roleId,
    // name: item.roleName,
    targetId: item.id,
    name: item.name,
  }))
  emits('change', checkedList)
}

// 获取列表数据
const fetchData = (flag) => {
  select.value = ''
  getUserList(listQuery).then((res) => {
    list.value = res.data.rows
    total.value = res.data.total
  })
}
// 点击树形结构
const handleNodeClick = (data) => {
  listQuery.deptId = data.id
  fetchData('click')
}
// 多选
const multiSelect = (val) => {
  console.log('多选成员')
  console.log(val)
  multipleTable.value = val
}
// 获取组织列表树数据
const fetchTreeData = () => {
  getDeptTreeList(listQuery).then((res) => {
    treeData.value = toTreeList<TreeStructure>(res.data, '0', true)
  }).catch(() => {
  })
}
// 查询数据
const search = () => {
  fetchData('search')
}
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val) => {
  if (val && val.size) {
    listQuery.limit = val.size
  }
  if (val && val.page) {
    listQuery.offset = val.page
  }
  fetchData('')
}
onMounted(() => {
  // 获取树形结构数据
  // fetchTreeData()
  // 获取列表数据
  fetchData('click')
})
</script>

<template>
  <div class="select-emplotees-dialog">
    <el-dialog v-model="visibleDialog" title="选择成员" max-width="80%" append-to-body custom-class="chengyuan-dialog promoter_person">
      <!-- <div class="person_body clear chengyuan"> -->
      <!-- 左侧组织机构 -->
      <!-- <div class="left-container">
        <div style="height: 100%;">
          <el-card class="box-card" shadow="always">
            <template #header>
              <div class="clearfix">
                <span>组织机构</span>
              </div>
            </template>
            <el-tree
              :data="treeData" :props="defaultProps" default-expand-all
              :expand-on-click-node="false" @node-click="handleNodeClick"
            />
          </el-card>
        </div>
      </div> -->
      <!-- 右侧表格 -->
      <div ref="tableContainer" class="table-area">
        <!-- 筛选条件 -->
        <search-area @search="search">
          <search-item>
            <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
          </search-item>
        </search-area>
        <!-- 表头标题 -->
        <table-container>
          <!-- 查询结果Table显示 -->
          <normal-table
            ref="table"
            :data="list" :total="total" :columns="columns" :query="listQuery"
            :list-loading="loadingTable" :is-showmulti-select="true" @change="changePage" @multiSelect="multiSelect"
          >
            <template #preColumns>
              <el-table-column label="#" width="55" align="center">
                <template #default="scope">
                  {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
                </template>
              </el-table-column>
            </template>
            <template #columns>
              <el-table-column label="状态" align="center" width="80">
                <template #default="scope">
                  <el-tag :type="(tagNames)[scope.row.statusName]">
                    {{ scope.row.statusName }}
                  </el-tag>
                </template>
              </el-table-column>
            </template>
          </normal-table>
        </table-container>
      </div>
      <!-- </div> -->
      <template #footer>
        <el-button @click="closeDialog">
          取 消
        </el-button>
        <el-button type="primary" @click="saveDialog">
          确 定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
@import "@/css/dialog.css";

.chengyuan-dialog {
  .el-table .cell {
    white-space: nowrap;
  }

  .el-dialog__body {
    display: flex;
    overflow: auto;
  }
}
</style>

<style lang="scss" scoped>
.chengyuan-dialog {
  width: 100%;

  .left-container {
    white-space: nowrap;
    height: 100%;
    // width: 22%;
  }

  .table-area {
    // width: 78%;
    flex: 1;
    overflow: auto;

    .pagination {
      margin-top: 10px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>