<template>
  <div :id="'inlineDateTime-'+uuid"></div>
</template>
<script>
import Picker from './datetimepicker'

function formatDate(date, format){
  date = new Date(date);
  let map = {
    "M": date.getMonth() + 1, //月份
    "D": date.getDate(), //日
    "h": date.getHours(), //小时
    "m": date.getMinutes(), //分
    "s": date.getSeconds(), //秒
    "q": Math.floor((date.getMonth() + 3) / 3), //季度
    "S": date.getMilliseconds() //毫秒
  };

  format = format.replace(/([YMDhmsqS])+/g, (all, t) => {
    var v = map[t];
    if (v !== undefined) {
      if (all.length > 1) {
        v = '0' + v;
        v = v.substr(v.length - 2);
      }
      return v;
    } else if (t === 'Y') {
      return (date.getFullYear() + '').substr(4 - all.length);
    }
    return all;
  });
  return format;
}

export default {
  name: 'inlineDateTime',
  components: {},
  props: {
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: String,
    minYear: Number,
    maxYear: Number,
    confirmText: {
      type: String,
      default: '确认'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    clearText: String,
    yearRow: {
      type: String,
      default: '{value}'
    },
    monthRow: {
      type: String,
      default: '{value}'
    },
    dayRow: {
      type: String,
      default: '{value}'
    },
    hourRow: {
      type: String,
      default: '{value}'
    },
    minuteRow: {
      type: String,
      default: '{value}'
    },
    required: {
      type: Boolean,
      default: false
    },
    minHour: {
      type: Number,
      default: 0
    },
    maxHour: {
      type: Number,
      default: 23
    },
    startDate: String,
    endDate: String,
    valueTextAlign: String,
    displayFormat: Function,
    readonly: Boolean,
    hourList: Array,
    minuteList: Array,
    show: Boolean,
    defaultSelectedValue: String
  },
  created() {
    this.isFirstSetValue = false
    this.currentValue = this.value
  },
  data() {
    return {
      currentValue: null,
      uuid: Math.random().toString(36).substring(3, 8),
      errors: {},
      refreshDate:'',
    }
  },
  mounted() {
    this.render()
  },
  computed: {
    pickerOptions() {
      const _this = this
      const options = {
        trigger: '#inlineDateTime-' + this.uuid,
        format: this.format,
        value: this.currentValue,
        output: '.datetime-value',
        clearText: _this.clearText,
        yearRow: this.yearRow,
        monthRow: this.monthRow,
        dayRow: this.dayRow,
        hourRow: this.hourRow,
        minuteRow: this.minuteRow,
        minHour: this.minHour,
        maxHour: this.maxHour,
        startDate: this.startDate,
        endDate: this.endDate,
        hourList: this.hourList,
        minuteList: this.minuteList,
        defaultSelectedValue: this.defaultSelectedValue,
        onSelect(val){
          _this.refreshDate = this.getValue()
          // console.log("value::::",_this.refreshDate)
          // _this.currentValue = this.getValue()
          // _this.value = this.getValue()
          _this.$emit('on-select',this.getValue())
        }
      }
      if (this.minYear) {
        options.minYear = this.minYear
      }
      if (this.maxYear) {
        options.maxYear = this.maxYear
      }
      return options
    }
  },
  methods: {
    render() {
      this.$nextTick(() => {
        this.picker && this.picker.destroy()
        this.picker = new Picker(this.pickerOptions)
        this.picker.show(this.currentValue)
      })
    },
  },
  watch: {
    currentValue(val, oldVal) {
      this.$emit('input', val)
      if (!this.isFirstSetValue) {
        this.isFirstSetValue = true
        oldVal && this.$emit('on-change', val)
      } else {
        this.$emit('on-change', val)
      }
    },
    startDate() {
      this.render()
    },
    endDate() {
      this.render()
    },
    format(val) {
      if (this.currentValue) {
        this.currentValue = formatDate(this.currentValue, val)
      }
      this.render()
    },
    value(val) {
      if (this.currentValue !== val) {
        this.currentValue = val
        this.picker.show(val)
      }
    },
    minHour(val){
      if (val) {
        this.picker && this.picker.refreshMinHour(val,this.refreshDate)
      }
    },
    minuteList(val){
      if (val) {
        this.picker && this.picker.refreshMintueList(val,this.refreshDate)
      }
    }
  },
  beforeDestroy() {
    this.picker && this.picker.destroy()
  }
}
</script>
<style lang="less">
.cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.cell_access {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: inherit;
}

.cell__ft {
  padding-right: 13px;
  position: relative;
  text-align: right;
  color: #999;
}

.cell-primary {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
</style>
