<!-- eslint-disable vue/no-parsing-error -->
<!-- eslint-disable vue/require-v-for-key -->
<template>
  <div>
    <a-drawer
        :visible="visiable"
        class="drawerStyle ProjCheckship"
        placement="right"
        width="60%"
    >
      <div class="drawerMain" id="ProjCheckship">
        <div class="header">
          <div class="headerTitle">
            {{ {1: '添加学员', 2: '添加学员', 3: '添加学员'}[type] || '' }}
          </div>
          <img
              style="width: 29px; height: 29px; cursor: pointer"
              src="../../assets/images/basicinfo/close.png"
              @click="closeDrawer"
          />
        </div>
        <div style="width:100%;display: grid;grid-template-columns: 750px auto;">
          <div class="tabs" style="min-height:800px;">
            <a-tabs v-model:activeKey="activeKey">
              <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="请输入姓名"
                      />
                      <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"
                            :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 :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="请输入组织"-->
              <!--                      />-->
              <!--                      <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-->
              <!--                        :tree-data="searchOrgName.keyword ? orgData : treeData"-->
              <!--                        @select="onOrgSelectChange"-->
              <!--                        :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 :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"
                        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">
            <div class="onerow">
              <div class="onleft">
                <div class="already">已选</div>

              </div>

            </div>
            <div
                class="selecteds"
                :style="{ 'max-height': screenHeight - 235 + 'px' }"
                style="overflow-y: auto"
            >
              <div class="person">快速选人</div>
              <div v-for="(item,i) in selectsData.studentList">
                <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  class="dept">添加组织</div>-->
              <!--          <div v-for="(item,i) in selectsData.deptList"  >-->
              <!--            <div v-if="i<11">-->
              <!--            <div class="chose1">-->
              <!--              <div class="span"> {{ item.name }}</div>-->
              <!--              <div class="ch1" @click="orgDel(i)"></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 class="group">受众关联</div>
              <div v-for="(item,i) in selectsData.groupList">
                <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 style="padding:100px 0 0 20px;display: grid;grid-template-rows: auto auto auto;">
             <div>
               <div style="margin-top: 20px">快速选人</div>
               // eslint-disable-next-line vue/require-v-for-key
               <div v-for="(item,i) in selectsData.studentList" >

               <a-tag v-if="i < 10" :closable="true" color="#4ea6ff" @close="stuDel(i)"
                      :key="i" style="margin-top:20px">
                 {{ item.realName }}
               </a-tag>
               <a-tag v-else :closable="true" color="#4ea6ff" @close="stuDel(i)"
                       style="margin-top:20px">
                 {{ item.realName }}
               </a-tag>

               <div></div>
             </div>
             </div>
             <div>
               <div style="margin-top: 20px">组织添加</div>
               <a-tag :closable="true" color="#4ea6ff" @close="orgDel(i)" v-for="(item,i) in selectsData.deptList"
                      :key="i"
                      style="margin-top:20px">
                 {{ item.name }}
               </a-tag>
             </div>
             <div>
               <div style="margin-top: 20px">受众添加</div>
               <a-tag :closable="true" color="#4ea6ff" @close="AuditDel(i)" v-for="(item,i) in selectsData.groupList"
                      :key="i" style="margin-top:20px">
                 {{ item.audienceName }}
               </a-tag>
             </div>
           </div>-->
        </div>
        <div class="btnn">
          <button class="btn1" @click="closeDrawer">取消</button>
          <button class="btn2" @click="submitAuth">确定</button>
        </div>
      </div>
    </a-drawer>
    <div @click="openDrawer">
      <slot></slot>
    </div>
  </div>
  <a-modal v-model:visible="stageVisible" width="1000px" title="选择阶段" @ok="handleStageOk">
    <div>
      {{ type === 1 ? '选择阶段' : '选择关卡' }}
      <a-select style="width: 150px" :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>
  </a-modal>
</template>
<script setup>
import {computed, defineEmits, defineProps, ref, watch} from "vue";
import {useStore} from "vuex";
import {useBoeApiPage} from "@/api/request";
import {AUDIENCE_LIST, USER_LIST} from "@/api/ThirdApi";
import {saveStu} from "@/api/index1";

const store = useStore();
const emit = defineEmits({})
const props = defineProps({
  type: Number,
  id: String,
  stage: {
    type: Array,
    default: () => []
  }
})
const person = ref(false)
// const dept =ref(false)
const group = ref(false)
const visiable = ref(false)
const activeKey = ref(1)
const stageVisible = ref(false)
const selectsData = ref({
  stageId: '',
  studentList: [],
  deptList: [],
  groupList: []
})
const nameSearch = ref({
  keyword: '',
  departId: null,
  page: 1,
  pageSize: 10
})
const audienceName = ref({
  keyword: '',
  page: 1,
  pageSize: 10
})
// const searchOrgName = ref({
//   keyword: '',
//   page: 1,
//   pageSize: 10
// })

const stageIds = computed(() => props.stage)

const {
  data: stuData,
  fetch: searchStu,
  page: stuPageNo,
  pageSize: stuPageSize,
  loading: stuLoading,
  total: stuTotal
} = useBoeApiPage(USER_LIST, nameSearch.value, {
  init: false,
  result: res => res.result.userInfoList,
  totalPage: res => res.result.totalPage,
  total: res => res.result.totalElement
})

// const {
//   data: orgData,
//   fetch: searchOrg,
// } = useBoeApi(ORG_LIST, searchOrgName.value)

const {
  data: audiData,
  fetch: searchAudi,
  page: audiPageNo,
  pageSize: audiPageSize,
  loading: audiLoading,
  total: audiTotal
} = 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: "id",
  dataIndex: "id",
  key: "id",
  width: 35,
  align: "center",
  className: "h",
},
  {
    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 stuRowSelection = computed(() => ({
  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 = () => {
  visiable.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)
}

// function orgDel(i) {
//   orgSelectKeys.value = orgSelectKeys.value.filter(e => e !== selectsData.value.deptList[i].id)
//   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()
};

//重置
const resetStu = () => {
  deleteDepSelect();
  nameSearch.value = {keyword: '', page: 1, pageSize: 10}
};
//清空选择部门信息
const deleteDepSelect = () => {
  stuSelectKeys.value = []
};

//重置组织
// const resetOrg = () => {
//   searchOrgName.value = {keyword: '', page: 1, pageSize: 10}
// };

//重置受众
const resetAudienceInfo = () => {
  audienceName.value = {keyword: '', page: 1, pageSize: 10}
};

//全部清除
// const deleteAll = () => {
//   selectsData.value = {
//     studentList: [],
//     deptList: [],
//     groupList: []
//   }
// };
//确定添加授权
const submitAuth = () => {
  if (props.type === 2) {
    stageVisible.value = true
  } else {
    handleStageOk()
  }
};

function handleStageOk() {
  stageVisible.value = false
  visiable.value = false
  emit('finash', false)
  saveStu({
    targetId: props.id,
    type: props.type,
    deptIds: selectsData.value.deptList?.map(e => e.id),
    stageId: selectsData.value.stageId,
    groupIds: selectsData.value.groupList?.map(e => e.id),
    studentList: selectsData.value.studentList
  }).then(() => {
    emit('finash', true)
  })
}

watch(visiable, () => {
  stuSelectKeys.value = []
  orgSelectKeys.value = []
  auditSelectKeys.value = []
  stuData.value = []
  audienceName.value.keyword=''
  audienceName.value.page=1
  audienceName.value.pageSize=10
  selectsData.value = {
    stageId: '',
    studentList: [],
    deptList: [],
    groupList: []
  }
  searchAudi()
})

</script>
<style lang="scss">
.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: 12px;
  font-weight: 400;
  color: #4F5156;
  line-height: 29px;
  padding: 0px;
}

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

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

.ant-tabs {
  overflow: visible;
}

.right1 {
  border-left: 1px solid #f2f6fe;
  width: 100%;
  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>