<template>
  <a-select
      :getPopupContainer="
                          (triggerNode) => {
                            return triggerNode.parentNode || document.body;
                          }
                        "
      v-model:value="managerArray"
      :placeholder="placeholder"
      :filterOption="false"
      style="width: 100%"
      :options="options"
      allowClear
      showSearch
      :mode="mode"
      :disabled="disabled"
      @popupScroll="memberScroll"
      @search="searchMember"
      :open="isOpen"
      @change="change"
  >
    <template v-if="loading" #notFoundContent>
      <a-spin size="small"/>
    </template>
  </a-select>
</template>
<script setup>
import {computed, defineEmits, defineProps, onMounted, ref, watch} from "vue";
import {scrollLoad, throttle} from "@/api/method";
import * as api1 from "@/api/index1";

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  disabled: Boolean,
  placeholder: String,
  mode: String
})


const options = ref([])

const managerArray = computed(() => props.mode === 'select' ? props.value : (props.value ? props.value.split(',') : []))

const emit = defineEmits({})

const isOpen = ref(false)

const memberParam = ref({keyWord: '', pageNo: 1, pageSize: 10})
const loading = ref(false)


watch(() => memberParam.value.keyWord, throttle(getSearchMember, 500))
watch(() => memberParam.value.pageNo, throttle(getPageMember, 500))
watch(props, init)

function init() {
  props.value && (options.value = props.value.split(',').map((e, i) => ({
    value: e,
    label: props.name.split(',')[i]
  })))
}

onMounted(() => {
  console.log('onMounted')
  init()
})

function getSearchMember() {
  console.log('getSearchMember')
  options.value && options.value.length && (options.value = [])
  getMemberData()
}

function getPageMember() {
  console.log('getPageMember')
  getMemberData()
}


function getMemberData() {
  isOpen.value = true
  loading.value = true
  api1.getMemberInfo(memberParam.value).then((res) => {
    if (!res.data.data.rows || !res.data.data.rows.length) {
      isOpen.value = false
      return;
    }
    const list = res.data.data.rows.filter(e => !(props.value + '').includes(e.id)).map(e => ({
      label: e.realName,
      value: e.id
    }));
    memberParam.value.pageNo === 1 && props.value ? (options.value = list) : options.value.push(...list)
    loading.value = false
  });
}

const memberScroll = (e) => {
  let num = scrollLoad(e);
  if (num === 2) {
    memberParam.value.pageNo++;
  }
};

//搜索学员
const searchMember = (keyWord) => {
  console.log('searchMember', keyWord)
  options.value = []
  isOpen.value = true
  keyWord && (memberParam.value = {keyWord, pageNo: 1, pageSize: 10});
};

function change(e, l) {
  console.log('change', l)
  isOpen.value = false
  if (Array.isArray(l)) {
    // const selectIds = l.filter(t => t.value).map(t => t.value).join(',')
    // const arr = props.value ? props.value.split(',').filter(e => !selectIds.includes(e)).map((e, i) => ({
    //   value: e,
    //   name: props.name.split(',')[i]
    // })) : []
    // l.push(...arr)
    // l=l.filter(t => t.label)
    emit('update:name', l.map(t => t.label).join(','))
    emit('update:value', l.map(t => t.value).join(','))
  } else {
    emit('update:name', l.label)
    emit('update:value', l.value)
  }
}

</script>
