<script setup lang="ts">
import AudioPlayer from "~/organisms/audioPlayer/AudioPlayer.vue";
import ArticlePodcast from "~/organisms/article/ArticlePodcast.vue";

const props = defineProps<{ article: any }>();

const getSrc = (htmlString: string) => {
  const srcRegex = /src="([^"]+)"/;
  return htmlString?.match(srcRegex);
};
const getArticleById = async (articleId: number) => {
  try {
    const { apiUrl } = useRuntimeConfig().public;
    const { item }: any = await $fetch(`${apiUrl}/cms/article/${articleId}`, {
      headers: {
        Site: "1",
      },
    });
    return item;
  } catch (error) {
    handleError(error);
  }
};
const listArticle = computed(() => {
  // if (props.article && props.article.audioIds) {
  //   return props.article.audioIds.split(",").map((audioId: number) => getArticleById(audioId));
  // }
  // return []
    const test = "8,2,3";
    return test.split(",").map((audioId) => getArticleById(audioId));
});
</script>

<template>
  <div class="w-full grid grid-cols-12 gap-4" v-if="listArticle?.length > 0">
    <div class="col-span-9 h-60 md:h-100 relative bg-center" :style="'background-image: url(' + listArticle[0]?.thumbnail + '); background-size: cover;'">
      <div class="absolute inset-0 bg-black opacity-80 z-1"></div>
      <Wrap class="relative flex items-center justify-center">
        <div class="w-full h-40 md:h-80 absolute inset-0 z-2">
          <div class="grid grid-cols-10 w-full">
            <div class="col-span-3 flex justify-center items-center h-60 md:h-80 mx-2 md:mx-8">
              <div
                class="h-40 md:h-60 w-full rounded-tl-3xl rounded-br-3xl border-double px-2 overflow-x-hidden relative overflow-y-hidden bg-cover z-1 after:z-2 after:content-[''] after:w-full after:h-full after:top-0 after:left-0 after:bg-#000 after:opacity-30 after:absolute"
                :style="{ backgroundImage: `url(${listArticle[0]?.thumbnail})` }"
              >
                <img :src="listArticle[0]?.thumbnail" alt="" class="relative z-3 h-40 md:h-60 w-full object-contain" />
              </div>
            </div>
            <div class="col-span-7 grid grid-cols-12 relative">
              <div class="col-span-12 w-full grid grid-cols-12 mt-8 md:mb-4">
                <div class="col-span-11">
                  <h1 v-html="listArticle[0]?.sub" class="text-xl font-bold text-white opacity-60"></h1>
                  <h1 class="text-md md:text-3xl text-[#fff] font-bold font-['SFD']">{{ listArticle[0]?.title }}</h1>
                  <time class="xs:mt-0.5 text-[10px] md:text-sm text-[#fff]">
                    {{ utils.dateFormat(listArticle[0]?.createdOn, "dddd, DD/MM/YYYY - HH:mm") }}
                  </time>
                </div>
              </div>
              <div class="col-span-12 w-full mb-4 hidden md:block">
                <div v-html="listArticle[0]?.intro" class="text-left text-xl text-[#fff] font-['SFD']"></div>
              </div>
              <div class="col-span-11">
                <AudioPlayer :src="getSrc(listArticle[0]?.detail)?.[1]" />
              </div>
            </div>
          </div>
        </div>
      </Wrap>
    </div>
    <div class="col-span-3">
      <div class="flex items-center mt-5 mb-5">
        <ul class="bg-red-500 text-white text-sm font-semibold hover:bg-red-400 font-medium inline-block rounded-tl-lg rounded-br-lg">
          <li class="inline-block uppercase rounded-l-lg border-radius border-red-500 border-r-0 px-2 py-1 text-center block transition-transform duration-300 transform hover:scale-105">Podcast Hôm nay</li>
        </ul>
        <div class="border border-slate-7 flex-grow ml-4"></div>
      </div>
      <div class="grid w-full">
        <div class="" v-for="(item, index) in listArticle.slice(1)" :key="index">
          <ArticlePodcast mode="podcast" image-size="md" text-size="lg" :createdOn="item?.createdOn" :title="item?.title" :slug="'/' + item.category?.code + '/' + item.code" :thumb="item?.thumbnail" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.name {
  text-align: center;
  line-height: 100px;
}
</style>
