import Button from '../button';
import { format, getYears, formatMonth } from './utils';

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

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

  return _c('div', {
    class: ['ks-month', {
      'ks-month-horizontal': _vm.horizontal
    }]
  }, [_c('div', {
    ref: "body",
    staticClass: "van-calendar__body ks-month-body"
  }, _vm._l(_vm.years, function (y) {
    return _c('div', {
      key: y,
      staticClass: "van-calendar__month"
    }, [_c('div', {
      staticClass: "van-calendar__month-title"
    }, [_vm._v(_vm._s(y) + "年")]), _vm._v(" "), _c('div', {
      staticClass: "van-calendar__days"
    }, _vm._l(_vm.months, function (m) {
      return _c('div', {
        key: m,
        staticClass: "van-calendar__day ks-month__day",
        class: {
          'van-calendar__day--start': _vm.start === +new Date(y + "/" + m + "/01") && _vm.end !== +new Date(y + "/" + m + "/01"),
          'van-calendar__day--end': _vm.end === +new Date(y + "/" + m + "/01") && _vm.start !== +new Date(y + "/" + m + "/01"),
          'van-calendar__day--middle': _vm.start < +new Date(y + "/" + m + "/01") && _vm.end > +new Date(y + "/" + m + "/01"),
          'van-calendar__day--start-end': _vm.start === +new Date(y + "/" + m + "/01") && _vm.end === +new Date(y + "/" + m + "/01"),
          'van-calendar__day--disabled': _vm.min && +new Date(y + "/" + m + "/01") < _vm.min || _vm.max && +new Date(y + "/" + m + "/01") > _vm.max
        },
        on: {
          "click": function click($event) {
            _vm.handleSelectDay(y, m, _vm.min && +new Date(y + "/" + m + "/01") < _vm.min || _vm.max && +new Date(y + "/" + m + "/01") > _vm.max);
          }
        }
      }, [_vm._v("\n              " + _vm._s(m) + "月\n              "), _vm.start === +new Date(y + "/" + m + "/01") || _vm.end === +new Date(y + "/" + m + "/01") ? _c('div', {
        staticClass: "van-calendar__bottom-info"
      }, [_vm._v("\n                " + _vm._s(_vm.start === +new Date(y + "/" + m + "/01") && _vm.end === +new Date(y + "/" + m + "/01") ? '开始/结束' : _vm.start === +new Date(y + "/" + m + "/01") && _vm.end !== +new Date(y + "/" + m + "/01") ? '开始' : '结束') + "\n              ")]) : _vm._e()]);
    }), 0)]);
  }), 0), _vm._v(" "), _c('div', {
    staticClass: "ks-month-header"
  }, [_c('span', {
    staticClass: "ks-month-header__title"
  }, [_vm._v("月份选择")]), _vm._v(" "), _c('span', {
    staticClass: "ks-month-header__daterange"
  }, [_vm._v(_vm._s(_vm.monthRangeStr))])]), _vm._v(" "), _vm.showConfirm ? _c('div', {
    staticClass: "van-calendar__footer van-calendar__footer--safe-area-inset-bottom"
  }, [_c('Button', {
    staticClass: "van-calendar__confirm",
    attrs: {
      "type": "primary",
      "disabled": !(_vm.start && _vm.end),
      "round": "",
      "block": ""
    },
    on: {
      "click": _vm.handleSelect
    }
  }, [_vm._v("确定")])], 1) : _vm._e()]);
};

var __vue_staticRenderFns__ = [];
export default {
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__,
  name: 'ks-month-range',
  components: {
    Button: Button
  },
  props: {
    defaultMonth: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    yearRange: {
      type: Array,
      default: function _default() {
        return [new Date().getFullYear() - 5, new Date().getFullYear()];
      }
    },
    horizontal: {
      type: Boolean,
      default: false
    },
    showConfirm: {
      type: Boolean,
      default: true
    },
    minMonth: String,
    maxMonth: String
  },
  data: function data() {
    return {
      months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      start: this.initStart(),
      end: this.initEnd(),
      years: getYears(this.yearRange)
    };
  },
  watch: {
    'defaultMonth': function defaultMonth() {
      this.start = this.initStart();
      this.end = this.initEnd();
    }
  },
  computed: {
    monthRangeStr: function monthRangeStr() {
      if (this.start && this.end) {
        return format(this.start) + " \u81F3 " + format(this.end);
      } else if (this.start && !this.end) {
        return format(this.start);
      }

      return '';
    },
    min: function min() {
      return this.minMonth ? formatMonth(this.minMonth) : null;
    },
    max: function max() {
      return this.maxMonth ? formatMonth(this.maxMonth) : null;
    }
  },
  methods: {
    initStart: function initStart() {
      return this.defaultMonth.length ? formatMonth(this.defaultMonth[0]) : null;
    },
    initEnd: function initEnd() {
      return this.defaultMonth.length ? formatMonth(this.defaultMonth[1]) : null;
    },
    scrollInto: function scrollInto() {
      var _this = this;

      setTimeout(function () {
        if (_this.start) {
          var top = _this.$el.querySelector('.van-calendar__day--start');

          _this.$refs.body.scrollTop = top && top.getBoundingClientRect().top - 120;
        }
      }, 240);
    },
    scrollClear: function scrollClear() {
      this.$refs.body.scrollTop = 0;
    },
    handleSelectDay: function handleSelectDay(y, m, disabled) {
      if (!disabled) {
        var _m = formatMonth(y + "/" + m);

        if (this.start && !this.end && this.start <= _m) {
          this.end = _m;
          this.$emit('select', [new Date(this.start), new Date(this.end)]);
        } else {
          this.end = null;
          this.start = _m;
          this.$emit('select', [new Date(this.start), null]);
        }
      }
    },
    handleSelect: function handleSelect() {
      this.$emit('confirm', [new Date(this.start), new Date(this.end)], this.monthRangeStr);
    }
  }
};