<template>
    <div :class="'banner-section-container ' + bannerSection">
      <BannerFlag :status="status" :static-data="staticData" :section-data="sectionData" />
      <div class="banner-card-list">
        <BannerCard v-for="(item, idx) in cardList" :key="idx" :card-data="item" :index="idx" :static-data="staticData" />
      </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import BannerFlag from './BannerFlag.vue'
import BannerCard from './BannerCard.vue'
import { TASK_STATUS } from '../assets/constant'

const props = defineProps({
    sectionData: {
      type: Object,
      default: () => ({})
    },
    staticData: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: () => 0
    },
    sectionList: {
      type: Array,
      default: () => []
    }
})

const bannerSection = computed(()=>{
    return `${props.index + 1 >= props.sectionList.length ? 'no-padding-right' : ''}`
})

const cardList = computed(()=>{
    return props.sectionData.benefitVOS || []
})

const status = computed(()=>{
    return props.sectionData.taskStatus || TASK_STATUS.UNCOMPLETE
})

</script>
<style scoped lang="less">
.banner-section-container {
  box-sizing: border-box;
  padding: 0 11px;
  position: relative;
  z-index: 0;
  width: fit-content;

  &.no-padding-right {
    padding-right: 0;
  }

  .banner-card-list {
    display: flex;
  }
}
</style>