<script setup lang="ts">
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import {findTags} from "~/api/cms/cmsArticle";

const props = withDefaults(
    defineProps<{
      data?: CmsArticle;
    }>(),
    {}
);
const i18n = useI18n();
const list = ref<CmsArticle[]>([])
onMounted(() => {
  setTimeout(() => {
    if(props.data?.tags){
      const tags = JSON.parse(props.data?.tags);
      findTags({
        tags: tags.join(',')
      }).then(data => {
        if(data){
          list.value = data.filter(d => d.model == 'product');
        }
      })
    }
  }, 500)
})

</script>

<template>
  <div class="relateproduct relate">
    <h4>{{ $t('productRelated') }}：</h4>
    <div class="py-3 px-1">
      <el-row :gutter="16">
        <el-col :span="6" v-for="(item,index) in list" :key="index" class="my-1">
          <a class="flex flex-col items-center text-center block" :href="detail(item)">
            <el-image :src="item.image" fit="fill" :alt="item.title" style="height: 150px;"/>
            <span class="py-1">{{ item.title }}</span>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
