<template>
  <bxs-bottom-sheets
    v-model="isShow"
    :prevent-scroll-through="true"
    @after-leave="$emit('after-leave')"
    >
    <div
      slot="header"
      class="bx-picker-sheets-header"
      >
      <div class="bx-picker-header bx-hairline--bottom">
        <p
          class="bx-picker-cancel"
          @click="onCancel()"
          >
          取消
        </p>
        <p class="bx-picker-title">
          {{ title }}
        </p>
        <p
          class="bx-picker-sure"
          :style="{color:confirmButtonColor}"
          @click="onConfirm()"
          >
          确定
        </p>
      </div>
    </div>
    <bxs-datetime-picker
      ref="datetimePicker"
      v-model="innerValue"
      @change="onChange"
      :type="type"
      :min-date="minDate"
      :max-date="maxDate"
      :max-hour="maxHour"
      :min-hour="minHour"
      :max-minite="maxMinute"
      :min-minite="minHour"
      :max-second="maxSecond"
      :min-second="minSecond"
      :formatter="formatter"
      />
  </bxs-bottom-sheets>
</template>
<script>
import { create } from '../utils/index'
import bottomSheets from '../bottom-sheets'

const currentYear = new Date().getFullYear()
const isValidDate = date =>
  Object.prototype.toString.call(date) === '[object Date]' &&
  !Number.isNaN(date.getTime())

const isValidType = type =>
  ['datetime', 'date', 'time', 'year-month'].indexOf(type) !== -1

export default create({
  name: 'pop-datetime-picker',
  props: {
    value: [Date, String],
    title: String,
    type: {
      type: String,
      default: 'datetime',
      validator: isValidType,
    },
    formatter: {
      type: Function,
      default: (type, value) => value,
    },
    minDate: {
      type: Date,
      default: () => new Date(currentYear - 10, 0, 1),
      validator: isValidDate,
    },
    maxDate: {
      type: Date,
      default: () => new Date(currentYear + 10, 11, 31),
      validator: isValidDate,
    },
    minHour: {
      type: Number,
      default: 0,
    },
    maxHour: {
      type: Number,
      default: 23,
    },
    minMinute: {
      type: Number,
      default: 0,
    },
    maxMinute: {
      type: Number,
      default: 59,
    },
    minSecond: {
      type: Number,
      default: 0,
    },
    maxSecond: {
      type: Number,
      default: 59,
    },
    confirmButtonColor: String,
  },
  data() {
    return {
      isShow: false,
      innerValue: '',
    }
  },
  computed: {},
  methods: {
    onConfirm() {
      this.isShow = false
      this.$emit('confirm', this.innerValue)
    },
    onCancel() {
      this.isShow = false
      this.$emit('cancel')
    },
    onChange(value) {
      this.$emit('change', value)
    },
  },
  watch: {
    value(val) {
      this.innerValue = val
    },
  },
  components: {
    [bottomSheets.name]: bottomSheets,
  },
})
</script>
<style lang="postcss">
@import './index.css';
</style>
