<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div class="CommonStudent">
    <a-drawer :visible="visiable" class="drawerStyle ProjCheckship CommonStudent" placement="right" width="60%">
      <div class="drawerMain" id="ProjCheckship" style="">
        <div class="header">
          <div class="headerTitle">
            {{ { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[type] || title }}
          </div>
          <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
               @click="closeDrawer"/>
        </div>
        <div style="display: flex; overflow-x: auto; overflow-y: auto">
          <div class="tabs" style="min-width: 800px">
            <a-tabs v-model:activeKey="activeKey">
              <a-tab-pane v-if="isGroup" :key="4" tab="项目内学员1">
                <div :style="{ height: screenHeight - 235 + 'px' }">
                  <div>
                    <a-form-item label="姓名：">
                      <a-input v-model:value="proStudentName" style="width: 260px; height: 40px; border-radius: 8px"
                               placeholder="请输入姓名"/>
                      <a-button type="primary" @click="getStu" style="margin-left: 20px; border-radius: 4px">
                        <template #icon>
                          <SearchOutlined/>
                        </template>
                        搜索
                      </a-button>
                      <a-button @click="getStu" style="margin-left: 20px; border-radius: 4px">重置
                      </a-button>
                    </a-form-item>
                  </div>
                  <div class="tableBox tabb">
                    <a-table style="border: 1px solid #f2f6fe; width: 800px" row-key="id" :columns="stuColumns"
                             :data-source="projectList" :loading="projectListTotal" :pagination="projectPagination"
                             :row-selection="projectRowSelection"/>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane :key="1" tab="快速选人">
                <div :style="{ height: screenHeight - 235 + 'px' }">
                  <div class="tab1">
                    <a-form-item label="姓名">
                      <a-input v-model:value="nameSearch.keyword" style="width: 270px; height: 40px; border-radius: 8px"
                               placeholder="请输入姓名" @change="peopleName"/>
                      <a-button type="primary" @click="onSearchStu" style="margin-left: 20px; border-radius: 4px">
                        <template #icon>
                          <SearchOutlined/>
                        </template>
                        搜索
                      </a-button>
                      <a-button @click="resetStu" style="margin-left: 20px; border-radius: 4px">重置
                      </a-button>
                    </a-form-item>
                  </div>
                  <div class="chooseLeft" style="display: grid; grid-template-columns: 250px auto">
                    <div :style="{
                      height: screenHeight - 180 + 'px',
                      overflowY: 'auto',
                    }" style="border: 1px solid #f0f0f0">
                      <div class="tree" style="margin: 10px 4px 220px 10px">
                        <a-tree allow-clear tree-default-expand-all :tree-data="treeData" :loading="orgLoading"
                                :load-data="onLoadData" v-model:selectedKeys="stuTreeSelectKeys"
                                v-model:expandedKeys="stuTreeExpandedKeys" :fieldNames="{
                            children: 'treeChildList',
                            key: 'id',
                            title: 'name',
                            value: 'name',
                          }" @select="stuStuOrgSelect">
                        </a-tree>
                      </div>
                    </div>
                    <div class="tableBox tabb" style="
                                    margin: 0px 4px 120px 10px;
                                    border: 1px solid #f0f0f0;
                                  ">
                      <a-table :columns="stuColumns" :data-source="stuData" :pagination="stuPagination"
                               :loading="stuLoading" row-key="id" :row-selection="stuRowSelection"/>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane v-if="!selectStu" :key="2" tab="添加组织">
                <div :style="{ height: screenHeight - 235 + 'px' }">
                  <div class="tab2">
                    <a-form-item label="组织：">
                      <a-input v-model:value="searchOrgName.keyword"
                               style="width: 230px; height: 40px; border-radius: 8px" placeholder="请输入组织"
                               @click="orgValue"/>
                      <a-button type="primary" @click="searchOrg" style="margin-left: 20px; border-radius: 4px">
                        <template #icon>
                          <SearchOutlined/>
                        </template>
                        搜索
                      </a-button>
                      <a-button @click="resetOrg" style="margin-left: 20px; border-radius: 4px">重置
                      </a-button>
                    </a-form-item>
                  </div>
                  <div class="boeTree">
                    <a-tree v-model:selectedKeys="selectedOrgKeys"
                            :tree-data="searchOrgName.keyword ? orgData : treeOrgData" @select="onOrgSelectChange"
                            :loading="orgOrgLoading" :load-data="onLoadOrgData" :fieldNames="{
                        children: 'treeChildList',
                        key: 'id',
                        title: 'name',
                        value: 'name',
                      }" row-key="id" :row-selection="orgRowSelection" multiple>
                    </a-tree>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane v-if="!selectStu" :key="3" tab="受众关联">
                <div :style="{ height: screenHeight - 235 + 'px' }">
                  <div>
                    <a-form-item label="受众名称：">
                      <a-input v-model:value="audienceName.keyword"
                               style="width: 260px; height: 40px; border-radius: 8px"
                               placeholder="请输入受众名称"/>
                      <a-button type="primary" @click="searchAudi" style="margin-left: 20px; border-radius: 4px">
                        <template #icon>
                          <SearchOutlined/>
                        </template>
                        搜索
                      </a-button>
                      <a-button @click="resetAudienceInfo" style="margin-left: 20px; border-radius: 4px">重置
                      </a-button>
                    </a-form-item>
                  </div>
                  <div class="tableBox tabb">
                    <a-table style="border: 1px solid #f2f6fe; width: 800px" row-key="id" :columns="audiColums"
                             :data-source="audiData" :loading="audiLoading" :pagination="auditPagination"
                             :row-selection="auditRowSelection"/>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
          <div class="right1" style="min-width: 200px">
            <div class="onerow">
              <div class="onleft">
                <div class="already">已选</div>
              </div>
            </div>
            <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
              <div class="selecteds" v-if="isGroup">
                <div class="person">项目内学员</div>
                <div v-for="(item, i) in selectsData.projectMemberList" :key="i">
                  <div v-if="i < 11">
                    <div class="chose">
                      {{ item.realName }}
                      <div class="ch" @click="memberDel(i)"></div>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="person">
                      <div class="chose">
                        {{ item.realName }}
                        <div class="ch" @click="memberDel(i)"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="!member && selectsData.projectMemberList?.length > 10" class="ifsw">
                  <div @click="member = !member" class="“sw”">查看更多></div>
                </div>
                <div v-if="member && selectsData.projectMemberList?.length > 10" class="ifsw">
                  <div @click="member = !member" class="sw">收起&lt;</div>
                </div>
              </div>
              <div class="selecteds">
                <div class="person">快速选人</div>
                <div v-for="(item, i) in selectsData.studentList" :key="i">
                  <div v-if="i < 11">
                    <div class="chose">
                      {{ item.realName }}
                      <div class="ch" @click="stuDel(i)"></div>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="person">
                      <div class="chose">
                        {{ item.realName }}
                        <div class="ch" @click="stuDel(i)"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="!person && selectsData.studentList.length > 10" class="ifsw">
                  <div @click="person = !person" class="“sw”">查看更多></div>
                </div>
                <div v-if="person && selectsData.studentList.length > 10" class="ifsw">
                  <div @click="person = !person" class="sw">收起&lt;</div>
                </div>
              </div>
              <div v-if="!selectStu" class="selecteds">
                <div class="dept">添加组织</div>
                <div v-for="(item, i) in selectsData.deptList" :key="i">
                  <div v-if="i < 11">
                    <div class="chose1">
                      <div class="span">{{ item.name }}</div>
                      <div class="ch1" @click="orgDel(i)" style="cursor: pointer;"></div>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="dept">
                      <div class="chose1">
                        <div class="span">{{ item.name }}</div>
                        <div class="ch1" @click="orgDel(i)"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="!dept && selectsData.deptList.length > 10" class="ifsw">
                  <div @click="dept = !dept" class="“sw”">查看更多></div>
                </div>
                <div v-if="dept && selectsData.deptList.length > 10" class="ifsw">
                  <div @click="dept = !dept" class="sw">收起&lt;</div>
                </div>
              </div>
              <!--受众-->
              <div v-if="!selectStu" class="selecteds">
                <div class="group">受众关联</div>
                <div v-for="(item, i) in selectsData.groupList" :key="i">
                  <div v-if="i < 11">
                    <div class="chose2">
                      <div class="span">{{ item.audienceName }}</div>
                      <div class="ch2" @click="AuditDel(i)"></div>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="group">
                      <div class="chose2">
                        <div class="span">{{ item.audienceName }}</div>
                        <div class="ch2" @click="AuditDel(i)"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="!group && selectsData.groupList.length > 10" class="ifsw">
                  <div @click="group = !group" class="“sw”">查看更多></div>
                </div>
                <div v-if="group && selectsData.groupList > 10" class="ifsw">
                  <div @click="group = !group" class="sw">收起&lt;</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btnn">
          <button class="btn1" @click="closeDrawer">取消</button>
          <button class="btn2" @click="submitAuth">确定</button>
        </div>
      </div>
    </a-drawer>
    <a-button @click="openDrawer" type="link">
      <slot></slot>
    </a-button>
  </div>
  <a-modal :style="{ padding: 0, position: relative, right: '-20%' }" :closable="true" :visible="stageVisible"
           :footer="null" centered="true" @ok="handleStageOk" wrapClassName="changeModal">
    <div class="con">
      <div class="header">
        <div class="inhe">
          <div class="tz">{{ type === 1 ? "选择阶段" : "添加学员到关卡" }}</div>
          <div class="mg" @click="closeChangeModal"></div>
        </div>
      </div>
      <div class="mid">
        <div class="inher">
          <!-- <div class="cur">当前关卡：关卡2</div> -->
          <div class="select">
            <a-select style="width: 400px" :placeholder="type === 1 ? '选择阶段' : '选择关卡'"
                      v-model:value="selectsData.stageId"
                      className="cus-select">
              <a-select-option v-for="(item, i) in stageIds" :key="i" :value="item.id">{{ item.name || "默认" }}
              </a-select-option>
            </a-select>
          </div>
          <span style="color: #999999; margin-left: 10px"><minus-circle-outlined/>已在其他关卡的学员，不会被添加到该关卡</span>
          <div class="btn" style="margin-top: 50px">
            <button class="sameb btn1" @click="closeChangeModal" style="cursor: pointer">
              取消
            </button>
            <button class="sameb btn2" @click="handleDialogOk" style="cursor: pointer">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import {message} from "ant-design-vue";
import {computed, defineEmits, defineProps, ref, watch} from "vue";
import {boeRequest, useBoeApi, useBoeApiPage} from "@/api/request";
import {
  AUDIENCE_LIST,
  ORG_CHILD_LIST,
  ORG_LIST,
  // USER_LIST,
  USER_LIST_PAGE,
} from "@/api/ThirdApi";
import {
  saveStu,
  //  addGroupMember,
  getStuPage,
} from "@/api/index1";
import dialog from "@/utils/dialog";
// import { getProjStu } from "@/api/indexProjStu";
const emit = defineEmits({});
const props = defineProps({
  type: Number,
  id: String,
  title: {
    type: String,
    default: "",
  },
  clear: {
    type: Boolean,
    default: false,
  },
  selectStu: {
    type: Boolean,
    default: false,
  },
  selectOne: {
    type: Boolean,
    default: false,
  },
  stage: {
    type: Array,
    default: () => [],
  },
  isGroup: {
    type: Boolean,
    default: false,
  },
  projectId: {
    type: Number,
    default: null,
  },
  groupId: {
    type: Number,
    default: null,
  },
  groupName: {
    type: String,
    default: null,
  },
  groupMemberCount: {
    type: Number,
    default: null,
  },
  groupMemberNumber: {
    type: Number,
    default: null,
  },
  activeKey1: {
    type: String,
    default: null,
  },
});
console.log("props.activeKey1" + props.activeKey1);
// 获取项目学员;
const procurrentPage = ref(1);
const projectList = ref([]);
const proStudentName = ref("");
const projectListTotal = ref(-1);
const projectPageSize = ref(10);
const projectSelectKeys = ref([]);
const member = ref(false);
const projectPagination = computed(() => ({
  total: projectListTotal.value,
  showSizeChanger: false,
  current: procurrentPage.value,
  pageSize: projectPageSize.value,
  onChange: projectChangePagination,
}));
const projectRowSelection = computed(() => ({
  columnWidth: 20,
  selectedRowKeys: projectSelectKeys.value,
  onChange: onProjectSelectChange,
  preserveSelectedRowKeys: true,
}));
const getStu = () => {
  let obj = {
    studentName: proStudentName.value,
    pageNo: procurrentPage.value,
    pageSize: 10,
    pid: props.id,
    type: props.type
  };
  projectListTotal.value = -1;
  console.log("获取项目学员", obj);
  getStuPage(obj).then((res) => {
    console.log("获取项目学员", res);
    let arr = res.data.data.records;
    let array = [];
    arr.map((value) => {
      let obj = {
        id: value.studentId,
        studentId: value.studentId,
        realName: value.studentName,
        userNo: value.studentUserNo,
        isLeader: value.isLeader,
        groupId: value.groupId,
        orgName: value.studentOrgName ? value.studentOrgName : "-",
        departName: value.studentDepartName ? value.studentDepartName : "-",
      };
      array.push(obj);
    });
    projectList.value = array;
    projectListTotal.value = res.data.data.total;
  });
};
getStu();
const projectChangePagination = (page) => {
  procurrentPage.value = page;
  getStu();
};

function onProjectSelectChange(e, l) {
  console.log("eeeee", e, l);
  projectSelectKeys.value = e;
  selectsData.value.projectMemberList = l;
}

function memberDel(i) {
  projectSelectKeys.value = projectSelectKeys.value.filter(
    (e) => e !== selectsData.value.projectMemberList[i].id
  );
  selectsData.value.projectMemberList.splice(i, 1);
}

const person = ref(false);
// const dept =ref(false)
const group = ref(false);
const visiable = ref(false);
const activeKey = ref(props.isGroup ? 4 : 1);
// const activeKey = ref(1);
const stageVisible = ref(false);
const selectsData = ref({
  stageId: "",
  studentList: [],
  deptList: [],
  groupList: [],
  projectMemberList: [],
});
const nameSearch = ref({
  keyword: "",
  departId: null,
  page: 1,
  pageSize: 10,
});
const stuTreeSelectKeys = ref([]);
const stuTreeExpandedKeys = ref([]);
const audienceName = ref({
  keyword: "",
  page: 1,
  pageSize: 10,
});
const searchOrgName = ref({
  keyword: "",
  page: 1,
  pageSize: 10,
});
const stageIds = computed(() => props.stage);
const {
  data: stuData,
  page: stuPageNo,
  fetch: searchStu,
  pageSize: stuPageSize,
  loading: stuLoading,
  total: stuTotal,
  reset: stuReset,
} = useBoeApiPage(USER_LIST_PAGE, nameSearch.value, {
  init: false,
  result: (res) => res.result.userInfoList,
  totalPage: (res) => res.result.totalPage,
  total: (res) => res.result.totalElement,
});
const { data: orgData, fetch: searchOrg } = useBoeApiPage(
  ORG_LIST,
  searchOrgName.value
);
const { data: treeData, loading: orgLoading } = useBoeApi(
  ORG_LIST,
  { keyword: "" },
  {
    init: true,
    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
  }
);
const { data: treeOrgData, loading: orgOrgLoading } = useBoeApi(
  ORG_LIST,
  { keyword: "" },
  {
    init: true,
    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
  }
);

const {
  data: audiData,
  fetch: searchAudi,
  page: audiPageNo,
  pageSize: audiPageSize,
  loading: audiLoading,
  total: audiTotal,
  reset: auditReset,
} = useBoeApiPage(AUDIENCE_LIST, audienceName.value, {
  init: true,
  result: (res) =>
    res.result.audienceList.map((e) => ({ ...e, id: e.id + "" })),
  totalPage: (res) => res.result.totalPage,
  total: (res) => res.result.totalElement,
});
const stuColumns = ref([
  {
    title: "姓名",
    dataIndex: "realName",
    key: "realName",
    width: 80,
    align: "center",
    className: "h",
    ellipsis: true,
  },
  {
    title: "工号",
    dataIndex: "userNo",
    key: "userNo",
    width: 80,
    align: "center",
    className: "h",
    ellipsis: true,
  },
  {
    title: "归属组织",
    dataIndex: "orgName",
    key: "orgName",
    width: 80,
    align: "center",
    className: "h",
    ellipsis: true,
  },
  {
    title: "部门",
    dataIndex: "departName",
    key: "departName",
    width: 80,
    align: "center",
    className: "h",
    ellipsis: true,
  },
]);
const audiColums = ref([
  {
    title: "受众名称",
    dataIndex: "audienceName",
    key: "audienceName",
    width: 30,
    align: "left",
    className: "h",
    ellipsis: true,
  },
  {
    title: "人数",
    dataIndex: "totalMember",
    key: "totalMember",
    width: 30,
    align: "center",
    className: "h",
  },
  {
    title: "类型",
    dataIndex: "audienceType",
    key: "audienceType",
    width: 40,
    align: "center",
    className: "h",
  },
]);
const stuSelectKeys = ref([]);
const orgSelectKeys = ref([]);
const auditSelectKeys = ref([]);
const screenHeight = ref(document.body.clientHeight);
//const screenWidth = ref(document.body.clientWidth);
const stuRowSelection = computed(() => ({
  type: props.selectOne ? "radio" : "checkbox",
  columnWidth: 20,
  selectedRowKeys: stuSelectKeys.value,
  onChange: onStuSelectChange,
  preserveSelectedRowKeys: true,
}));
const orgRowSelection = computed(() => ({
  columnWidth: 20,
  selectedRowKeys: orgSelectKeys.value,
  onChange: onOrgSelectChange,
  preserveSelectedRowKeys: true,
}));
const stuPagination = computed(() => ({
  total: stuTotal.value,
  showSizeChanger: false,
  current: stuPageNo.value,
  pageSize: stuPageSize.value,
  onChange: changePagination,
}));
const auditPagination = computed(() => ({
  total: audiTotal.value,
  showSizeChanger: false,
  current: audiPageNo.value,
  pageSize: audiPageSize.value,
  onChange: auditChangePagination,
}));
const auditRowSelection = computed(() => ({
  columnWidth: 20,
  selectedRowKeys: auditSelectKeys.value,
  onChange: onAuditSelectChange,
  preserveSelectedRowKeys: true,
}));
const closeDrawer = () => {
  deleteDepSelect();
  visiable.value = false;
  stuData.value = [];
  nameSearch.value.keyword = "";
  selectedOrgKeys.value = [];
};

function onLoadData(treeNode) {
  return boeRequest(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
    (r) => {
      treeNode.dataRef.treeChildList = r.result.directChildList;
      treeData.value = [...treeData.value];
    }
  );
}

function onLoadOrgData(treeNode) {
  return boeRequest(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
    (r) => {
      treeNode.dataRef.treeChildList = r.result.directChildList;
      treeOrgData.value = [...treeOrgData.value];
    }
  );
}

const closeChangeModal = () => {
  stageVisible.value = false;
};
const openDrawer = () => {
  visiable.value = true;
};
//获取组织树
// const treeData = computed(() => {
//   return store.state.orgtreeList ? store.state.orgtreeList : [];
// });

function onSearchStu() {
  nameSearch.value.page = 1;
  searchStu();
}

function stuStuOrgSelect(e) {
  nameSearch.value.departId = e.join("");
  searchStu();
}

function stuDel(i) {
  stuSelectKeys.value = stuSelectKeys.value.filter(
    (e) => e !== selectsData.value.studentList[i].id
  );
  selectsData.value.studentList.splice(i, 1);
}

const selectedOrgKeys = ref([]);

watch(selectedOrgKeys, () => {
  console.log("selectedKeys", selectedOrgKeys);
});

function orgDel(i) {
  console.log(selectedOrgKeys.value);
  orgSelectKeys.value = orgSelectKeys.value.filter(e => e !== selectsData.value.deptList[i].id);
  selectedOrgKeys.value.splice(i, 1);
  selectsData.value.deptList.splice(i, 1);
}

function AuditDel(i) {
  auditSelectKeys.value = auditSelectKeys.value.filter(
    (e) => e !== selectsData.value.groupList[i].id
  );
  selectsData.value.groupList.splice(i, 1);
}

// function orgSelect(key, obj) {
// console.log(obj)
//request(ORG_CHILD_LIST, {orgId: null}).then(res => {
//console.log(res.result)
//})
//}
function onStuSelectChange(e, l) {
  stuSelectKeys.value = e;
  selectsData.value.studentList = l;
}

function onOrgSelectChange(e, l) {

  orgRowSelection.value = e;
  selectsData.value.deptList = l.selectedNodes;

  // 获取被点击的树节点

}

function onAuditSelectChange(e, l) {
  auditSelectKeys.value = e;
  selectsData.value.groupList = l;
}

// const stuDepartmentSelect = (e) => {
//   nameSearch.value.orgId = e.join('')
//   searchStu()
// };
//分页获取学员
const changePagination = (page) => {
  nameSearch.value.page = page;
  searchStu();
};
const auditChangePagination = (page) => {
  audienceName.value.page = page;
  searchAudi();
};

//重置
function peopleName(name) {
  console.log("people-name", name.target.value);
  nameSearch.value.keyword = name.target.value;
}

const resetStu = () => {
  // deleteDepSelect();
  nameSearch.value.keyword = "";
  nameSearch.value.page = 1;
  nameSearch.value.pageSize = 10;
  nameSearch.value.departId = null;
  stuTreeExpandedKeys.value = [];
  stuTreeSelectKeys.value = [];
  stuReset();
};
//清空选择部门信息
const deleteDepSelect = () => {
  stuSelectKeys.value = [];
  selectedOrgKeys.value = [];
  projectSelectKeys.value = [];
};
//重置组织
const resetOrg = () => {
  searchOrgName.value = { keyword: "", page: 1, pageSize: 10 };
};
//重置受众
const resetAudienceInfo = () => {
  audienceName.value.keyword = "";
  audienceName.value.page = 1;
  audienceName.value.pageSize = 10;
  auditReset();
  searchAudi();
};
//全部清除
// const deleteAll = () => {
//   selectsData.value = {
//     studentList: [],
//     deptList: [],
//     groupList: []
//   }
// };
//确定添加授权
const submitAuth = () => {
  if (props.type === 2) {
    stageVisible.value = true;
  } else {
    handleDialogOk();
  }
};

function handleDialogOk() {
  if (selectsData.value.groupList.length || selectsData.value.deptList.length) {
    dialog({ content: "您选择了组织或受众，此添加为异步添加，请稍后手动刷新学员！", ok: handleStageOk });
    return;
  }
  handleStageOk();
}

function handleStageOk() {
  // 判断添加人数是否已超过限制人数 限制 = 本次添加的人 + 原有的人
  if (props.type === 1) {
    if (props.groupMemberCount !== null) {  // 只有添加组员的时候判断
      let selectMember = 0;
      if (activeKey.value === 4) { // 项目内选人
        selectMember = selectsData.value.projectMemberList.length;
        // 对选中的人员进行判断是否已经分组了
        let haveGroupNum = selectsData.value.projectMemberList.filter(item => item.groupId !== null);
        if (haveGroupNum.length > 0) {
          message.warning("部分学员已经有小组，再次添加会被添加到当前小组.");
        }
        // 判断是否是组长，组长不能添加
        const leaderArray = selectsData.value.projectMemberList.filter(item => item.isLeader === "1");
        if (leaderArray.length > 0) {
          return message.warning("当前选中学员" + leaderArray[0].realName + "已是小组长，请勿重复选择。");
        }
      } else if (activeKey.value === 1) {
        selectMember = selectsData.value.studentList.length;


      } else if (activeKey.value === 2) {
        selectMember = selectsData.value.groupList.length;
      } else if (activeKey.value === 3) {
        selectMember = selectsData.value.deptList.length;
      }


      if (props.groupMemberCount < selectMember + Number(props.groupMemberNumber)) {
        return message.warning("添加小组学员超过最大值");
      }


    }
  }
  stageVisible.value = false;
  visiable.value = false;
  emit("finash", false);
  nameSearch.value.keyword = "";
  saveStu({
    targetId: props.id,
    type: props.type,
    clear: props.clear,
    deptIds: selectsData.value.deptList?.map((e) => e.id),
    stageId: selectsData.value.stageId,
    groupIds: selectsData.value.groupList?.map((e) => e.id),
    studentList: selectsData.value.studentList.concat(
      selectsData.value.projectMemberList
    ),
    groupName: props.groupName,
    groupId: props.groupId,
  }).then(() => {
    deleteDepSelect();
    emit("finash", true);
  });
  // //添加小组学员
  // if (props.isGroup) {
  //   console.log("添加组员传参", selectsData.value, {
  //     groupId: props.groupId,
  //     pid: props.projectId,
  //     groupName: props.groupName,
  //     ids: selectsData.value.studentList?.map((e) => e.id),
  //   });
  //   addGroupMember({
  //     groupId: props.groupId,
  //     pid: props.projectId,
  //     groupName: props.groupName,
  //     studentIds: selectsData.value.studentList?.map((e) => e.id),
  //   })
  //     .then((res) => {
  //       console.log("添加小组学员", res);
  //       deleteDepSelect();
  //       emit("finash", true);
  //     })
  //     .catch((err) => {
  //       console.log("添加小组学员失败", err);
  //     });
  // } else {

  // }
}

// 搜索受众值发生变化
function orgValue(value) {
  console.log("", value.target.value);
  searchOrgName.value.keyword = value.target.value;
}

watch(visiable, () => {
  stuSelectKeys.value = [];
  orgSelectKeys.value = [];
  auditSelectKeys.value = [];
  audienceName.value.keyword = "";
  audienceName.value.page = 1;
  audienceName.value.pageSize = 10;
  nameSearch.value.departId = null;
  stuTreeExpandedKeys.value = [];
  stuTreeSelectKeys.value = [];
  activeKey.value = props.isGroup ? 4 : 1;
  // activeKey.value = 1;
  selectsData.value = {
    stageId: "",
    studentList: [],
    deptList: [],
    groupList: [],
    projectMemberList: [],
  };
  stuReset();
  auditReset();

  searchAudi();
});
</script>
<style lang="scss">
.CommonStudent {
  .ant-btn-primary {
    background-color: #4ea6ff !important;
  }

  .cus-select {
    height: 40px;
    border-radius: 8px;
  }

  .tableBox .ant-table-row .ant-table-cell {
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    color: #4f5156;
    line-height: 29px;
    padding: 0px;
  }

  .tableBox .ant-table-thead tr th {
    font-size: 14px;
  }

  .ant-tabs-tabpane {
    height: 100%;
  }

  .ant-tabs {
    overflow: visible;
  }

  .right1 {
    border-left: 1px solid #f2f6fe;
    margin-left: 20px;

    .onerow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 40px;
      flex-wrap: wrap;

      width: 100%;

      .onleft {
        display: flex;
        text-align: center;

        .already {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
          margin-left: 32px;
          white-space: nowrap;
          // margin-bottom: 20px;
        }

        .count {
          color: #4ea6ff;
          font-size: 16px;
          margin: 0 6px;
        }

        .peo {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
        }
      }

      .clbox {
        margin-right: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 104px;
        height: 32px;
        border-radius: 4px;
        background: #4ea6ff;

        .colose {
          width: 16px;
          height: 16px;
          // border-radius: 8px;
          // background: #ffffff;
          // position: relative;
          background-image: url(../../assets/images/basicinfo/ch.png);
          background-size: 100%;
          margin-right: 4px;
        }

        .allclear {
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
        }
      }
    }

    .selecteds {
      display: flex;
      flex-wrap: wrap;
      margin-left: 32px;

      .person {
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid #f2f6fe;
      }

      .chose {
        width: 64px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .ch {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .ifsw {
        display: flex;
        align-items: end;
        justify-content: center;
        color: #4ea6ff;
      }

      .sw {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: justify;
        color: #4ea6ff;
        margin-top: 23px;
        margin-left: 10px;
      }

      .dept {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose1 {
        //width: 90px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch1 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .group {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose2 {
        //width: 120px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch2 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }
    }
  }
}
</style>
