<template>
  <div class="department-footer">
    <div class="department-swiper">
      <WlTextSwiper :data="list" :distance="200" />
    </div>
    <!-- 多选确认按钮 -->
    <WlButton
      type="primary"
      size="normal"
      @onClick="onConfirm"
      class="sure-btn"
    >
      <p class="sure-btn-text">
        确定
        <span v-if="checkedLen > 0">{{ checkedLen }}</span>
      </p>
    </WlButton>
  </div>
</template>

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

<script setup lang="ts">
import { computed } from "vue";
import WlButton from "@mobileUI/components/WlButton";
import WlTextSwiper from "@mobileUI/components/WlTextSwiper";
import { TDepartmentList } from "@mobileUI/typings/BCDepartmentSelectorPopup";

type Props = {
  list: TDepartmentList[];
};
const props = withDefaults(defineProps<Props>(), {
  list: () => [],
});

const checkedLen = computed(() => props.list.length);

const emit = defineEmits<{
  (e: "onConfirm", val: TDepartmentList[]);
}>();

const onConfirm = () => {
  emit("onConfirm", props.list);
};
</script>

<style lang="scss" scoped>
.department-selector-wrap[data-weiling-mobile-ui-bc-department-selector-popup] {
  .department-footer {
    @extend %flex-middle;
    justify-content: space-between;
    height: j(60);
    box-sizing: border-box;
    background: #f4f9fd;
    padding-right: j(10);

    .department-swiper {
      width: j(280);
    }

    .sure-btn {
      flex-shrink: 0;

      &-text {
        margin-left: auto;
        max-width: j(90);
      }
    }
  }
}
</style>
