<template>
  <div
    class="uno-h-60 flex-middle bg-shallow-blue-color uno-pr-10 box-border mt-auto relative z-2"
  >
    <div class="flex-1 scroll-y">
      <WlTextSwiper :data="list">
        <template v-slot="{ row }">
          <div
            v-if="row.renderType === 'employee'"
            class="uno-w-40 uno-h-40 uno-radius-50 overflow-hidden not-last:uno-mr-10"
            @click="onChoose(row as TEmployeeData)"
          >
            <WlPic :src="row.avatar ?? en_default_avatar" />
          </div>
          <div
            v-if="row.renderType === 'department'"
            class="uno-w-40 uno-h-40 not-last:uno-mr-10 uno-radius-50 font-medium uno-fs-18 flex items-center justify-center bg-hex-2950B8 text-hex-ffffff"
            @click="onChoose(row as TEmployeeData)"
          >
            <span>{{ row.name?.slice(0, 1) }}</span>
          </div>
        </template>
      </WlTextSwiper>
    </div>
    <!-- 多选确认按钮 -->
    <div class="uno-max-w-90">
      <WlButton type="primary" @onClick="onConfirm">
        <span class="shrink-0">确定</span>
        <span class="shrink-0" v-if="checkIdsLength > 0">{{
          checkIdsLength
        }}</span>
      </WlButton>
    </div>
  </div>
</template>

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

<script setup lang="ts">
import { computed } from "vue";
import { TEmployeeData } from "../../../type";
import { en_default_avatar } from "@mobileUI/utils/cdn";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import WlButton from "@mobileUI/components/WlButton/src/index.vue";
import WlTextSwiper from "@mobileUI/components/WlTextSwiper/src/index.vue";

//获取轮播图实例对象
type Props = {
  list?: TEmployeeData[];
};
const props = withDefaults(defineProps<Props>(), {
  list: null,
});

const emit = defineEmits<{
  (e: "onConfirm");
  (e: "onChoose", val: TEmployeeData);
  (e: "update:list", val: TEmployeeData[]);
}>();

const onConfirm = () => emit("onConfirm");

const onChoose = (item: TEmployeeData) => emit("onChoose", item);

//已选择的用户数量
const checkIdsLength = computed(() => {
  return (props.list as TEmployeeData[]).length;
});
</script>
