<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  ASPlaceholder: {
    type: String
  },
  ASValue: {
    type: Array
  },
  ASisDisabled: {
    type: Boolean
  },
  ASType: {
    type: String
  },
  ASSearchFiled: {
    type: String
  },
  ASSearchMode: {
    type: String
  },
  ASSearchObj: {
    type: Object
  }
})

interface ListItem {
  value: string
  label: string
}

const list = ref<ListItem[]>([])
const options = ref<ListItem[]>([])
const value = ref(props.ASValue)
const type = ref(props.ASType)
const search_field = ref(props.ASSearchFiled)
const search_mode = ref(props.ASSearchMode)
const MoreFiltersObj = ref(props.ASSearchObj)
const loading = ref(false)
watch(
  () => props.ASValue,
  (current) => {
    value.value = current
  }
)
watch(
  () => props.ASSearchObj,
  (current) => {
    MoreFiltersObj.value = current
  }
)
const remoteMethod = (query: string) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      $api
        .getMoreFiltersData({
          term: query,
          type: type.value,
          search_field: search_field.value,
          search_mode: search_mode.value,
          ...MoreFiltersObj.value
        })
        .then((res: any) => {
          loading.value = false
          if (res.code == 200) {
            list.value = res.data.map((item: any) => {
              return { value: item, label: item }
            })
            options.value = list.value.filter((item) => {
              return item.label.toLowerCase().includes(query.toLowerCase())
            })
          }
        })
    }, 200)
  } else {
    options.value = []
  }
}
const emit = defineEmits(['changeAutoSelect'])
// 选中改变
const changeAutoSelect = () => {
  emit('changeAutoSelect', value)
}
// 清除警告样式
const removeClass = () => {
  const input_change = document.getElementsByClassName('input_change')
  if (input_change.length) {
    if (input_change[0].classList.value.indexOf('AlertInput') != -1) {
      input_change[0].classList.remove('AlertInput')
    }
  }
}
</script>
<template>
  <div>
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      @change="changeAutoSelect"
      :reserve-keyword="false"
      :placeholder="props.ASPlaceholder"
      collapse-tags
      @focus="removeClass"
      :disabled="props.ASisDisabled"
      collapse-tags-tooltip
      :max-collapse-tags="3"
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        <el-checkbox :checked="value?.includes(item.value)"></el-checkbox>
        <div class="label">{{ item.value }}</div>
      </el-option>
    </el-select>
  </div>
</template>
<style lang="scss" scoped>
.el-select-dropdown__item.is-selected {
  background-color: transparent;
  div {
    color: var(--badge__content--warning);
  }
}
.el-select-dropdown__item {
  padding-left: 7.7px;
  display: flex;
  align-items: center;
}
.label {
  margin-left: 8px;
}
.el-select-dropdown__item.is-hovering {
  div {
    color: var(--badge__content--warning);
  }
}
</style>