<template>
  <div class="activities">
    <van-row gutter="7">
      <van-col span="12">
        <van-swipe :autoplay="autoplay" indicator-color="#000000" @change="swipeChange">
          <van-swipe-item v-for="(item, index) in centerLeftList" :key="index">
            <a class="link" :href="item.url">
              <img class="vimg" :src="item.image" alt="极度证券">
            </a>
          </van-swipe-item>
        </van-swipe>
        <div class="number" v-if="centerLeftList.length">
          {{ targetIndex + 1 }}/{{ centerLeftList.length }}
        </div>
      </van-col>
      <van-col span="12">
        <van-swipe :autoplay="autoplay1" indicator-color="#000000" @change="swipeChange1">
          <van-swipe-item v-for="(item, index) in centerRightList" :key="index">
            <a class="link" :href="item.url">
              <img class="vimg" :src="item.image" alt="极度证券">
            </a>
          </van-swipe-item>
        </van-swipe>
        <div class="number" v-if="centerRightList.length">
          {{ targetIndex1 + 1 }}/{{ centerRightList.length }}
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  props: ['centerLeftList', 'centerRightList'],
  data () {
    return {
      targetIndex: 0,
      targetIndex1: 0,
    }
  },
  computed: {
    autoplay() {
      if (this.centerLeftList[this.targetIndex]) {
        return (this.centerLeftList[this.targetIndex].s * 1000)
      }
      return 3000
    },
    autoplay1() {
      if (this.centerRightList[this.targetIndex]) {
        return (this.centerRightList[this.targetIndex].s * 1000)
      }
      return 3000
    }
  },
  methods: {
    swipeChange(index) {
      this.targetIndex = index
    },
    swipeChange1(index) {
      this.targetIndex1 = index
    }
  }
}
</script>
<style lang="less" scoped>
.van-col {
  position: relative;
  .number {
    position: absolute;
    top: 14px;
    right: 12px;
    color: #61438D;
    font-size: 12px;
  }
}
.vimg {
  display: block;
  width: 100%;
}
.activities {
  padding-bottom: 5px;
  .link {
    display: block;
    border-radius: 8px;
    overflow: hidden;
  }
}
::v-deep {
  .van-swipe__indicator {
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
    opacity: 1;
  }
}
</style>