<template>
  <!-- 轮播-carousel 水平滑动-row 热区-tap 垂直叠放-colum-->
  <view class="dec-imageLink referW" :class="{ radius: arg.radius }">
    <template v-if="arg.styleArg === 'carousel'">
      <swiper
        class="imgH"
        :indicator-dots="isScroll"
        :autoplay="true"
        :circular="true"
        :interval="3000"
        :duration="500"
      >
        <swiper-item v-for="(item, k) in goodsList" :key="k">
          <image
            :data-first="k == 0"
            :data-num="1"
            :data-space="space"
            :data-lacuna="0"
            class="imgH"
            @load="win.imgLoad"
            @tap="toNavLink(item)"
            :src="decImgDomain(item.img)"
            mode="aspectFit"
          ></image>
        </swiper-item>
      </swiper>
    </template>
    <view class="row" v-else-if="arg.styleArg === 'row'">
      <scroll-view class="scroll-w" :scroll-x="isScroll" :scroll-left="0">
        <view v-for="(item, i) in goodsList" :key="i" class="imgH">
          <image
            :data-first="i == 0"
            show-menu-by-longpress="true"
            :data-num="scrollNum"
            :data-space="space"
            :data-lacuna="lacuna"
            @load="win.imgLoad"
            @tap="toNavLink(item)"
            mode="aspectFit"
            :src="decImgDomain(item.img)"
          />
        </view>
      </scroll-view>
    </view>
    <view class="tap" v-else-if="arg.styleArg === 'tap'">
      <image
        class="imgH"
        show-menu-by-longpress="true"
        :data-first="true"
        @load="win.imgLoad"
        :data-num="1"
        :data-space="space"
        :data-lacuna="0"
        mode="aspectFit"
        :src="decImgDomain(goodsList[0].img)"
      />
      <view
        class="mask"
        v-for="(a, j) in arg.taps"
        :key="j"
        :style="{ width: a.width, height: a.height, top: a.top, left: a.left }"
        @tap="toNavLink(a)"
      ></view>
    </view>
    <template v-else-if="arg.styleArg === 'column'">
      <view
        class="colum"
        v-for="(item, h) in goodsList"
        :key="h"
        :style="{
          paddingRight: space + 'px',
          paddingLeft: space + 'px',
          paddingTop: h == 0 ? 0 : lacuna + 'px',
        }"
      >
        <image
          class="imgH"
          show-menu-by-longpress="true"
          @tap="toNavLink(item)"
          mode="widthFix"
          :src="decImgDomain(item.img)"
        />
      </view>
    </template>
    <template v-else>
      <view class="colum">
        <image
          class="imgH"
          show-menu-by-longpress="true"
          mode="widthFix"
          :src="decImgDomain(arg.img)"
        />
      </view>
    </template>
  </view>
</template>
<!--#ifdef MP-WEIXIN-->
<script module="win" lang="wxs" src="./imgSeter.wxs"></script>
<!--#endif-->
<script>
// #ifdef H5
import imgLoad from "./imgSeter.js";
// #endif
export default {
  inject: ["decImgDomain", "decAxios"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      windowWidth: 0,
      arg: null,
      goodsList: [], //轮播数据
      isScroll: false, //轮播
      scrollNum: 1,
      space: false, //页面边距
      lacuna: false, //图片间距
      // #ifdef H5
      win: { imgLoad },
      // #endif
      columSpace: "",
      columLacuna: "",
    };
  },
  created() {
    this.windowWidth = uni.getSystemInfoSync().windowWidth;
    this.arg = this.tab.arg;
    this.initData();
    this.scrollNum = parseInt(this.arg.rowNum || 1);
    this.isScroll = (function (len, num) {
      return len > num;
    })(this.goodsList.length, this.scrollNum);
    this.space = this.arg.space || 0;
    this.lacuna = this.arg.lacuna || 0;
    this.columSpace = `0 ${this.space}px`;
    this.columLacuna = `0 ${this.space}px`;
  },
  methods: {
    initData() {
      if (this.arg.ids.length > 0) {
        this.goodsList = this.arg.ids;
      } else {
        this.goodsList = [
          {
            img: "",
            title: "图片",
            linkArg: {},
          },
        ];
      }
    },
    toNavLink(item) {
      let linkArg = item.linkArg;
      if (linkArg && linkArg.path) {
        this.decAxios.decEventHandler(
          {
            moudle: "imageLink",
            type: "detail",
            desc: "跳绑定的连接",
          },
          linkArg,
          null
        );
      }
    },
  },
};
</script>
