<template>
  <div class="details-body">
    <h-navbar title="details" :handleBack="bank" />
    <div class="details" v-if="detailData.length > 0">
      <img style="width: 100%" :src="getImage(detailData[0].displayImg)" />
      <div class="title">{{ detailData[0].title }}</div>
      <!-- <div class="time">
        {{ fomartDate(detailData[0].createdAt, "YYYY/MM/DD") }} -
        {{ fomartDate(detailData[0].updatedAt, "YYYY/MM/DD") }}
      </div> -->
      <div
        style="overflow: hidden; line-height: 0.5rem"
        v-if="detailData[0].content"
        @click="handleClick"
        v-html="otherImg(detailData[0].content)"
      ></div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import storage, { actions } from "@/utils/storage";
import { getImage, otherImg, fomartDate, handleDomClick } from "@/utils";
import { gameListStore } from "@/stores/modules/game-list";
const gameStore = gameListStore();

const router = useRouter();
const detailData = computed(() => {
  return gameStore.announcementData.filter(
    (item: any) => item.adId == storage.getSessionStorage(actions.AD_ID) || ""
  );
});
console.log(detailData, "detailData");
const bank = () => {
  router.push("/activity");
};
const handleClick = (event: any) => {
  handleDomClick(event)
};
onMounted(async () => {});
</script>
<style lang='scss' scoped>
.details-body {
  .details {
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    background-color: #091317;
    .title {
      text-align: left;
      font-size: 0.4rem;
      background: linear-gradient(to bottom, #54cbf5, #2cb9f5, #03adff);
      -webkit-background-clip: text;
      color: transparent;
      font-weight: 600;
      padding: 0.4rem 0;
    }
    .time {
      font-size: 0.3rem;
      color: #868787;
    }
  }
}
</style>