<template>
  <view
    v-if="fieldData.imageList.length"
    class="Mall4j component-image_ad"
    style="margin-top:-2rpx"
  >
    <!--一行一个-->
    <view v-if="fieldData.indicator === 1">
      <view
        v-for="(item, index) in fieldData.imageList"
        :key="index"
        class="one-line"
        :style="{height: fieldData.imgHeight + 'px'}"
        @tap.stop="adFun(item)"
      >
        <image
          v-if="showErrorImgList[index] !== 1"
          :style="{height: fieldData.imgHeight + 'px', width: '100vw'}"
          mode="scaleToFill"
          :src="util.addDomain(item.url)"
          @error="errImg(index)"
        />
        <image
          v-else
          :style="{height: fieldData.imgHeight + 'px', width: '100vw'}"
          mode="scaleToFill"
          src="@/static/images/def.png"
        />
      </view>
    </view>
    <!--轮播海报-->
    <view
      v-if="fieldData.indicator === 2"
      class="swiper-box"
    >
      <view :style="{height: fieldData.imgHeight + 'px',width: '100vw', overflow: 'hidden'}">
        <image
          v-if="showErrorImgList[swiperCurrent] !== 1"
          :src="fieldData.imageList[swiperCurrent].url"
          mode="scaleToFill"
          style="width:100vw;opacity: 0"
        />
        <image
          v-if="showErrorImgList[swiperCurrent] === 1"
          src="@/static/images/def.png"
          mode="scaleToFill"
          style="width:100vw;opacity: 0"
        />
      </view>

      <swiper
        :autoplay="autoPlay"
        :interval="interval"
        :circular="circular"
        :duration="duration"
        @change="swiperEnd"
      >
        <block
          v-for="(item, index) in fieldData.imageList"
          :key="index"
        >
          <swiper-item>
            <view :style="{height: fieldData.imgHeight + 'px',width: '100vw', overflow: 'hidden'}">
              <image
                v-if="showErrorImgList[index] !== 1"
                id="swiper-image"
                :style="{height: fieldData.imgHeight + 'px', width: '100vw'}"
                :src="util.addDomain(item.url)"
                mode="scaleToFill"
                class="swiper-image"
                @error="errImg(index)"
                @tap.stop="adFun(item)"
              />
              <image
                v-if="showErrorImgList[index] === 1"
                id="swiper-image"
                :style="{height: fieldData.imgHeight + 'px', width: '100vw'}"
                src="@/static/images/def.png"
                mode="scaleToFill"
                class="swiper-image"
                @tap.stop="adFun(item)"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>

      <!-- 轮播图指示点 -->
      <view
        v-if="fieldData.swiperOption.indicatorDots"
        class="dots"
        :style="{bottom: 'calc(' + (fieldData.swiperOption.indicatorBottom || 10) + 'px + 10rpx)'}"
      >
        <block
          v-for="(item, idx) in fieldData.imageList"
          :key="idx"
        >
          <view
            class="dot"
            :style="{'background-color': idx === swiperCurrent ? fieldData.swiperOption.indicatorActiveColor : fieldData.swiperOption.indicatorColor, }"
          />
        </block>
      </view>
    </view>
    <!--小图横向滑动-->
    <view v-if="fieldData.indicator === 3">
      <scroll-view
        scroll-x
        class="ad-scroll"
      >
        <view
          v-for="(item, index) in fieldData.imageList"
          :key="index"
          class="ad-scroll-item"
          :style="{height: fieldData.imgHeight + 'px'}"
        >
          <image
            v-if="showErrorImgList[index] !== 1"
            style="width:100vw; height: 100%;"
            mode="scaleToFill"
            :src="util.addDomain(item.url)"
            class="sli-image"
            @error="errImg(index)"
            @tap.stop="adFun(item)"
          />
          <image
            v-else
            style="width:100vw; height: 100%;"
            mode="scaleToFill"
            src="@/static/images/def.png"
            class="sli-image"
            @tap.stop="adFun(item)"
          />
        </view>
      </scroll-view>
    </view>

    <!--热区-->
    <view v-if="fieldData.indicator === 4">
      <view
        v-for="(item, index) in fieldData.imageList"
        :key="index"
        class="hot-area-4"
      >
        <image
          style="width:100vw;"
          mode="widthFix"
          :src="util.addDomain(item.url)"
        />
        <view
          v-for="(boxItem, boxIndex) in item.activeBoxs"
          :key="boxIndex"
          class="hot-area-one"
          :style="'width:' + (boxItem.width*dpr) + 'px;height:' + (boxItem.height*dpr) + 'px;transform: translateX(' + (boxItem.translateX*dpr) + 'px) translateY(' + (boxItem.translateY*dpr) + 'px);'"
          @tap.stop="handleRedirect(boxItem)"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const props = defineProps({
  indicatorDots: {
    type: Boolean,
    default: true
  },
  autoPlay: {
    type: Boolean,
    default: true
  },
  circular: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  },
  duration: {
    type: Number,
    default: 500
  },
  fieldData: {
    type: Object,
    default: () => ({
      indicator: 0,
      imageList: []
    })
  },
  shopId: {
    type: [Number, String],
    default: 0
  },
  will: {
    // 需要获取的类型 默认首页
    type: String,
    default: 'home' // home 首页 ，feature 微页面  传 化名ID , goods 商品详情页，传商品ID ,ad 公共广告

  }
})

const dpr = ref(375 / 491)
const swiperCurrent = ref(0)
const showErrorImgList = ref([])

onMounted(() => {
  uni.getSystemInfo({
    success: res => {
      dpr.value = res.screenWidth / 491
    }
  })
  showErrorImgList.value = props.fieldData.imageList.map(() => {
    return 0
  })
})

/**
 * 点击事件
 */
const adFun = (item) => {
  util.toRedirectLink(item.path.type, item.path.link, props.shopId)
}

// 热区跳转
const handleRedirect = (item) => {
  if (item.link === '/package-activities/pages/distribution-center/distribution-center') {
    util.checkAuthInfo(async () => {
      onGetDistInfo(item)
    })
  } else {
    util.toRedirectLink(item.type, item.link, props.shopId)
  }
}

/**
 * 查询分销相关信息
 */
const onGetDistInfo = (item) => {
  // 查询分销开关是否开启
  const params = {
    url: '/mall4cloud_marketing/distribution_set/info',
    method: 'GET',
    dontShowLogin: true
  }
  http.request(params).then((res) => {
    if (res.distributionSwitch === 1) {
      util.toRedirectLink(item.type, item.link, props.shopId)
    } else {
      uni.showToast({
        title: $t('distribution.distributionErrorTxt'),
        icon: 'none'
      })
    }
  })
}

/** 轮播Index */
const swiperEnd = (ev) => {
  swiperCurrent.value = ev.detail.current || 0
}

const errImg = (index) => {
  showErrorImgList.value[index] = 1
  showErrorImgList.value[index] = 1
}

</script>
<style lang="scss" scoped>
@use "index";
</style>
