<style lang="less" scoped>
@import "./index.less";
</style>
<template>
  <div class="swiper">
    <swipe :show-indicators="showIndicators" :vertical="vertical" :duration="duration" :autoplay="autoplay" @change="bindchange" :loop="loop" bind:style="{height:maxHeight + 'px;'}">
      <div v-for="(item, index) in imageList" :key="index">
        <swipe-item :style="getSwiperItemStyle">
          <navigator :url="item.jumpLink">
            <yp-image :src="item.picUrl" @load="imageLoad" @on-click="onClick" :radius="radius" :fit="getImageFit" :height="height" />
          </navigator>
        </swipe-item>
      </div>
    </swipe>
  </div>
</template>
<script>
import Navigator from '../navigator';
import Image from '../image';

// import { Swipe, SwipeItem } from 'vant';
import Swipe from '../swipe';
import SwipeItem from '../swipe-item';

export default {
  name: 'swipe-image',
  components: {
    Navigator,
    YpImage: Image,
    Swipe,
    SwipeItem
  },
  /**
   * 组件的属性列表
   */
  props: {
    /**
     * 图片填充模式
     * widthFix:图片跟屏幕的宽度一样，进行等比缩放
     * heightFix:缩放模式，高度不变，宽自动变化，保持原图宽高比不变 （高度以传入的高度为准）
     */
    fit: {
      type: String,
      default: 'widthFix'
    },
    /**
     * 图片地址
     * {
     *  'picUrl':''   // 显示图片
     *  'jumpLink': ''    // 链接地址
     * }
     */
    imageList: {
      type: Array,
      default () {
        return [];
      }
    },
    /**
    * 自动轮播间隔，单位为 ms
    */
    autoplay: {
      type: Number,
      default: 5000
    },
    /**
     * 动画时长，单位为 ms
     */
    duration: {
      type: Number,
      default: 500
    },
    /**
     * 初始位置索引值
     */
    initialSwipe: {
      type: Number,
      default: 0
    },
    /**
    * 是否开启循环播放
    */
    loop: {
      type: Boolean,
      default: true
    },
    /**
    * 	是否显示指示器
    */
    showIndicators: {
      type: Boolean,
      default: true
    },

    /**
     * 指示器颜色
     */
    indicatorColor: {
      type: String,
      default: '#000'
    },
    /**
     * 是否为纵向滚动
     */
    vertical: {
      type: Boolean,
      default: false
    },
    /**
     * 是否可以通过手势滑动
     */
    touchable: {
      type: Boolean,
      default: true
    },
    /**
     * 圆角大小，默认单位为px
     */
    radius: {
      type: [String, Number],
      default: '8'
    },

    /**
     * 页面边距
     */
    margin: {
      type: [String, Number],
      default: 0
    },
    /**
     * 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 (图片间距)
     */
    nextMargin: {
      type: Number,
      default: 0
    },
    /**
     * 是否可以点击跳转
     */
    canJump: {
      type: Boolean,
      default: true
    },
    /**
    * 高度，默认单位为px (当type=heightFix时才会用到)
    */
    height: {
      type: [String, Number]
    },
  },

  /**
   * 组件的初始数据
   */
  data () {
    return {
      imageWidths: [],
      // 默认
      current: 0,
      // 最大的高度
      maxHeight: 0
    };
  },
  computed: {
    /**
     * 获得swiperItems样式
     */
    getSwiperItemStyle () {
      let style = '';
      if (this.margin > 0) {
        style += `padding-left:${this.margin}px;`;
      }
      if (this.fit === 'heightFix' && this.radius) {
        style += `border-radius:${this.radius}px;`;
      }
      return style;
    },
    /**
     * 获得图片的fit
     */
    getImageFit() {
      return this.fit;
    }
  },
  watch: {
    imageList: {
      deep: true,
      handler() {
        // 强制刷新（数组，有时增加页面不重新渲染）
        this.$forceUpdate();
      }
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {

    onClick(e) {
      const index = e.target.dataset.id;
      this.$emit('on-click', index);
    },
    bindchange (index) {
      // console.log(e.detail.current)
      this.current = index;
    },
    imageLoad (e) { // 获取图片真实宽度
      if (this.fit === 'widthFix') { // 固定宽
        const imgwidth = e.target.width;
        const imgheight = e.target.height;

        const windowWidth = e.target.clientWidth;
        const newImgHeight = imgheight * windowWidth / imgwidth;
        // 获得最大的高度
        if (this.maxHeight < newImgHeight) {
          this.maxHeight = newImgHeight;
        }
      } else { // 固定高
        this.maxHeight = this.height;
      }
    }
  }
};
</script>
