<script setup lang="ts">
import { fetchBanners } from '@/hooks/request/banner';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter();
const { banners } = fetchBanners();
const route = useRoute();
const bannerInfo = computed(() => {
  // console.log(banners.value);
  return banners.value?.find((item: any) => item.code === route.params.code);
});
// 当前是否处于分享页面
const hasShare = defineModel<boolean>('hasShare', { default: false });
function handleButtonClick() {
  if (!bannerInfo.value?.url) {
    router.push({ name: 'intelligentGeneration' });
    return;
  }

  window.location.href = bannerInfo.value?.url;
}

/**
 * 在挂载之后重新修改 html title 内容
 */
setTimeout(() => {
  document.title = bannerInfo.value?.title || '伊调研';
}, 800);
</script>

<template>
  <section class="banner-container" :style="{ background: hasShare ? 'white' : undefined }">
    <section class="msg-info">
      <h3>{{ bannerInfo?.title }}</h3>
      <el-space spacer="|">
        <!-- <el-text type="success">{{ bannerInfo.characters }}</el-text> -->
        <el-text>{{ bannerInfo?.publish_time.split('-').join('.') }} 发布</el-text>
      </el-space>
    </section>
    <!-- banner内容 -->
    <article>
      <!-- 根据banner的类型使用不同的方式渲染 -->
      <section class="banner-text" v-if="bannerInfo?.type === 0">
        <p>{{ bannerInfo.synopsis }}</p>
      </section>
      <div class="banner-image" v-else-if="bannerInfo?.type === 1">
        <el-image fit="cover" loading="lazy" :src="bannerInfo.file_address" />
      </div>
      <section class="banner-video" v-else-if="bannerInfo?.type === 2">
        <video width="100%" height="auto" controls>
          <source :src="bannerInfo.file_address" type="video/mp4" />
        </video>
      </section>
    </article>

    <section
      v-if="bannerInfo?.is_display_button && !hasShare"
      style="margin-top: 20px; width: 100%; position: sticky; bottom: 10px"
    >
      <!--    立即进入   -->
      <el-button
        style="width: 100%; height: 50px; border-radius: 15px"
        color="#70b937"
        @click="handleButtonClick"
      >
        <el-text style="color: white">{{ bannerInfo?.button_name }}</el-text>
      </el-button>
    </section>
  </section>
</template>

<style lang="scss" scoped>
@use '@/assets/css/theme' as *;

.banner-container {
  padding: $gap * 2;
  .msg-info {
    font-family: PingFangSC-Medium;
    h2 {
      font-size: 16px;
      line-height: 22px;
      font-weight: 500;
    }
  }

  .banner-text,
  .banner-image,
  .banner-video {
    margin-top: $gap;
    border-radius: $card-radius;
    overflow: hidden;
    line-height: 0;
  }
}
</style>
