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

       <div v-if="isShowArrow" 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 * 180}px)`">
                <span  v-for="(item, index) in list" :key="index">
                    <img :src="item.key?`/data-platform-3/image-service/common/image_get?systemId=dataPlatform&key=${item.key}&width=96&height=95`:``" @click="onClick(item)">
                    <span class="alt-name">{{item.name}}</span>
                </span>

            </div>
        </div>

        <div v-if="isShowArrow" 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,
      isShowArrow: false,
      SC: 0,
      BY: 0
    }
  },

  computed: {
    isCanClickLeft () {
      return this.index > 0
    },
    isCanClickRight () {
      return (this.index * 180) + this.BD < this.SC
    }
  },
  watch: {
    list () {
      this.checkArrow()
    }
  },
  mounted () {
    this.checkArrow()
  },

  methods: {
    checkArrow () {
      this.$nextTick(() => {
        this.SC = document.querySelector('.pic-swipe .contanier').scrollWidth
        this.BD = document.querySelector('.pic-swipe').clientWidth
        this.isShowArrow = this.SC > this.BD
      })
    },
    moveLeft () {
      if (this.isCanClickLeft) {
        this.index--
      }
    },
    moveRight () {
      if (this.isCanClickRight) {
        this.index++
      }
    },
    onClick (key) {
      this.$emit('onClick', key)
    }
  }

}
</script>

<style scoped lang="less" >
.pic-swipe {
    display: flex;
    .left-loop, .right-loop {
        color: #999DA1;
        padding-top: 68px;
        //margin-right: 15px;
        cursor: pointer;
        background-color: #EEEEEE;
        &:hover {
          background-color: #DDDDDD;
        }
    }
    .left-loop {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .right-loop {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    .disabled {
        //cursor: not-allowed;
       display: none;
    }
    .loop-content {
        white-space: nowrap;
        overflow: hidden;
        margin: 0 5px;
        .contanier {
            transition: transform 0.3s ease-in-out;
            >span {
                position: relative;
                cursor: pointer;
                img {
                    vertical-align: middle;
                    margin-right: 14px;
                    width: 180px;
                    max-height: 152px;
                }
                .alt-name{
                    position: absolute;
                    left: 3px;
                    background:#fff;
                    z-index: 3;
                    font-size: 14px;
                    color: #212830;
                    padding: 4px 10px;
                    margin: 4px 0 0 4px;
                    box-shadow: 0 2px 8px 0 rgba(44,48,62,0.10);
                    border-radius: 2px;
                }
            }
        }

    }
}
</style>
