<template>
  <div>
    <ScrollView class="activity-scroll" :class="{ active: tab.length === 1 }" scrollbar>
      <div class="scroll-content">
        <h1 class="title">{{ $t('brandActivity') }}</h1>
        <div class="activity-item" v-for="item of list" :key="item.activityId">
          <div class="img-wrapper">
            <img :src="config.sourceUrl + item.fileUrl" alt="" class="img" />
          </div>
          <div class="flex-right">
            <div class="activity-title">
              <p class="name">{{ switchLanguage(item, 'activityName') }}</p>
              <p class="look" @click="handleActivity(item)">{{ $t('lookActivity') }}</p>
            </div>
            <p class="activity-intro">{{ switchLanguage(item, 'activityContent') }}</p>
          </div>
        </div>

        <h1 class="title">{{ $t('coupon') }}</h1>
        <div class="coupon-item">
          <div class="coupon-left">
            <p class="money">¥<i>30</i></p>
            <div class="coupon-info">
              <p class="coupon-name">30元代金券，满129可用</p>
              <p class="coupon-time">使用时间：2021-01-01至2021-12-30</p>
            </div>
          </div>
          <div class="coupon-btn">{{ $t('get') }}</div>
        </div>
      </div>
    </ScrollView>
    <div class="activity-detail" v-if="showActivityDetail">
      <h1 class="activity-title">{{ switchLanguage(activity, 'activityName') }}</h1>
      <ScrollView class="scroll" scrollbar>
        <p class="scroll-content">{{ switchLanguage(activity, 'activityContent') }}</p>
      </ScrollView>
      <div class="common first">{{ $t('ActivityTime') }}：{{ activity.startDate }} {{ $t('zhi') + activity.endDate }}</div>
      <div class="common">{{ $t('activityAddress') }}：{{ switchLanguage(activity, 'activityAddress') }}</div>
      <div class="close-activity" @click="showActivityDetail = false">
        <img src="../../../assets/images/detail/yellow_close.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'

import ScrollView from '@/base/ScrollView/ScrollView.vue'

defineProps({
  tab: Array
})

const store = useStore()
const { shop, config } = storeToRefs(store)
const list = computed(() => shop.value.activityList)

const showActivityDetail = ref(false)
const activity = ref({})
function handleActivity(item) {
  activity.value = item
  showActivityDetail.value = true
}
</script>

<style lang="scss" scoped>
.activity-scroll {
  position: relative;
  overflow: hidden;
  height: 690px;
  &.active {
    height: 860px;
  }
  .title {
    font-weight: 700;
    font-family: 'font_bold';
    font-size: 24px;
    margin-bottom: 24px;
    color: rgba(0, 0, 0, 0.8);
  }
  .activity-item {
    display: flex;
    align-items: center;
    width: 700px;
    height: 106px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    margin-bottom: 16px;
    padding-right: 16px;
    padding-left: 6px;
    &:last-of-type {
      margin-bottom: 40px;
    }
    .img-wrapper {
      width: 160px;
      height: 90px;
      border-radius: 8px;
      overflow: hidden;
      margin-right: 32px;
      .img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .flex-right {
      flex: 1;
      .activity-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 8px;
        .name {
          font-weight: 700;
          font-size: 20px;
          font-family: 'font_bold';
          color: rgba(0, 0, 0, 0.6);
        }
        .look {
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.6);
          background: url('../../../assets/images/detail/arrow.svg') no-repeat right center;
          background-size: 18px 18px;
          padding-right: 26px;
        }
      }
      .activity-intro {
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        color: rgba(0, 0, 0, 0.4);
        @include more-wrap;
      }
    }
  }
  .coupon-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 0 32px;
    width: 700px;
    height: 106px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    .coupon-left {
      display: flex;
      align-items: center;
    }
    .coupon-name {
      font-weight: 700;
      font-size: 18px;
      line-height: 21px;
      font-family: 'font_bold';
      color: rgba(0, 0, 0, 0.6);
      padding-bottom: 6px;
    }
    .coupon-time {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.4);
    }
    .money {
      font-weight: 700;
      font-family: 'font_bold';
      font-size: 24px;
      color: #f1b33e;
      margin-right: 27px;
      i {
        font-size: 48px;
        padding-left: 4px;
      }
    }
    .coupon-btn {
      width: 140px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
      box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.2);
      border-radius: 160px;
      color: #fff;
      font-weight: 700;
      font-family: 'font_bold';
    }
  }
}
.activity-detail {
  position: absolute;
  width: 832px;
  min-height: 396px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #ffffff;
  box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  z-index: 10;
  padding-top: 48px;
  padding-left: 56px;
  .activity-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 28px;
    text-align: justify;
    font-family: 'font_bold';
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 32px;
  }
  .scroll {
    position: relative;
    height: 155px;
    overflow: hidden;
    margin-right: 34px;
    padding-right: 16px;
    :deep(.bscroll-vertical-scrollbar) {
      width: 6px !important;
      background: rgba(0, 0, 0, 0.02) !important;
      border-radius: 6px !important;
      opacity: 1 !important;
      .bscroll-indicator {
        width: 6px !important;
        background: rgba(0, 0, 0, 0.1) !important;
        border-radius: 6px !important;
        border: none !important;
      }
    }
    .scroll-content {
      font-size: 14px;
      line-height: 200%;
      text-align: justify;
      color: rgba(0, 0, 0, 0.6);
    }
  }
  .common {
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    font-family: 'font_bold';
    color: rgba(0, 0, 0, 0.6);
    &.first {
      margin-bottom: 12px;
      padding-top: 49px;
    }
  }
  .close-activity {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    img {
      width: 56px;
      height: 56px;
    }
  }
}
</style>
