<template>
  <div class="ecommerce-banner" :style="{ height: height }">
    <el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <costomImg :url="item" :preview-list="srcList" :is-view="isViewVal" style="height: 100%; object-fit: fill"></costomImg>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import { getAssetsFile } from '@/utils';
import costomImg from '@/components/costomImg.vue';

const props = defineProps({
  height: { type: String, default: '320px' },
  name: { type: String, default: 'agricultural' },
  imglist: {
    type: Array,
    default: () => {
      return [];
    },
  },
  indicatorPos: {
    type: String,
    default: '',
  },
  arrow: {
    type: String,
    default: 'hover',
  },
  isView: {
    type: Boolean,
    default: false,
  },
});

let nameVal = ref(props.name);
let list = ref([]);

let srcList = computed(() => {
  let _list = [];
  _list = props.imglist.map((m) => {
    return getAssetsFile(m)?.href ?? '';
  });
  return _list;
});

let isViewVal = ref(props.isView);

watch(
  () => (props.list, props.imglist, props.isView),
  () => {
    nameVal.value = props.name;
    list.value = props.imglist;
    isViewVal.value = props.isView;
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.ecommerce-banner {
  width: 100%;
  position: relative; /* 确保内部元素定位正确 */
  ::v-deep() {
    .el-image {
      width: 100%;
      height: 100%;
      img {
        object-fit: fill !important;
      }
    }
    .el-carousel__item {
      border-radius: 16px !important;
    }
  }
}
</style>
