import { $GetCalendar, $ObjectFlashback } from "../utils/commonUtils";
import create from '../utils/create';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _vm.isShow ? _c('div', {
      class: _vm.b(),
      on: {
        "click": _vm.hide
      }
    }, [_c('div', {
      class: _vm.b('content'),
      on: {
        "click": function click($event) {
          $event.stopPropagation();
        }
      }
    }, [_vm.isRange ? _c('div', {
      class: _vm.b('content-range')
    }, [_c('div', {
      class: _vm.b('start-date', {
        'select': _vm.startState === 0
      }),
      on: {
        "click": function click($event) {
          return _vm.switchDate(0);
        }
      }
    }, [_c('span', [_vm._v("开始时间")]), _c('span', [_vm._v(_vm._s(_vm.dateDes[0]))])]), _c('div', {
      class: _vm.b('end-date', {
        'select': _vm.startState === 1
      }),
      on: {
        "click": function click($event) {
          return _vm.switchDate(1);
        }
      }
    }, [_c('span', [_vm._v("结束时间")]), _c('span', [_vm._v(_vm._s(_vm.dateDes[1]))])])]) : _vm._e(), _vm.type.indexOf('date') > -1 ? _c('div', {
      class: _vm.b('content-date')
    }, [_c('div', {
      class: _vm.b('content-date-title')
    }, [_c('span', {
      on: {
        "click": function click($event) {
          return _vm.preYear(false);
        }
      }
    }, [_c('icon', {
      attrs: {
        "name": "chevron-left",
        "color": "#707070",
        "size": "30"
      }
    })], 1), _c('span', [_vm._v("\n          " + _vm._s(_vm.dateTime[_vm.startState].year) + "年\n        ")]), _c('span', {
      on: {
        "click": function click($event) {
          return _vm.nextYear(false);
        }
      }
    }, [_c('icon', {
      attrs: {
        "name": "chevron-right",
        "color": "#707070",
        "size": "30"
      }
    })], 1), _c('span', {
      on: {
        "click": function click($event) {
          return _vm.preMonth(false);
        }
      }
    }, [_c('icon', {
      attrs: {
        "name": "chevron-left",
        "color": "#707070",
        "size": "30"
      }
    })], 1), _c('span', [_vm._v("\n          " + _vm._s(_vm.dateTime[_vm.startState].month) + "月\n        ")]), _c('span', {
      on: {
        "click": function click($event) {
          return _vm.nextMonth(false);
        }
      }
    }, [_c('icon', {
      attrs: {
        "name": "chevron-right",
        "color": "#707070",
        "size": "30"
      }
    })], 1)]), _c('div', {
      class: _vm.b('content-date-week')
    }, [_c('label', [_vm._v("周日")]), _c('label', [_vm._v("周一")]), _c('label', [_vm._v("周二")]), _c('label', [_vm._v("周三")]), _c('label', [_vm._v("周四")]), _c('label', [_vm._v("周五")]), _c('label', [_vm._v("周六")])]), _c('div', {
      class: _vm.b('content-date-day')
    }, [_vm._l(_vm.dateObj.pre, function (item, index) {
      return _c('label', {
        key: 'pre' + index,
        class: _vm.classStyle(item, 0, -1),
        on: {
          "click": function click($event) {
            return _vm.preMonth(item);
          }
        }
      }, [_c('span', {
        class: _vm.classStyle(item, 1, -1)
      }, [_vm._v("\n            " + _vm._s(item) + "\n          ")])]);
    }), _vm._l(_vm.dateObj.cur, function (item, index) {
      return _c('label', {
        key: 'cur' + index,
        class: _vm.classStyle(item, 0, 0),
        on: {
          "click": function click($event) {
            return _vm.selectDay(item);
          }
        }
      }, [_c('span', {
        class: _vm.classStyle(item, 1, 0)
      }, [_vm._v("\n            " + _vm._s(item) + "\n          ")])]);
    }), _vm._l(_vm.dateObj.last, function (item, index) {
      return _c('label', {
        key: 'last' + index,
        class: _vm.classStyle(item, 0, 1),
        on: {
          "click": function click($event) {
            return _vm.nextMonth(item);
          }
        }
      }, [_c('span', {
        class: _vm.classStyle(item, 1, 1)
      }, [_vm._v("\n            " + _vm._s(item) + "\n          ")])]);
    })], 2)]) : _vm._e(), _vm.type.indexOf('time') > -1 ? _c('div', {
      class: _vm.b('content-time'),
      on: {
        "touchmove": function touchmove($event) {
          $event.preventDefault();
        }
      }
    }, [_c('div', {
      class: _vm.b('content-time-hour'),
      style: {
        height: _vm.labelHeight * 3 + 'px'
      }
    }, [_c('label', {
      staticClass: "select",
      style: {
        height: _vm.labelHeight + 'px'
      }
    }), _c('div', {
      staticClass: "hour",
      style: {
        top: _vm.top.hourTop
      },
      on: {
        "touchstart": _vm.start,
        "touchmove": function touchmove($event) {
          return _vm.move($event, 0);
        },
        "touchend": function touchend($event) {
          return _vm.end(0);
        }
      }
    }, [_c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }, [_vm._v("\n            " + _vm._s(_vm.isPeriod ? _vm.timeObj.hour : _vm.timeObj.hour - 1) + "\n          ")]), _vm._l(_vm.timeObj.hour, function (item) {
      return _c('label', {
        key: item,
        style: {
          height: _vm.labelHeight + 'px'
        }
      }, [_vm._v("\n            " + _vm._s(_vm.isPeriod ? item : item - 1) + "\n          ")]);
    }), _c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }, [_vm._v("\n            " + _vm._s(_vm.isPeriod ? 1 : 0) + "\n          ")])], 2)]), _c('div', {
      class: _vm.b('content-time-min'),
      style: {
        height: _vm.labelHeight * 3 + 'px'
      }
    }, [_c('label', {
      staticClass: "select",
      style: {
        height: _vm.labelHeight + 'px'
      }
    }), _c('div', {
      staticClass: "min",
      style: {
        top: _vm.top.minTop
      },
      on: {
        "touchstart": _vm.start,
        "touchmove": function touchmove($event) {
          return _vm.move($event, 1);
        },
        "touchend": function touchend($event) {
          return _vm.end(1);
        }
      }
    }, [_c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }, [_vm._v("\n            " + _vm._s(_vm.timeObj.min - 1) + "\n          ")]), _vm._l(_vm.timeObj.min, function (item) {
      return _c('label', {
        key: item,
        style: {
          height: _vm.labelHeight + 'px'
        }
      }, [_vm._v("\n            " + _vm._s(item - 1) + "\n          ")]);
    }), _c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }, [_vm._v("\n            0\n          ")])], 2)]), _vm.isPeriod ? _c('div', {
      class: _vm.b('content-time-period'),
      style: {
        height: _vm.labelHeight * 3 + 'px'
      }
    }, [_c('label', {
      staticClass: "select",
      style: {
        height: _vm.labelHeight + 'px'
      }
    }), _c('div', {
      staticClass: "period",
      style: {
        top: _vm.top.periodTop
      },
      on: {
        "touchstart": _vm.start,
        "touchmove": function touchmove($event) {
          return _vm.move($event, 2);
        },
        "touchend": function touchend($event) {
          return _vm.end(2);
        }
      }
    }, [_c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }), _c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }, [_vm._v("\n            AM\n          ")]), _c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    }, [_vm._v("\n            PM\n          ")]), _c('label', {
      style: {
        height: _vm.labelHeight + 'px'
      }
    })])]) : _vm._e(), _c('div', {
      class: _vm.b('content-time-button')
    }, [_c('vm-button', {
      staticClass: "bg-gray light shadow",
      attrs: {
        "size": "lg",
        "tag": "div",
        "block": ""
      },
      on: {
        "click": _vm.hide
      }
    }, [_vm._v("\n          取消\n        ")]), _c('vm-button', {
      staticClass: "submit bg-gradual-blue shadow",
      attrs: {
        "size": "lg",
        "tag": "div",
        "block": ""
      },
      on: {
        "click": _vm.submit
      }
    }, [_vm._v("\n          确定\n        ")])], 1)]) : _vm._e()])]) : _vm._e();
  },
  name: 'date-picker',
  watch: {
    value: function value() {
      this.isShow = this.value;
    },
    startState: function startState() {
      this.dateTime[this.startState].year = this.dateTime[this.startState].curYear;
      this.dateTime[this.startState].month = this.dateTime[this.startState].curMonth;
      this.dateObj = $GetCalendar(this.dateTime[this.startState].year, this.dateTime[this.startState].month, this.isZero);
      this.changeTimeList();
    },
    dateTime: {
      handler: function handler() {
        this.dateObj = $GetCalendar(this.dateTime[this.startState].year, this.dateTime[this.startState].month, this.isZero);
        this.changeTimeList();
      },
      deep: true
    },
    isShow: function isShow() {
      this.$emit('input', this.isShow);
    }
  },
  props: {
    value: Boolean,
    date: {
      type: String,
      default: ''
    },
    isZero: {
      type: Boolean,
      default: false
    },
    isSelect: {
      type: Boolean,
      default: true
    },
    isPeriod: {
      type: Boolean,
      default: false
    },
    isRange: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'date'
    }
  },
  data: function data() {
    return {
      dateObj: {},
      timeObj: {
        hour: 24,
        min: 60
      },
      dateTime: {
        0: {
          curYear: 0,
          curMonth: 0,
          curDay: 0,
          day: 0,
          year: 0,
          month: 0,
          hour: 0,
          min: 0,
          period: 0
        },
        1: {
          curYear: 0,
          curMonth: 0,
          curDay: 0,
          day: 0,
          year: 0,
          month: 0,
          hour: 0,
          min: 0,
          period: 0
        }
      },
      startY: 0,
      moveY: 0,
      startState: 0,
      labelHeight: 40,
      dateDes: {
        0: '',
        1: ''
      },
      top: {
        hourTop: '',
        minTop: '',
        periodTop: ''
      },
      isShow: this.value
    };
  },
  methods: {
    //方法
    preMonth: function preMonth(day) {
      if (this.dateTime[this.startState].month - 1 >= 1) {
        this.dateTime[this.startState].month--;
      } else {
        this.dateTime[this.startState].year--;
        this.dateTime[this.startState].month = 12;
      }

      if (day) {
        this.selectDay(day);
      }
    },
    nextMonth: function nextMonth(day) {
      if (this.dateTime[this.startState].month + 1 <= 12) {
        this.dateTime[this.startState].month++;
      } else {
        this.dateTime[this.startState].year++;
        this.dateTime[this.startState].month = 1;
      }

      if (day) {
        this.selectDay(day);
      }
    },
    preYear: function preYear() {
      this.dateTime[this.startState].year--;
    },
    nextYear: function nextYear() {
      this.dateTime[this.startState].year++;
    },
    selectDay: function selectDay(day) {
      this.dateTime[this.startState].day = day;
      this.dateTime[this.startState].curYear = this.dateTime[this.startState].year;
      this.dateTime[this.startState].curMonth = this.dateTime[this.startState].month;
      this.dateTime[this.startState].curDay = this.dateTime[this.startState].day;
      this.dateDes[this.startState] = this.getDate(this.startState).date;
      this.judgeDateTime();

      if (this.type === 'date') {
        this.hide();
        this.$emit('getDate', this.getDate());
      }
    },
    judgeDateTime: function judgeDateTime() {
      if (this.isRange && new Date(this.dateDes[0]) > new Date(this.dateDes[1])) {
        if (this.startState === 0) {
          this.startState = 1;
        } else {
          this.startState = 0;
        }

        this.dateTime = $ObjectFlashback(this.dateTime);
      }

      this.dateDes[0] = this.getDate().date;
      this.dateDes[1] = this.getDate(1).date;
    },
    switchDate: function switchDate(state) {
      this.startState = state;
    },
    hide: function hide() {
      this.isShow = false;
    },
    getDate: function getDate(startState) {
      if (startState === void 0) {
        startState = 0;
      }

      var time = {};

      if (this.type.indexOf('time') > -1) {
        var hour = this.isPeriod ? 1 - this.dateTime[startState].hour : -this.dateTime[startState].hour;
        time.hour = this.isZero ? hour < 10 ? '0' + hour : hour + '' : hour + '';
        time.min = this.isZero ? -this.dateTime[startState].min < 10 ? '0' + -this.dateTime[startState].min : -this.dateTime[startState].min + '' : -this.dateTime[startState].min + '';

        if (this.isPeriod) {
          time.period = -this.dateTime[startState].period === 0 ? 'AM' : 'PM';
          time.date = time.hour + ':' + time.min + ' ' + time.period;
        } else {
          time.date = time.hour + ':' + time.min;
        }
      }

      if (this.type.indexOf('date') > -1) {
        time.year = this.dateTime[startState].curYear + '';
        time.month = this.dateTime[startState].curMonth + '';
        time.day = this.dateTime[startState].curDay;

        if (this.type === 'datetime') {
          time.date = this.dateTime[startState].curYear + '/' + this.dateTime[startState].curMonth + '/' + this.dateTime[startState].curDay + ' ' + time.date;
        } else {
          time.date = this.dateTime[startState].curYear + '/' + this.dateTime[startState].curMonth + '/' + this.dateTime[startState].curDay;
        }

        time.timestamp = new Date(time.date).getTime();
      }

      return time;
    },
    submit: function submit() {
      this.isRange ? this.$emit('getDate', {
        start: this.getDate(),
        end: this.getDate(1)
      }) : this.$emit('getDate', this.getDate());
      this.hide();
    },
    classStyle: function classStyle(item, type, m) {
      var year = this.dateTime[this.startState].year;
      var month = this.dateTime[this.startState].month + m;

      if (month < 1) {
        year--;
        month = 12;
      }

      if (month > 12) {
        year++;
        month = 1;
      }

      var day = item;
      var curYear0 = this.dateTime[0].curYear;
      var curMonth0 = this.dateTime[0].curMonth;
      var curDay0 = this.dateTime[0].curDay;
      var curYear1 = this.dateTime[1].curYear;
      var curMonth1 = this.dateTime[1].curMonth;
      var curDay1 = this.dateTime[1].curDay;
      var time = new Date(year + '/' + month + '/' + day).getTime();
      var time0 = new Date(curYear0 + '/' + curMonth0 + '/' + curDay0).getTime();
      var time1 = new Date(curYear1 + '/' + curMonth1 + '/' + curDay1).getTime();
      var a = time === time0;
      var b = time === time1;
      var c = time1 > time && time0 < time;
      var className = '';

      if (type === 0) {
        if (time0 !== time1) {
          if (a && this.isRange) {
            className = 'currentLeft';
          }

          if (b && this.isRange) {
            className = 'currentRight';
          }

          if (c) {
            className = 'currentBetween';
          }
        }
      } else {
        if (a || b) {
          className = 'current';
        }

        if (className === '' && m !== 0) {
          className = 'gray';
        }
      }

      return className;
    },
    start: function start(e) {
      this.startY = e.changedTouches[0].pageY;
    },
    move: function move(e, type) {
      this.moveY = e.changedTouches[0].pageY - this.startY;

      switch (type) {
        case 0:
          this.top.hourTop = this.dateTime[this.startState].hour * this.labelHeight + this.moveY + 'px';
          break;

        case 1:
          this.top.minTop = this.dateTime[this.startState].min * this.labelHeight + this.moveY + 'px';
          break;

        case 2:
          // eslint-disable-next-line no-case-declarations
          var top = this.dateTime[this.startState].period * this.labelHeight + this.moveY;

          if (top > 0) {
            top = 0;
          }

          if (top < -40) {
            top = -40;
          }

          this.top.periodTop = top + 'px';
          break;

        default:
          break;
      }
    },
    changeTimeList: function changeTimeList() {
      if (document.getElementsByClassName('hour')[0] && document.getElementsByClassName('hour')[0].style) {
        this.top.hourTop = this.dateTime[this.startState].hour * this.labelHeight + 'px';
        this.top.minTop = this.dateTime[this.startState].min * this.labelHeight + 'px';
        this.top.periodTop = this.dateTime[this.startState].period * this.labelHeight + 'px';
      }
    },
    end: function end(type) {
      var num = Math.round(this.moveY / 40);

      switch (type) {
        case 0:
          this.dateTime[this.startState].hour = (this.dateTime[this.startState].hour + num) % this.timeObj.hour;
          this.dateTime[this.startState].hour = this.dateTime[this.startState].hour > 0 ? 1 - this.timeObj.hour : this.dateTime[this.startState].hour;
          break;

        case 1:
          this.dateTime[this.startState].min = (this.dateTime[this.startState].min + num) % this.timeObj.min;
          this.dateTime[this.startState].min = this.dateTime[this.startState].min > 0 ? 1 - this.timeObj.min : this.dateTime[this.startState].min;
          break;

        case 2:
          this.dateTime[this.startState].period = num >= 1 ? 0 : num <= -1 ? -1 : num;
          break;

        default:
          break;
      }

      this.changeTimeList();
      this.dateDes[this.startState] = this.getDate(this.startState).date;
      this.judgeDateTime();
    },
    dateHandle: function dateHandle(startState, dateObj) {
      for (var key in dateObj) {
        this.dateTime[startState][key] = dateObj[key];

        if (this.isRange) {
          this.dateTime[startState + 1][key] = dateObj[key];
        }
      }
    },
    initDate: function initDate() {
      if (this.date) {
        var date = this.date.split('/');
        var dateObj = {
          curYear: parseInt(date[0]),
          curMonth: parseInt(date[1]),
          curDay: this.isSelect ? this.isZero ? parseInt(date[2]) < 10 ? '0' + parseInt(date[2]) : date[2] : parseInt(date[2]) + '' : ''
        };
        dateObj.year = dateObj.curYear;
        dateObj.month = dateObj.curMonth;
        dateObj.day = dateObj.curDay;
        this.dateHandle(0, dateObj);
      } else {
        var _date = new Date();

        var _dateObj = {
          curYear: _date.getFullYear(),
          curMonth: _date.getMonth() + 1,
          curDay: this.isSelect ? this.isZero ? _date.getDate() < 10 ? '0' + _date.getDate() : _date.getDate() + '' : _date.getDate() + '' : ''
        };
        _dateObj.year = _dateObj.curYear;
        _dateObj.month = _dateObj.curMonth;
        _dateObj.day = _dateObj.curDay;
        this.dateHandle(0, _dateObj);
      }
    },
    initTime: function initTime() {
      this.isPeriod ? this.timeObj.hour = 12 : this.timeObj.hour = 24;
      this.timeObj.min = 60;
    }
  },
  created: function created() {//渲染前执行
  },
  mounted: function mounted() {
    //渲染后执行
    switch (this.type) {
      case 'date':
        this.initDate();
        break;

      case 'time':
        this.initTime();
        break;

      case 'datetime':
        this.initDate();
        this.initTime();
        break;

      default:
        this.initDate();
        break;
    }

    this.dateDes[this.startState] = this.getDate().date;
    this.dateDes[this.startState + 1] = this.getDate().date;
  },
  computed: {}
});