<!--
 * @Author: 王翠碧 1254597151@qq.com
 * @Date: 2023-05-22 22:41:29
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-13 11:57:28
 * @FilePath: \uniapp\src\components\widgets\banner\banner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view
        class="translate-y-0 mt-3 mx-[20rpx] mb-[30rpx] category"
        v-if="content.data.length && content.enabled"
    >
        <image
            :src="getImageUrl(item.image)"
            class="rounded-lg w-[100%] h-[250rpx]"
            mode="aspectFill"
            v-for="(item, index) in showImageList"
            :key="index"
            @click="handleClick(item.link)"
        ></image>
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'
import { computed } from 'vue'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})
const { getImageUrl } = useAppStore()
const handleClick = (link: any) => {
    const id = link.path.split('?')[1].split('=')[1]
    navigateTo({
        path: '/pages/category/index?id=' + id,
        query: link.query,
        type: link.type,
        isTab: true
    })
}

const showImageList = computed(() => {
    return props.content.data.filter(i => i.showImage)
})
</script>

<style lang="scss" scoped>
.category {
    display: grid;
    grid-template-columns: repeat(2, 347rpx);
    grid-column-gap: 16rpx;
    grid-row-gap: 16rpx;
}
</style>
