import { addUnit } from "../../utils/format/unit";
import { compareDay, getPrevDay, getNextDay, formatMonthTitle, getMonthEndDay } from "../utils";
import Scroll from "../../utils/dom/scroll";
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      ref: "month",
      class: _vm.b('month'),
      style: _vm.monthStyle
    }, [_vm.showMonthTitle ? _c('div', {
      class: _vm.b('month-title')
    }, [_vm._v("\n    " + _vm._s(_vm.title) + "\n  ")]) : _vm._e(), _vm.shouldRender ? _c('div', {
      ref: "days",
      class: _vm.b('days'),
      attrs: {
        "role": "grid"
      }
    }, [_vm.showMark ? _c('div', {
      class: _vm.b('month-mark')
    }, [_vm._v("\n      " + _vm._s(_vm.date.getMonth() + 1) + "\n    ")]) : _vm._e(), _vm._l(_vm.days, function (item, index) {
      return _c('div', {
        key: index + '' + item.text,
        ref: "day",
        refInFor: true,
        class: [_vm.b('day', item.type), item.className],
        style: _vm.getDayStyle(item.type, index),
        attrs: {
          "refInFor": "",
          "role": "gridcell",
          "tabindex": _vm.type === 'disabled' ? null : -1
        },
        on: {
          "click": function click($event) {
            return _vm.onClick(item);
          }
        }
      }, [_c('div', {
        class: item.type === 'selected' ? _vm.b('selected-day') : '',
        style: item.type === 'selected' ? _vm.selectedStyle : null
      }, [item.topInfo ? _c('div', {
        class: _vm.b('top-info')
      }, [_vm._v("\n          " + _vm._s(item.topInfo) + "\n        ")]) : _vm._e(), _vm._v("\n        " + _vm._s(item.text) + "\n        "), item.bottomInfo ? _c('div', {
        class: _vm.b('bottom-info')
      }, [_vm._v("\n          " + _vm._s(item.bottomInfo) + "\n        ")]) : _vm._e()])]);
    })], 2) : _c('div', {
      ref: "days"
    })]);
  },
  name: "month",
  props: {
    b: Function,
    date: Date,
    type: String,
    color: String,
    minDate: Date,
    maxDate: Date,
    showMark: Boolean,
    rowHeight: [Number, String],
    formatter: Function,
    lazyRender: Boolean,
    currentDate: [Date, Array],
    allowSameDay: Boolean,
    showSubtitle: Boolean,
    realRowHeight: Number,
    showMonthTitle: Boolean,
    firstDayOfWeek: Number
  },
  watch: {
    shouldRender: function shouldRender(value) {
      var _this = this;

      if (value) {
        this.$nextTick(function () {
          if (_this.$refs.day[0] && !_this.realRowHeight) {
            var _this$$refs$day$0$get = _this.$refs.day[0].getBoundingClientRect(),
                height = _this$$refs$day$0$get.height;

            _this.$emit("update-height", height);
          }
        });
      }
    },
    realRowHeight: function realRowHeight() {
      this.height = null;
    }
  },
  data: function data() {
    return {
      visible: false
    };
  },
  methods: {
    onClick: function onClick(item) {
      if (item.type !== "disabled") {
        this.$emit("click", item);
      }
    },
    getHeight: function getHeight() {
      if (!this.height) {
        this.height = this.$el.getBoundingClientRect().height;
      }

      return this.height;
    },
    scrollIntoView: function scrollIntoView(body) {
      var _this$$refs = this.$refs,
          days = _this$$refs.days,
          month = _this$$refs.month;
      var el = this.showSubtitle ? days : month;
      var scrollTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + body.scrollTop;
      Scroll.setScrollTop(body, scrollTop);
    },
    getMultipleDayType: function getMultipleDayType(day) {
      var _this2 = this;

      var isSelected = function isSelected(date) {
        return _this2.currentDate.some(function (item) {
          return compareDay(item, date) === 0;
        });
      };

      if (isSelected(day)) {
        var prevDay = getPrevDay(day);
        var nextDay = getNextDay(day);
        var prevSelected = isSelected(prevDay);
        var nextSelected = isSelected(nextDay);

        if (prevSelected && nextSelected) {
          return "multiple-middle";
        }

        if (prevSelected) {
          return "end";
        }

        return nextSelected ? "start" : "multiple-selected";
      }

      return "";
    },
    getRangeDayType: function getRangeDayType(day) {
      var _this$currentDate = this.currentDate,
          startDay = _this$currentDate[0],
          endDay = _this$currentDate[1];

      if (!startDay) {
        return "";
      }

      var compareToStart = compareDay(day, startDay);

      if (!endDay) {
        return compareToStart === 0 ? "start" : "";
      }

      var compareToEnd = compareDay(day, endDay);

      if (compareToStart === 0 && compareToEnd === 0 && this.allowSameDay) {
        return "start-end";
      }

      if (compareToStart === 0) {
        return "start";
      }

      if (compareToEnd === 0) {
        return "end";
      }

      if (compareToStart > 0 && compareToEnd < 0) {
        return "middle";
      }
    },
    getDayType: function getDayType(day) {
      var type = this.type,
          minDate = this.minDate,
          maxDate = this.maxDate,
          currentDate = this.currentDate;

      if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) {
        return "disabled";
      }

      if (currentDate === null) {
        return;
      }

      if (type === "single") {
        return compareDay(day, currentDate) === 0 ? "selected" : "";
      }

      if (type === "multiple") {
        return this.getMultipleDayType(day);
      }
      /* istanbul ignore else */


      if (type === "range") {
        return this.getRangeDayType(day);
      }
    },
    getBottomInfo: function getBottomInfo(type) {
      if (this.type === "range") {
        if (type === "start") {
          return "开始";
        }

        if (type === "end") {
          return "结束";
        }

        if (type === "start-end") {
          return "开始/结束";
        }
      }
    },
    getDayStyle: function getDayStyle(type, index) {
      var style = {
        height: this.rowHeightWithUnit
      };

      if (index === 0) {
        style.marginLeft = 100 * this.offset / 7 + "%";
      }

      if (this.color) {
        if (type === "start" || type === "end" || type === "start-end" || type === "multiple-selected" || type === "multiple-middle") {
          style.background = this.color;
        } else if (type === "middle") {
          style.color = this.color;
        }
      }

      return style;
    }
  },
  computed: {
    selectedStyle: function selectedStyle() {
      return {
        width: this.rowHeightWithUnit,
        height: this.rowHeightWithUnit,
        background: this.color
      };
    },
    title: function title() {
      return formatMonthTitle(this.date);
    },
    rowHeightWithUnit: function rowHeightWithUnit() {
      return addUnit(this.rowHeight);
    },
    offset: function offset() {
      var firstDayOfWeek = this.firstDayOfWeek;
      var realDay = this.date.getDay();

      if (!firstDayOfWeek) {
        return realDay;
      }

      return (realDay + 7 - this.firstDayOfWeek) % 7;
    },
    totalDay: function totalDay() {
      return getMonthEndDay(this.date.getFullYear(), this.date.getMonth() + 1);
    },
    shouldRender: function shouldRender() {
      return this.visible || !this.lazyRender;
    },
    monthStyle: function monthStyle() {
      if (!this.shouldRender) {
        var padding = Math.ceil((this.totalDay + this.offset) / 7) * this.realRowHeight;
        return {
          paddingBottom: padding + "px"
        };
      }
    },
    days: function days() {
      var days = [];
      var year = this.date.getFullYear();
      var month = this.date.getMonth();

      for (var day = 1; day <= this.totalDay; day++) {
        var date = new Date(year, month, day);
        var type = this.getDayType(date);
        var config = {
          date: date,
          type: type,
          text: day,
          bottomInfo: this.getBottomInfo(type)
        };

        if (this.formatter) {
          config = this.formatter(config);
        }

        days.push(config);
      }

      return days;
    }
  }
};