<template>
  <a
    class="weui_cell"
    href="javascript:"
  >
    <div class="weui_cell_bd weui_cell_content">
      <p>{{ title }}</p>
      <inline-desc v-if="inlineDesc">{{ inlineDesc }}</inline-desc>
    </div>
    <div
      class="weui_cell_ft vux-cell-primary vux-datetime-value"
      :style="{textAlign: valueTextAlign}"
    >
      {{ currentValue }}
      <span
        v-if="!currentValue.length && placeholder"
        class="cvux-datetime-placeholder"
      >
        {{ placeholder }}
      </span>
    </div>
    <div class="with_arrow">
      <icon
        v-show="!valid"
        class="vux-input-icon"
        type="warn"
        :title="firstError"
      />
    </div>
  </a>
</template>
<script>
import Icon from '../icon'
import Picker from './datetimepicker'
import InlineDesc from '../inline-desc'
import Base from '../../libs/base'

export default {
  components: {
    InlineDesc,
    Icon
  },
  mixins: [Base],
  props: {
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    title: {
      type: String,
      required: true
    },
    value: {
      type: String,
      default: ''
    },
    inlineDesc: String,
    placeholder: String,
    minYear: Number,
    maxYear: Number,
    confirmText: {
      type: String,
      default: 'ok'
    },
    cancelText: {
      type: String,
      default: 'cancel'
    },
    clearText: {
      type: String,
      default: ''
    },
    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
    },
    minMinute: {
      type: Number,
      default: 0
    },
    maxMinute: {
      type: Number,
      default: 59
    },
    startDate: String,
    endDate: String,
    valueTextAlign: String
  },
  data() {
    return {
      currentValue: null,
      valid: true,
      errors: {}
    }
  },
  computed: {
    pickerOptions() {
      const _this = this
      const options = {
        trigger: '#vux-datetime-' + this.uuid,
        format: this.format,
        value: this.currentValue,
        output: '.vux-datetime-value',
        confirmText: this.confirmText,
        cancelText: _this.cancelText,
        clearText: _this.clearText,
        yearRow: this.yearRow,
        monthRow: this.monthRow,
        dayRow: this.dayRow,
        hourRow: this.hourRow,
        minuteRow: this.minuteRow,
        minHour: this.minHour,
        maxHour: this.maxHour,
        minMinute: this.minMinute,
        maxMinute: this.maxMinute,
        startDate: this.startDate,
        endDate: this.endDate,
        onConfirm(value) {
          _this.currentValue = value
        },
        onClear(value) {
          _this.$emit('on-clear', value)
        },
        onHide() {
          _this.validate()
        }
      }
      if (this.minYear) {
        options.minYear = this.minYear
      }
      if (this.maxYear) {
        options.maxYear = this.maxYear
      }
      return options
    },
    firstError() {
      let key = Object.keys(this.errors)[0]
      return this.errors[key]
    }
  },
  watch: {
    currentValue(val) {
      if (this.value !== val) {
        this.$emit('on-change', val)
      }
      this.$emit('input', val)
      this.validate()
    },
    value(val) {
      if (this.currentValue !== val) {
        this.currentValue = val
        this.picker && this.picker.destroy()
        this.render()
      }
    },
    startDate() {
      this.render()
    },
    endDate() {
      this.render()
    }
  },
  mounted() {
    const uuid = this.uuid
    this.$nextTick(() => {
      this.$el.setAttribute('id', 'vux-datetime-' + uuid)
      this.render()
    })
  },
  created() {
    this.currentValue = this.value
    this.handleChangeEvent = true
  },
  beforeDestroy() {
    this.picker && this.picker.destroy()
  },
  methods: {
    render() {
      if (this.picker) {
        this.picker.destroy()
      }
      this.picker = new Picker(this.pickerOptions)
    },
    validate() {
      if (!this.currentValue && this.required) {
        this.valid = false
        this.errors.required = this.title + '必填'
        // return
      } else {
        this.valid = true
        this.errors = {}
      }
      this.$emit('on-vali', this.errors, this.valid, this.uuid)
    }
  }
}
</script>
