<template>
  <a-carousel arrows dots-class="slick-dots slick-thumb">
    <a slot="customPaging" slot-scope="props">
      <img :src="getImgUrl(props.i)" />
    </a>
    <div v-for="item in num">
      <div class="mask">
        <div class="con">
          <!-- 文字 -->
        </div>
        <img :src="`${baseUrl}/${type}/1-${item}.jpg`" />
      </div>
    </div>
  </a-carousel>
</template>

<script>
const baseUrl = 'https://www.sxgreenvalley.com/gateway/greenvalley/uploads';
export default {
  props: {
    type: {
      type: String,
      default: 'stkj',
    },
    num: {
      type: Number,
      default: 3,
    }
  },
  data() {
    return {
      baseUrl,
    };
  },
  methods: {
    getImgUrl(i) {
      return `${this.baseUrl}/${this.type}/1-${i+1}.jpg`;
    },
  },
};
</script>

<style scoped>
/* For demo */
.ant-carousel >>> .slick-dots {
  height: auto;
}
.ant-carousel >>> .slick-dots li {
  margin: 0 8px;
}
.ant-carousel >>> .slick-slide img {
  position: absolute;
  display: block;
  margin: auto;
  width: 100%;
  height: 100%;
}
.ant-carousel >>> .slick-thumb {
  bottom: 20px;
  z-index: 99;
}
.ant-carousel >>> .slick-thumb li {
  width: 160px;
  height: 64px;
}
.ant-carousel >>> .slick-thumb li img {
  width: 100%;
  height: 100%;
  filter: grayscale(100%);
}
.ant-carousel >>> .slick-thumb li.slick-active img {
  filter: grayscale(0%);
}

.mask{
    width: 1457px;
    height: 517px;
    margin: auto;
    position: relative;
}

.mask .con{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,.5); */
  z-index: 9;
}
</style>
