<template>
  <div class="mb-6">
    <div class="flex items-center mb-2">
      <i
        :id="`term-${childData.id}`"
        class="iconfont text-lg mr-2"
        :class="[`icon-${childData.icon}`]"
      ></i>
      <h4 class="text-xl text-[#555]">
        {{ childData.label }}
      </h4>
    </div>
    <div class="flex items-center flex-auto">
      <div
        class="scroll-container relative bg-black/10 rounded-[50px] md:overflow-hidden p-[3px] overflow-y-auto"
        slidertab="sliderTab"
      >
        <ul
          class="relative whitespace-nowrap flex"
          style="flex-wrap: inherit"
          role="tablist"
        >
          <li
            class="anchor md:w-[120.891px] w-[107.3px] cursor-pointer rounded-[100px] bg-[#5961f9]"
            style="
              position: absolute;
              height: 28px;
              opacity: 1;
              transition: 0.35s;
            "
            :style="{ left: `${left}px` }"
          ></li>
          <li
            v-for="(child, index) in childData.children"
            class="h-auto w-auto cursor-pointer"
          >
            <a
              :id="`#term-${childData.id}-${child.id}`"
              class="h-7 leading-7 px-3 block relative text-[#888] text-center md:text-sm text-xs md:leading-7"
              :class="[index === currentFilter ? 'text-white' : '']"
              style="transition: 0.25s"
              :href="`#tab-${childData.id}-${child.id}`"
              @click.stop="onClick($event, child.alias, index)"
              >{{ child.label }}</a
            >
          </li>
        </ul>
      </div>
      <div class="flex-auto"></div>
      <a
        class="hidden md:block text-xs ml-2 text-[#282a2d] hover:text-[#5961f9]"
        :href="`/category/${childAlias}`"
        >查看更多 &gt;&gt;</a
      >
      <a
        class="md:hidden text-xs ml-2 text-[#282a2d] hover:text-[#5961f9]"
        :href="`/category/${childAlias}`"
        >&gt;&gt;</a
      >
    </div>
  </div>

  <!-- 内容区域 -->
  <div
    v-for="(childContentItem, childContentIndex) in childData.children"
    :key="childContentItem.id"
    v-show="currentFilter === childContentIndex"
    class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 md:gap-6 gap-4"
  >
    <div
      v-for="appItem in childContentItem.appVos"
      :key="appItem.id"
      class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"
    >
      <el-popconfirm
        v-if="appItem.isPopup == '1'"
        class="box-item"
        :title="appItem.popupContent"
        placement="top-start"
        width="280"
        :icon="Promotion"
        confirm-button-text="确认前往"
        cancel-button-text="取消"
        @confirm="onConfirm(appItem.id)"
      >
        <template #reference>
          <a
            :href="'/details/' + appItem.id"
            target="_blank"
            @click.stop="onNuxtLink"
          >
            <div class="group p-3">
              <div class="flex items-start space-x-4">
                <img
                  :src="'http://aitoolht.crgx.net' + appItem.image"
                  :alt="appItem.title"
                  class="w-10 h-10 md:w-14 md:h-14 object-cover rounded-lg"
                />
                <div>
                  <h3
                    class="font-bold md:text-base text-sm line-clamp-1 text-gray-800 transition group-hover:text-[#5961f9]"
                  >
                    {{ appItem.title }}
                  </h3>
                  <p
                    class="text-gray-600 text-xs mt-1 md:line-clamp-2 line-clamp-1"
                  >
                    {{ appItem.description }}
                  </p>
                </div>
              </div>
            </div>
          </a>
        </template>
      </el-popconfirm>
      <a v-else :href="'/details/' + appItem.id" target="_blank">
        <div class="group p-3">
          <div class="flex items-start space-x-4">
            <img
              :src="'http://aitoolht.crgx.net' + appItem.image"
              :alt="appItem.title"
              class="w-10 h-10 md:w-14 md:h-14 object-cover rounded-lg"
            />
            <div>
              <h3
                class="font-bold md:text-base text-sm line-clamp-1 text-gray-800 transition group-hover:text-[#5961f9]"
              >
                {{ appItem.title }}
              </h3>
              <p
                class="text-gray-600 text-xs mt-1 md:line-clamp-2 line-clamp-1"
              >
                {{ appItem.description }}
              </p>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Promotion } from "@element-plus/icons-vue";

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

const childAlias = ref(props.childData.children[0].alias);
// 阻止默认行为
function onNuxtLink(event: any) {
  event.preventDefault();
}
// 点击确认跳转
function onConfirm(id: number) {
  window.open(`/details/${id}`);
}
// 导航样式内容
const currentFilter = ref(0);
const left = ref(0);

// 切换分类内容
function onClick(event: any, alias: string, index: number) {
  let moveWidth = window.innerWidth > 768 ? 120.891 : 107.3;
  event?.preventDefault();
  childAlias.value = alias;
  currentFilter.value = index;
  left.value = index * moveWidth;
}
</script>