<template>
  <div class="slide">
    <a-carousel autoplay arrows dots-class="slick-dots slick-thumb">
      <a slot="customPaging" slot-scope="props">
        <div class="icon"><img src="../../../assets/jiao.png" alt=""></div>
        <img :src="getImgUrl(props.i)"/>
      </a>
      <div v-for="(item,index) in list2" :key="index">
        <div class="slidemask">
          <p>{{ list[index] }}</p>
        </div>
        <img :src="item"/>
      </div>
    </a-carousel>
  </div>
</template>

<script>
import slide1 from '../../../assets/slidesmall1.png'
import slide2 from '../../../assets/slidesmall2.png'
import slide3 from '../../../assets/slidesmall3.png'
import slide4 from '../../../assets/slidesmall4.png'
import slide5 from '../../../assets/slidesmall5.png'

export default {
  name: 'newsl',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      active: 0,
      time: null,
      list2: [slide1, slide2, slide3, slide4, slide5],
      list: [
        '自然资源和规划局耕地后备资源与闲散土地调查评价服务项目',
        '2自然资源和规划局耕地后备资源与闲散土地调查评价服务项目',
        '3自然资源和规划局耕地后备资源与闲散土地调查评价服务项目',
        '4自然资源和规划局耕地后备资源与闲散土地调查评价服务项目',
        '5自然资源和规划局耕地后备资源与闲散土地调查评价服务项目',
      ]
    }
  },
  watch: {},
  mounted () {
    this.getswich()
  },
  methods: {
    getImgUrl (i) {
      return this.list2[i]
    },
    getactive () {
      if (this.active < 4) {
        this.active = this.active + 1
      } else {
        this.active = 0
      }
    },
    getswich () {
      clearInterval(this.time)
      let that = this
      this.time = window.setInterval(() => {
        setTimeout(() => {
          that.getactive()
        }, 0)
      }, 3000)
    },
  }
}
</script>

<style lang="scss" scoped>
.slide {
  width: 546px;
  margin-left: 16px;

  ::v-deep {
    /* For demo */
    .slick-dots {
      height: 74px;
    }

    .slick-slide img {
      width: 546px;
      height: 330px;
    }

    .slick-thumb {
      bottom: -80px;
      display: flex !important;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      flex-wrap: nowrap;
      flex-direction: row;
    }

    .slick-thumb li {
      width: 101px;
      height: 74px;
      position: relative;

      .icon {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -5px;
        z-index: -1;
      }
    }

    .slick-thumb li img {
      width: 101px;
      height: 74px;
      border: 1px solid rgba(#30A89C, 0);
      box-sizing: border-box;
    }

    .slick-thumb li.slick-active img {
      border: 1px solid rgba(#30A89C, 1);
      box-sizing: border-box;
    }

    .slick-thumb li.slick-active {
      .icon {
        position: absolute;
        top: -5px;
        left: 50%;
        margin-left: -5px;
        z-index: 1;
      }
    }
  }
}

.slidebody {
  height: 330px;
  width: 546px;
  position: relative;


}

.slidefoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-top: 10px;

  .slidesmall {
    width: 101px;
    height: 74px;
    cursor: pointer;
    position: relative;

    img.smallimg {
      position: relative;
      width: 100%;
      height: 100%;
    }

    border: 1px solid rgba(#30A89C, 0);
    box-sizing: border-box;

    .icon {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -5px;
      z-index: -1;
    }
  }

  .slidesmall.active {
    border: 1px solid rgba(#30A89C, 1);
    box-sizing: border-box;

    .icon {
      position: absolute;
      top: -14px;
      left: 50%;
      margin-left: -5px;
      z-index: 1;
    }
  }
}

.icon img {
  width: 10px !important;
  height: 5px !important;
  border: none !important;
  position: absolute;
}

.slidemask {
  position: absolute;
  bottom: 5px;
  width: 546px;
  height: 49px;
  background: rgba(#000000, 0.36);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  z-index: 10;

  p {
    font-size: 16px;
    font-family: PingFang;
    font-weight: 500;
    color: #FFFFFF;
    margin-bottom: 0;
    text-indent: 10px;
  }
}
</style>