<template>
  <div class="add-user-container">
    <MOSTY.Assort :title="'人员选择'" />
    <div>
      <el-button class="addbtn" type="primary" @click="add('01')">
        <el-icon>
          <CirclePlus />
        </el-icon>
        <span>新增</span>
      </el-button>
    </div>
    <div style="margin-top: 10px" class="tabbox">
      <el-table :data="userList" border stripe style="width: 100%" :height="tableHeight" :key="keyCount">
        <el-table-column sortable prop="userName" align="center" label="姓名"></el-table-column>
        <el-table-column sortable prop="deptName" align="center" label="部门"></el-table-column>
        <el-table-column sortable align="center" label="操作">
          <template #default="{ row }">
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="delInfo(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 选择用户 -->
  <ChooseUser v-model="isShowUser" :Single="false" :data="memberList" :leaderid="leaderid" @choosedUsers="getSonValue"> </ChooseUser>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, reactive, getCurrentInstance } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue"

const props = defineProps({
  // ids: {
  // 	type: Array,
  // 	default: []
  // },
})
const keyCount = ref(0)
const tableHeight = ref(500)
const emits = defineEmits(["change", "choose"])
/** 显示用户 */
const isShowUser = ref(false)
const leaderid = ref()
/** table列表人员 */
const userList = ref([])
/** 回显人员 */
const memberList = ref([])
const add = () => {
  memberList.value = userList.value?.map(item => {
    return item.id
  })
  isShowUser.value = true
}
// 选择用户
const getSonValue = value => {
  memberList.value = value.map(item => {
    return item.id
  })
  userList.value = value.map(item => {
    return {
      id: item.id,
      userName: item.userName,
      deptName: item.deptName
    }
  })
  emits("change", memberList.value)
  emits("choose", userList.value)
}
//删除表格数据
function delInfo(row) {
  userList.value.forEach((item, index) => {
    if (row.id == item.id) {
      userList.value.splice(index, 1)
    }
  })
  emits("change", memberList.value)
}
</script>

<style lang="scss" scoped>
.add-user-container {
  padding: 0 10px 10px;
}

// .tabbox {
// 	margin-top: 10px;
// }
</style>
