<!--
 * @Author: 王翠碧 1254597151@qq.com
 * @Date: 2023-05-22 22:41:29
 * @LastEditors: 王翠碧 1254597151@qq.com
 * @LastEditTime: 2023-05-24 23:13:26
 * @FilePath: \uniapp\src\components\widgets\user-banner\user-banner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view
    class="banner h-[200rpx] mx-[20rpx] mt-[20rpx] translate-y-0"
    v-if="content.data.length && content.enabled"
  >
    <swiper
      class="swiper h-full"
      :indicator-dots="content.data.length > 1"
      indicator-active-color="#1296DB"
      indicator-color="#ffffff"
      :autoplay="true"
    >
      <swiper-item
        v-for="(item, index) in content.data"
        :key="index"
        @click="handleClick(item.limk)"
      >
        <u-image
          mode="aspectFit"
          width="100%"
          height="100%"
          :src="getImageUrl(item.image)"
          :border-radius="14"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

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

const props = defineProps({
  content: {
    type: Object,
    default: () => ({}),
  },
  styles: {
    type: Object,
    default: () => ({}),
  },
});
const handleClick = (link: any) => {
  navigateTo(link);
};
const { getImageUrl } = useAppStore();
</script>

<style></style>
