<template>
  <div>
    <el-popover
      placement="bottom"
      :width="200"
      trigger="click"
    >
      <template #reference>
        <el-input v-model="searchQuery" :placeholder="searchPlaceholder">
          <template #prefix>
            <el-icon class="el-input__icon"><search /></el-icon>
          </template>
        </el-input>
      </template>
      <el-checkbox v-if="!props.isCheckbox"  label="全选" v-model="checked1" @change="all"/>
      <el-checkbox-group v-model="checkboxList" style="max-height: 300px;overflow-y: auto;" @change="changeCheckbox">
        <el-checkbox v-for="item in filteredList" :label="item.as_code+' '+item.as_name" :value="item.as_code" />
      </el-checkbox-group>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import {defineProps, ref, computed, onMounted, watch} from "vue";
const checkboxList = ref([])
const searchPlaceholder = ref('请搜索')
const checked1 = ref(false)
const props = defineProps<{
  selectList?: [];
  selectData?: [];
  isCheckbox?: boolean
}>();

const searchQuery = ref("");

watch(() => props.selectData, (newVal) => {
  checkboxList.value = newVal;

  // 根据选中项更新 searchPlaceholder
  if (checkboxList.value.length > 0) {
    searchPlaceholder.value = checkboxList.value.join(', ');
  } else {
    searchPlaceholder.value = '请搜索';
  }

  if (checkboxList.value.length === props.selectData.length) {
    checked1.value = true; // 全选
  } else {
    checked1.value = false// 取消全选
  }
});

const filteredList = computed(() => {
  if (!searchQuery.value) {
    return props.selectList || [];
  }
  const upperCaseSearchQuery = searchQuery.value.toUpperCase(); // 将搜索查询转换为大写
  return (props.selectList || []).filter(item =>
    item.as_code.toUpperCase().includes(upperCaseSearchQuery) || // 将数据项转换为大写后比较
    item.as_name.toUpperCase().includes(upperCaseSearchQuery) // 将数据项转换为大写后比较
  );
});
const all = () => {
  const allCodes = props.selectList.map(item => item.as_code);
  if (checkboxList.value.length === allCodes.length) {
    checkboxList.value = []// 取消全选
  } else {
    checkboxList.value = [...allCodes]; // 全选
  }

  // 根据选中项更新 searchPlaceholder
  if (checkboxList.value.length > 0) {
    searchPlaceholder.value = checkboxList.value.join(', ');
  } else {
    searchPlaceholder.value = '请搜索';
  }

  emit("update:selectedItems", checkboxList.value);
};

const changeCheckbox = (newValue) => {
  if(props.isCheckbox){
    if (newValue.length > 1) {
      checkboxList.value = [newValue[newValue.length - 1]];
    } else {
      checkboxList.value = newValue;
    }
    // 根据选中项更新 searchPlaceholder
    if (checkboxList.value.length > 0) {
      searchPlaceholder.value = checkboxList.value.join(', ');
    } else {
      searchPlaceholder.value = '请搜索';
    }
  }else {
    const allCodes = props.selectList.map(item => item.as_code);
    if (checkboxList.value.length === allCodes.length) {
      checked1.value = true; // 全选
    } else {
      checked1.value = false// 取消全选
    }

    // 根据选中项更新 searchPlaceholder
    if (checkboxList.value.length > 0) {
      searchPlaceholder.value = checkboxList.value.join(', ');
    } else {
      searchPlaceholder.value = '请搜索';
    }
  }


  emit("update:selectedItems", checkboxList.value);
};
const emit = defineEmits<{
  "update:selectedItems": [value: []];
}>();

</script>

<style scoped>
</style>
