<template>
  <div class="sgy-swipe">

       <div v-if="list.length > 4" class="left-loop" :class="{disabled: !isCanClickLeft}" @click="moveLeft"> <Icon type="ios-arrow-back" size='24'/> </div>

       <div class="loop-content">
            <div class="contanier" :style="`transform: translateX(-${index * 104}px)`">
                <img v-for="(item, index) in list" :key="index" :src="item.key?`/data-platform-3/image-service/common/image_get?systemId=dataPlatform&key=${item.key}&width=96&height=95`:``">
            </div>
        </div>

        <div v-if="list.length > 4" class="right-loop" :class="{disabled: !isCanClickRight}" @click="moveRight"> <Icon type="ios-arrow-forward" size='24'/> </div>
  </div>
</template>

<script>
export default {
  components: {

  },

  mixins: [],

  props: {
    list: {
      type: Array,
      default: () => []

    }
  },

  data () {
    return {
      index: 0
    }
  },

  computed: {
    isCanClickLeft () {
      return this.index > 0
    },
    isCanClickRight () {
      return this.index + 4 < this.list.length
    }
  },

  mounted () {

  },

  methods: {
    moveLeft () {
      if (this.isCanClickLeft) {
        this.index--
      }
    },
    moveRight () {
      if (this.isCanClickRight) {
        this.index++
      }
    }
  }

}
</script>

<style scoped lang="less" >
.sgy-swipe {
    display: flex;
    .left-loop {
        color: #CACACA;
        padding-top: 35px;
        margin-right: 15px;
        cursor: pointer;
    }
    .right-loop {
        color: #CACACA;
        padding-top: 35px;
        cursor: pointer;
    }
    .disabled {
        //cursor: not-allowed;
       display: none;
    }
    .loop-content {
        width:450px;
        white-space: nowrap;
        overflow: hidden;
        .contanier {
            transition: transform 0.3s ease-in-out;
            img {
                vertical-align: middle;
                margin-right: 8px;
                width: 96px;
                height: 95px;
            }
        }

    }
}
</style>
