<template>
  <div>
    <a-select v-model:value="selectedList" mode="multiple" placeholder="请选择驻场" option-label-prop="onsiteChildren" @change="onSiteChange">
      
      <a-select-option v-for="item in onsiteList" :disabled="(selectedList ? (selectedList.length >= 3 ? true : false) :false) && item.disabled"  :value="item.userName" :title="item.id">{{item.userName}}</a-select-option>
    </a-select>
  </div>
</template>


<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps,computed } from 'vue'
import { message } from 'ant-design-vue'
import { getOnsiteListApi } from '../../../api/manage/onsite.js'

const props = defineProps({
  selectedList: {
    type: Array,
    default: [],
  },
})
const emits = defineEmits(['selectChange'])

// const selectedList = ref(props.selectedList)
watch(
  () => props.selectedList,
  (val) => {
    console.log(val) 
    onSiteChange(val)
  },
  {
    // immediate: true,
  }
)
let selectedList = computed(()=>{
  return props.selectedList
})
const commonJS = getCurrentInstance().appContext.app.config.globalProperties.G
onMounted(() => {
  getOnsiteList()
})
const onsiteList = ref([])
const agencyId = ref(localStorage.getItem('DAOTIAN_userinfo_agencyid'))

/**
 * 获取驻场列表
 */
const getOnsiteList = () => {
  let subInfo = {
    agencyId: agencyId.value,
    pageSize: 10000,
    pageNum: 1,
  }
  getOnsiteListApi(subInfo).then((res) => {
    console.log(res)
    onsiteList.value = res.data.recordList
  })
}
/**
 * 驻场选择变化
 */
const onSiteChange = (e, e1) => {
  console.log(e)
  console.log(e1)
  console.log(onsiteList.value)
  let newArr = []
  // 设置列表禁用
  onsiteList.value.forEach((item) => {
    if (e.findIndex((i1) => i1 == item.userName) > -1) {
      item.disabled = false
      newArr.push(item)
    } else {
      item.disabled = true
    }
  })
  // selectedList = e

  console.log(newArr)
  emits('selectChange', newArr)
}
</script>

<style lang='less' scoped>
</style>