<template>
    <div class="banner-flag-container" :class="computedClass">
      <div class="top" :style="topStyle">{{ taskTitle }}</div>
      <div class="bottom"></div>
    </div>
</template>
<script setup lang="ts">
import { computed  } from 'vue'
import { TASK_STATUS } from '../assets/constant'
const props = defineProps({
    status: {
      type: Number,
      default: TASK_STATUS.UNCOMPLETE
    },
    staticData: {
      type: Object,
      default: () => ({})
    },
    sectionData: {
      type: Object,
      default: () => ({})
    }
})

const topStyle = computed(()=>{
    const { flagBgs } = props.staticData || {}
      const bgUrl = flagBgs && props.status ? flagBgs[props.status] : ''

      return `
              background: url(${bgUrl}) no-repeat;
              background-size: 100% 100%;
            `
})

const taskTitle = computed(()=>{
    return props.sectionData.taskTitle || ''
})

const computedClass = computed(()=>{
    return props.status === TASK_STATUS.COMPLETED ? 'completed' : 'uncomplete'
})
</script>
<style scoped lang="less">
.banner-flag-container {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  .top {
    width: 22px;
    height: 70px;
    font-family: PingFang SC;
    font-size: 10px;
    line-height: 11px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;

    box-sizing: border-box;
    padding: 18px 5px 0;
    white-space: normal;
  }

  .bottom {
    margin-top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffdea2;
  }

  // 状态类名
  &.completed {
    .bottom {
      background: #ff6722;
    }
  }
  &.uncomplete {
    .bottom {
      background: #ffdea2;
    }
  }
}
</style>