<template>
    <div class="stair-new-user-banner-container">
      <div class="top" :style="topStyle" @click="jumpPage">
        <div class="title">
          <div class="left">{{ topTitle }}</div>
          <div v-if="topTitle2" class="right">·</div>
          <div class="right">{{ topTitle2 }}</div>
          <img class="arrow" src="https://dpubstatic.udache.com/static/dpubimg/_P8zndpDAAdVooSBUGHlv.webp" />
        </div>
        <div class="desc">
          <div v-if="showActivityRemindTime" class="remind-time">
            距结束
            <div v-if="activityRemindTime.days !== '00'" class="time-item">
              <div class="num">{{ activityRemindTime.days }}</div>
              天
            </div>
            <div v-if="activityRemindTime.hours !== '00'" class="time-item">
              <div class="num">{{ activityRemindTime.hours }}</div>
              小时
            </div>
            <div v-if="activityRemindTime.minutes !== '00' && activityRemindTime.days === '00'" class="time-item">
              <div class="num">{{ activityRemindTime.minutes }}</div>
              分钟
            </div>
          </div>
          <div class="line"></div>
          <div>{{ activityBizTypeDesc }}</div>
        </div>
        <div ref="bannerContent" class="content">
          <div class="crisp">
            <BannerSection
              v-for="(item, index) in sectionList"
              :key="index"
              :section-data="item"
              :static-data="staticData"
              :section-list="sectionList"
              :index="index"
            />
            <div class="bottom-bar">
              <div class="process-bar" :style="processBarStyle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, computed, nextTick } from 'vue'
import { findLastIndex } from 'lodash-es'
import { getTimes } from '../assets/utils'
import { BANNER_JSON, SCENE, CATEGORY, TASK_STATUS } from '../assets/constant.js'
import BannerSection from './BannerSection.vue'

const props = withDefaults(defineProps<{ bannerData: any }>(), {
    bannerData: ()=> ({})
})

const emit = defineEmits(['jumpPage']);

const bannerDataComputed = computed(()=>{
    return {
        ...props.bannerData,
        json: BANNER_JSON
    }
})

const staticData = computed(()=>{
    return bannerDataComputed.value.json || {}
})

const scene = computed(()=>{
    return bannerDataComputed.value.taskScene || SCENE.NEWUSER
})

const category = computed(()=>{
    return bannerDataComputed.value.activityScene || CATEGORY.PLATFORM
})

const activityBizTypeDesc = computed(()=>{
    return bannerDataComputed.value.activityBizTypeDesc || ''
})

const topTitle2 = computed(()=>{
    console.log('linda-222', bannerDataComputed.value.titleV2)
    return bannerDataComputed.value.titleV2 || ''
})

const showActivityRemindTime = computed(()=>{
    return bannerDataComputed.value.endTime - new Date().getTime() > 0
})

const activityRemindTime = computed(()=>{
    const duration = bannerDataComputed.value.endTime - new Date().getTime()
    return getTimes(duration / 1000)
})

const topStyle = computed(()=>{
      const { topBgs } = staticData.value
      const bgUrl = topBgs && scene.value ? topBgs[scene.value] : ''

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

const topTitle = computed(()=>{
    const { topTitle } = staticData.value
    return topTitle && scene.value && category.value ? topTitle[scene.value][category.value] : ''
})

const sectionList = computed(()=>{
    return bannerDataComputed.value.staircaseTaskScheduleVOS || []
})

const processBarStyle = computed(()=>{
    let makeOrderProgress
      const idx = findLastIndex(sectionList.value, (e:any) => e.taskStatus === TASK_STATUS.COMPLETED)
      const func = (arr) => arr.reduce((acc, cur) => acc + cur.benefitVOS.length, 0)

      if (idx < 0) makeOrderProgress = '0'
      else if (idx !== sectionList.value.length - 1) {
        const completedLength = func(sectionList.value.slice(0, idx))
        const cardWidth = 156
        const cardMargin = 20
        const cardSectionPadding = idx * (32 * 2)
        const doingTaskFlag = 100
        makeOrderProgress = `${completedLength * (cardWidth + cardMargin) + cardSectionPadding + doingTaskFlag}px`
      } else makeOrderProgress = '100%'

      console.warn('拉新场景-做单进度', makeOrderProgress)

      return `width:${makeOrderProgress};`
})

// 定义一个响应式引用，指向模板中的 bannerContent
const bannerContent = ref()

// 定义事件处理函数
const handleTouchMove = (e) => {
  e.stopPropagation()
}

const handleTouchStart = (e) => {
  e.stopPropagation()
}

onMounted(()=>{
    bannerContent.value.addEventListener('touchmove', handleTouchMove)
    bannerContent.value.addEventListener('touchstart', handleTouchStart)
})

onBeforeUnmount(()=>{
  bannerContent.value.removeEventListener('touchmove', handleTouchMove)
  bannerContent.value.removeEventListener('touchstart', handleTouchStart)
})

const jumpPage = () => {
    if (!props.bannerData?.jumpUrl) return
    emit('jumpPage', props.bannerData.jumpUrl)
}


</script>
<style lang="less" scoped>

.stair-new-user-banner-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 355px;
  height: 167px;
  border-radius: 16px;
  box-shadow: 0 3px 10px 0 #eaecf6;
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  .top {
    height: 78px;
    box-sizing: border-box;
    padding-top: 10px;
  }
}

.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 15px;

  .left {
    font-family: MFYuanHei;
    font-size: 15px;
    font-weight: normal;
    line-height: 16px;
    letter-spacing: 0px;
    color: #FF5E15;
  }

  .right {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: 0px;
    color: #772E1F;
  }

  .arrow {
    height: 12px;
    width: 12px;
    margin-left: 4px;
  }
}

.desc {
  height: 19px;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-left: 15px;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: normal;
  line-height: 12px;
  color: #ae795f;

  .line {
    width: 1px;
    height: 14px;
    background: #fde3e1;
    transform: scaleX(0.5);
    margin: 2px 6px;
  }
  .remind-time, .time-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .remind-time {
    font-size: 12px;
    color: #666666;
    font-family: PingFangSC-Regular;
    .num {
      padding: 4px 2px;
      text-align: center;
      margin: 0 2px;
      line-height: 1;
      font-family: PingFangSC-medium;
      font-weight: bold;
      color: #ae795f;
      background: #ffe2d6;
      border-radius: 6px;
    }
  }

}

  .content {
    height: 112px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    width: 355px;
    margin-top: 8px;
    ::-webkit-scrollbar {
      display: none;
    }

    .crisp {
      display: flex;
      position: relative;
      z-index: 0;
      height: 82px;
      margin-left: 24px;
      margin-top: 12px;
      margin-right: 7px;
      white-space: nowrap;

      .bottom-bar {
        position: absolute;
        left: 0;
        right: 5px;
        bottom: 0;
        height: 5px;
        background: #fcf8ed;
        z-index: -1;
        border-radius: 20px;

        .process-bar {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 0;
          background: linear-gradient(90deg, #ffe2a7 2%, #ff6722 103%);
          border-radius: 20px;
        }
      }
    }
  }

</style>