<template>
  <div class="wrapper">
    <div id="img-box" class="f-row">
      <template v-for="(list,index) in lists">
        <div class="img-box" :key="index">
          <img src="../../static/img/img3.png" alt />
          <p>中国政府网站</p>
        </div>
      </template>
    </div>
    <img
      v-if="leftPos != 0"
      @click="scrollFeeds('left')"
      class="mv-btn left-side"
      src="../../static/img/left.png"
      alt
    />
    <img
      @click="scrollFeeds('right')"
      class="mv-btn right-side"
      src="../../static/img/right.png"
      alt
    />
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      lists: [1, 2, 3, 4, 5, 6, 7],
      leftPos: 0
    }
  },
  computed: {},
  watch: {},
  methods: {
    scrollFeeds: function (btn) {
      let feeds = document.querySelector('.f-row')
      if (btn === 'left') {
        this.leftPos += 460
        let scrollAmount = 0
        var slideTimer = setInterval(function () {
          feeds.scrollLeft -= 10
          scrollAmount += 10
          if (scrollAmount >= 460) {
            window.clearInterval(slideTimer)
          }
        }, 25)
      } else {
        this.leftPos -= 460
        let scrollAmount = 0
        // eslint-disable-next-line no-redeclare
        var slideTimer = setInterval(function () {
          feeds.scrollLeft += 10
          scrollAmount += 10
          if (scrollAmount >= 460) {
            window.clearInterval(slideTimer)
          }
        }, 25)
      }
    }
  },
  created () {},
  mounted () {}
}
</script>

<style lang='scss' scoped>
.wrapper {
  width: 100%;
  height: auto;
  box-sizing: border-box;

  #img-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow-y: scroll;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }

    .img-box {
      width: 239px;
      height: 196px;
      background-color: #ffffff;
      box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-right: 20px;

      img {
        width: 239px;
        height: 130px;
        border-radius: 5px 5px 0px 0px;
      }

      p {
        font-family: "MicrosoftYaHei";
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        line-height: 60px;
        letter-spacing: 0px;
        color: #333333;
      }
    }
  }

  .mv-btn {
    cursor: pointer;
    height: 60px;
    width: 60px;
    border-radius: 18px;
    z-index: 20;
    position: absolute;
    &.left-side {
      left: -18px;
      top: 115px;
    }
    &.right-side {
      right: -18px;
      top: 115px;
    }
  }
}
</style>
