<template>
  <div class="h-full">
    <template v-if="list?.length > 0">
      <!-- 侧边定位标签 -->
      <LetterPosition
        :list="letterData"
        @onClickLetterPosition="onClickLetterPosition"
        v-if="showLetter"
      />
      <RecycleScroller
        class="h-full"
        :items="filterList"
        :item-size="54"
        key-field="key"
        v-slot="{ item }"
        ref="recycleScroller"
      >
        <div
          class="bg-shallow-blue-color flex-middle uno-pl-15"
          v-if="item.renderType === 'initial'"
          :ref="item.initial"
          style="height: 54px;"
        >
          {{ item.initial }}
        </div>
        <div
          style="height: 54px;"
          class="flex-middle-center cursor-pointer uno-pl-15 border-bottom"
          @click="onChooseItem(item, 'title', item.checkedStatus)"
          v-if="['employee', 'department'].includes(item.renderType)"
        >
          <div
            class="uno-py-15 uno-pr-15"
            @click.stop="onChooseItem(item, 'radio', item.checkedStatus)"
            v-if="isMultiple"
          >
            <WlRadioIcon
              :type="item.type"
              :iconType="item.icon"
              :isChoosed="item.isChoosed"
              @onClick="onChooseItem(item, 'radio', item.checkedStatus)"
            />
          </div>
          <div
            class="uno-w-32 uno-h-32 uno-mr-8"
            v-if="item.renderType === 'employee'"
          >
            <WlPic
              :src="(item.avatar ?? '') === '' ? en_default_avatar : item.avatar"
              needCos
              round
            />
          </div>
          <div class="flex-1">
            {{ item.name }}
            <span v-if="item.alias">（{{ item.alias }}）</span>
          </div>
          <div
            class="uno-pxy-10 flex-middle"
            @click.stop="onChooseItem(item, 'arrow', item.checkedStatus)"
          >
            <WlSvgIcon
              type="arrowRight"
              width="20"
              height="20"
              color="#999"
              v-if="item.renderType === 'department'"
            />
          </div>
        </div>
        <div
          class="font-black flex-middle-center uno-py-10"
          v-if="item.renderType === 'total'"
        >共{{ item.count }}人</div>
      </RecycleScroller>
    </template>
    <div
      class="uno-w-280 mx-auto uno-pt-100"
      v-else
    >
      <WlPic :src="search_no_result" />
    </div>
  </div>
</template>

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

<script setup lang="ts">
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import { ref, computed } from "vue";
import WlPic from "@mobileUI/components/WlPic";
import { RecycleScroller } from "vue-virtual-scroller";
import LetterPosition from "../LetterPosition/index.vue";
import WlRadioIcon from "@mobileUI/components/WlRadioIcon";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import { en_default_avatar, search_no_result } from "@mobileUI/utils/cdn";
import { TEmployeeData, TRenderData, TPositionType, TCheckedStatus } from "../../../type";
type Props = {
  list?: TRenderData[];
  checkedIds?: string[];
  checkedList?: TEmployeeData[];
  letterData?: string[];
  isMultiple?: boolean;
  showLetter?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  list: () => [],
  checkedIds: () => [],
  checkedList: () => [],
  letterData: () => [],
  isMultiple: false,
  showLetter: true,
});

const emit = defineEmits<{
  (e: "onChange", val: TRenderData, type?: TPositionType, checkedStatus?: TCheckedStatus);
}>();

const recycleScroller = ref<HTMLElement>();
//最后需要显示总人数
const filterList = computed(() => {
  // const count = props.list.filter((res) => res.renderType === "employee").length;
  // return [...props.list, { renderType: "total", key: "total", count }];
  return props.list;
});

//侧边栏定位标签点击事件
const onClickLetterPosition = (val: string) => {
  const index = (props.list as TEmployeeData[]).findIndex((i) => i.initial === val);
  (recycleScroller.value as any).scrollToItem(index);
};

//选择员工
const onChooseItem = (item: TRenderData, type: TPositionType, checkedStatus: TCheckedStatus) => {
  emit("onChange", item, type, checkedStatus);
};
</script>
