"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _create = _interopRequireDefault(require("../utils/create"));

var _default2 = (0, _create.default)({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: _vm.b(),
      on: {
        "touchmove": function touchmove($event) {
          $event.preventDefault();
        }
      }
    }, [_c('ul', {
      attrs: {
        "id": _vm.b('ul')
      }
    }, _vm._l(_vm.images, function (item, index) {
      return _c('li', {
        key: index,
        class: _vm.b('li'),
        on: {
          "touchstart": _vm.start,
          "touchmove": _vm.move,
          "touchend": _vm.end
        }
      }, [_c('img', {
        attrs: {
          "src": item,
          "alt": ""
        }
      })]);
    }), 0)]);
  },
  name: 'carousel-map',
  watch: {
    index: function index() {
      this.$emit('getIndex', this.index);
    }
  },
  props: {
    imgs: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    imgWidth: {
      type: Number,
      default: 315
    },
    imgHeight: {
      type: Number,
      default: 200
    },
    boxHeight: {
      type: Number,
      default: 250
    },
    offset: {
      type: Number,
      default: 50
    },
    unlimited: {
      type: Boolean,
      default: true
    },
    infinitesimal: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      index: 1,
      startX: 0,
      startY: 0,
      moveX: 0,
      marginLeft: 0,
      initMarginLeft: 0,
      images: []
    };
  },
  methods: {
    //方法
    onClick: function onClick() {
      this.$emit('onClick', this.index);
    },
    start: function start(e) {
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;
      this.moveX = 0;
    },
    move: function move(e) {
      var moveY = e.changedTouches[0].pageY - this.startY;

      if (moveY > this.offset || moveY < -this.offset) {
        return;
      }

      this.moveX = e.changedTouches[0].pageX - this.startX;
      var CarouselMapLis = document.getElementsByClassName('vm-carousel-map-li');

      if (this.moveX > 0) {
        var index = this.index - 1;
        CarouselMapLis[this.index].style.height = (this.unlimited ? this.boxHeight - this.moveX : this.boxHeight - this.moveX < this.imgHeight ? this.imgHeight : this.boxHeight - this.moveX) + 'px';
        CarouselMapLis[index].style.height = (this.infinitesimal ? this.imgHeight + this.moveX : this.imgHeight + this.moveX > this.boxHeight ? this.boxHeight : this.imgHeight + this.moveX) + 'px';
      } else {
        var _index = this.index + 1;

        CarouselMapLis[this.index].style.height = (this.infinitesimal ? this.boxHeight + this.moveX : this.boxHeight + this.moveX < this.imgHeight ? this.imgHeight : this.boxHeight + this.moveX) + 'px';
        CarouselMapLis[_index].style.height = (this.unlimited ? this.imgHeight - this.moveX : this.imgHeight - this.moveX > this.boxHeight ? this.boxHeight : this.imgHeight - this.moveX) + 'px';
      }

      var ulE = document.getElementById('vm-carousel-map-ul');
      var leftX = this.marginLeft + this.moveX;

      if (leftX > this.imgWidth * this.index || leftX < -this.imgWidth * (this.index + 1)) {
        leftX = this.marginLeft + this.imgWidth;
      }

      ulE.style.marginLeft = leftX + 'px';
    },
    end: function end() {
      if (this.moveX === 0) {
        this.onClick();
        return;
      }

      var num = Math.round(this.moveX / this.imgWidth);
      num = num > 1 ? 1 : num;
      num = num < -1 ? -1 : num;
      this.marginLeft += num * this.imgWidth;
      var ulE = document.getElementById('vm-carousel-map-ul');
      ulE.style.marginLeft = this.marginLeft + 'px';
      var CarouselMapLis = document.getElementsByClassName('vm-carousel-map-li');

      for (var i = 0; i < CarouselMapLis.length; i++) {
        CarouselMapLis[i].style.height = this.imgHeight + 'px';
      }

      if (this.moveX > 0) {
        var index = this.index - 1;
        CarouselMapLis[this.index].style.height = this.boxHeight - num * (this.boxHeight - this.imgHeight) + 'px';

        if (index === 0) {
          this.marginLeft = this.initMarginLeft - this.imgWidth * (CarouselMapLis.length - 3);
          ulE.style.marginLeft = this.marginLeft + 'px';
          CarouselMapLis[index].style.height = this.imgHeight + 'px';
          CarouselMapLis[CarouselMapLis.length - 2].style.height = this.boxHeight + 'px';
          this.index = CarouselMapLis.length - 2;
        } else {
          CarouselMapLis[index].style.height = this.imgHeight + num * (this.boxHeight - this.imgHeight) + 'px';
          this.index += -num;
        }
      } else {
        var _index2 = this.index + 1;

        CarouselMapLis[this.index].style.height = this.boxHeight + num * (this.boxHeight - this.imgHeight) + 'px';

        if (_index2 === 4) {
          this.marginLeft = this.initMarginLeft;
          ulE.style.marginLeft = this.marginLeft + 'px';
          CarouselMapLis[_index2].style.height = this.imgHeight + 'px';
          CarouselMapLis[1].style.height = this.boxHeight + 'px';
          this.index = 1;
        } else {
          CarouselMapLis[_index2].style.height = this.imgHeight - num * (this.boxHeight - this.imgHeight) + 'px';
          this.index += -num;
        }
      }
    }
  },
  created: function created() {
    var _this = this;

    //渲染前执行
    this.images[0] = this.imgs[this.imgs.length - 1];
    this.imgs.forEach(function (val, index) {
      _this.images[index + 1] = val;
    });
    this.images[this.imgs.length + 1] = this.imgs[0];
  },
  mounted: function mounted() {
    //渲染后执行
    var CarouselMapLis = document.getElementsByClassName('vm-carousel-map-li');
    var ulE = document.getElementById('vm-carousel-map-ul');

    for (var i = 0; i < CarouselMapLis.length; i++) {
      CarouselMapLis[i].style.height = this.imgHeight + 'px';
      CarouselMapLis[i].style.width = this.imgWidth + 'px';
    }

    ulE.style.width = this.imgWidth * CarouselMapLis.length + 'px';
    ulE.style.height = this.boxHeight + 'px';
    this.initMarginLeft = this.marginLeft = -(this.imgWidth - (document.getElementsByClassName('vm-carousel-map')[0].clientWidth - this.imgWidth) / 2);
    ulE.style.marginLeft = this.initMarginLeft + 'px';
    CarouselMapLis[this.index].style.height = this.boxHeight + 'px';
  },
  computed: {}
});

exports.default = _default2;