<style scoped lang="scss">
.ext-search-container {

  cursor: pointer;
  width: 100%;
  line-height: 32px;
  height: 32px;
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  padding: 1px 5px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;

  &:hover {
    border: 1px solid var(--el-border-color-hover);
  }
}

.info-box {
  margin-right: 5px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  /*width: 160px;*/
  height: 32px;
  /*line-height: 1.5;*/
  /*padding: 6px 7px;*/
  font-size: 12px;
  /*border: 1px solid #dddee1;*/
  color: #495060;
  /*background-color: #fff;*/
  background-image: none;
  cursor: text;
}

.icon-right {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 999;
  /*display: none;*/
  cursor: pointer;
}

.icon-right {
  display: none;
}

.icon-right:hover {
  display: inline-block;
}
</style>
<template>
  <div :style="{width: props.width+'px'}" class="ext-search-container" @click="chooseObject">
        <span :class="{readonly:'z-no-border'}" class="info-box z-ellipsis">
          <template v-if="u.isEmptyOrNull(state.displays)">
              <span style="color:#C2C5CA;">{{ placeholder }}</span>
          </template>
          <template v-else>
              <el-tag
                  v-for="(tag,idx) in state.displays"
                  :key="tag.name||tag.title||tag"
                  class="mx-1"
                  @close="handleClose(idx)"
                  @click="handleClick(tag)"
                  :closable="!readonly">
              {{ tag.name }}
            </el-tag>
          </template>

          <!--            <span v-else class="z-pointer z-ellipsis" @click="showItem">{{ objectName }}</span>-->
          <el-icon class="icon-right" v-if="!readonly" @click="clearObject"><Delete/></el-icon>
        </span>
    <el-button v-if="!readonly"  type="text" size="small" :icon="Search" circle/>
  </div>
  <ExtSContainer ref="extSContainerRef" v-if="!readonly"/>
</template>

<!--带弹窗搜索的关联组件-->

<script setup lang="ts" name="ExtSearch">
import {onMounted, defineAsyncComponent, ref, nextTick,watch} from 'vue';
import {Delete, Search} from '@element-plus/icons-vue'
import u from "/@/utils/u";

const ExtSContainer = defineAsyncComponent(() => import('/@/components/form/ExtSContainer.vue'));

const extSContainerRef = ref();

const emit = defineEmits(['update:modelValue','on-change']);

const props = defineProps({
  modelValue: {
    type: [Number, String, Array<Number>]
  },
  displayList: {
    type: [String, Array<any>]
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  readonly: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    require: true,
    default: false
  },
  config: {   //{domain:xxx,url:xxx,query:{},cols:[]}
    type: Object
  },
})

const state = ref({
  objectId: null as any,
  objectName: null as any,
  displays: [] as Array<any>,
  displayIds: [] as Array<any>,
  dialogVisible:false
})

watch(()=>props.displayList,()=>{
  if (props.multiple) {
    if (props.displayList) {
      if (!Array.isArray(props.displayList)) {
        console.error("value list error")
        return;
      }
      state.value.displays = props.displayList;
      state.value.displayIds = props.modelValue;
    }
  } else {
    state.value.displays = [props.displayList]
    state.value.displayIds = [props.modelValue]
  }

  console.log(state.value.displays)
  console.log(state.value.displayIds)
})

onMounted(() => {


  // state.objectId = props.modelValue;
  // state.objectName = props.oname;
})

const handleClick = () => {
  /*extSContainerRef.value?.open((res:any)=>{

  },props.multiple,props.config,state.value.displayIds);*/
  // let entity = props.domain;
  /*  entity = entity.substring(0, 1).toUpperCase() + entity.substring(1);
    app.openModal(`${entity}InfoModal`, {
      id: this.value
    });*/
}

const handleClose = (idx: number) => {
  state.value.displays.splice(idx, 1);
  state.value.displayIds.splice(idx, 1);
  emitData();
}

const emitData = () => {
  nextTick(() => {
    if (props.multiple) {
      emit("update:modelValue", state.value.displayIds, state.value.displays)
      emit("on-change")
    } else {
      emit("update:modelValue", state.value.displayIds[0], state.value.displays[0])
      emit("on-change")
    }
  })
}
const chooseObject = () => {
  console.log(props.config,props.multiple)
  nextTick(()=>{
    extSContainerRef.value?.open(
        chooseCallback,
        props.multiple,
        props.config,
        state.value.displayIds
    );
  })

}

const chooseCallback = (list: Array<any>) => {
  if (u.isEmptyOrNull(list)) {
    return;
  }
  if (props.multiple) {
    state.value.displayIds = state.value.displayIds.concat(list.map(k => k.id))
    state.value.displays = state.value.displays.concat(list)
  } else {
    state.value.displayIds = [list[0].id]
    state.value.displays = [list[0].name]
  }
  emitData();
}

const clearObject = () => {
  state.value.displayIds = [];
  state.value.displays = [];
  emitData();
  // state.objectName = undefined;
  // state.objectId = undefined;
  // state.query['id'] = undefined;
}

</script>
