<template>
  <div :class="searchWrapClass" v-show="popupVisible">
    <WlHeader needBottomBorder showBack :needAutoBack="false" @onBack="onClose"
      >搜索员工</WlHeader
    >
    <div class="uno-px-15">
      <WlSearch v-model="searchValue" @onChange="onSearchChange" />
    </div>
    <div class="flex-1 scroll-y">
      <ChooseList
        :list="currentData"
        :showLetter="false"
        :isMultiple="isMultiple"
        :checkedIds="checkedIds"
        :checkedList="checkedList"
        @onChange="onChangeChooseList"
      />
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCEmployeeSearchPopup",
};
</script>

<script setup lang="ts">
import { TEmployeeData } from "../../../type";
import { ref, watchEffect, computed } from "vue";
import ChooseList from "../ChooseList/index.vue";
import WlHeader from "@mobileUI/components/WlHeader/src/index.vue";
import WlSearch from "@mobileUI/components/WlSearch/src/index.vue";
import useHandleCheckStatus from "../../hooks/useHandleCheckStatus";

type Props = {
  show: boolean;
  isMultiple?: boolean; //是否是多选
  list?: TEmployeeData[];
  checkedIds?: string[];
  checkedList?: TEmployeeData[];
};

const props = withDefaults(defineProps<Props>(), {
  show: false,
  isMultiple: false,
  list: () => [],
  checkedIds: () => [],
  checkedList: () => [],
});

const emit = defineEmits<{
  (e: "onClose");
  (e: "update:show", val: boolean);
  (e: "onChange", item: TEmployeeData);
}>();

const searchValue = ref("");
const popupVisible = ref(false);
const searchList = ref<TEmployeeData[]>([]);

const currentData = computed(() => {
  return useHandleCheckStatus(
    searchList.value,
    props.checkedIds,
    props.checkedList,
  );
});

const searchWrapClass = computed(() => {
  return {
    "w-full flex-direction-column bg-white absolute uno-t-0 z-3": true,
    "uno-b-0": !props.isMultiple,
    "uno-b-60": props.isMultiple,
  };
});

const onSearchChange = (val: string) => {
  searchList.value = !val
    ? []
    : props.list.filter((res) => res.name.includes(val));
};

const onChangeChooseList = (item: TEmployeeData) => {
  emit("onChange", item);
};

const onClose = () => {
  emit("update:show", false);
  popupVisible.value = false;
};

watchEffect(() => {
  if (props.show) {
    searchValue.value = "";
    searchList.value = [];
  }
  popupVisible.value = props.show;
});
</script>
