<template>
  <div>
    <p class="demo-title">
      单独使用(选择datetime)
    </p>
    <div class="demo-input">
      <label>绑定值1</label>
      <input
        :value="parseTime(currentDate,'{y}-{m}-{d}')"
        readonly
        >
    </div>
    <div>
      <bxs-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @change="change"
        />
    </div>
    <p class="demo-title">
      单独使用(选择date)
    </p>
    <div class="demo-input">
      <label>绑定值2</label>
      <input
        :value="parseTime(currentDate2,'{y}年{m}月{d}')"
        readonly
        >
    </div>
    <div>
      <bxs-datetime-picker
        v-model="currentDate2"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @change="change"
        :formatter="formatter1"
        />
    </div>
    <p class="demo-title ex2">
      单独使用(选择time)
    </p>
    <div class="demo-input">
      <label>绑定值3</label>
      <input
        :value="currentTime"
        readonly
        >
    </div>
    <div>
      <bxs-datetime-picker
        v-model="currentTime"
        type="time"
        @change="change"
        :min-hour="minHour"
        :max-hour="maxHour"
        />
    </div>
    <p class="demo-title">
      与popUp配合使用(点击输入框)
    </p>

    <div
      class="demo-input magin-30"
      @click="showDateTimePicker"
      >
      <label>绑定值4</label>
      <input
        disabled
        :value="parseTime(currentDate3,'{y}/{m}/{d}')"
        >
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      minDate: new Date('2018/02/2'),
      maxDate: new Date('2019/6/30'),
      minHour: 2,
      maxHour: 12,
      currentDate: new Date('2018/1/1'),
      currentDate2: new Date(2008, 8, 8),
      currentDate3: new Date('2018/08/08 12:00:00'),
      currentTime: '12:12:12',
    }
  },
  beforeDestroy() {
    this.$datetime.close()
  },
  methods: {
    showDateTimePicker() {
      const self = this
      this.$datetime({
        value: self.currentDate3,
        type: 'date',
        confirmButtonColor: '#508cee',
        confirm(data) {
          // console.log("confirm",data)
          self.currentDate3 = data
        },
        change() {
          //   console.log('change',val)
        },
        cancel() {
          // console.log("cancel")
        },
      })
    },
    formatter1(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    cancel() {
      this.showPicker = false
    },
    confirm() {
      // console.log("confirm",data)
    },
    change() {
      //   console.log('change', data)
    },
    parseTime(date, cFormat) {
      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay(),
      }
      const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        if (result.length > 0 && value < 10) {
          value = `0${value}`
        }
        return value || 0
      })
      return timeStr
    },
  },
}
</script>
<style lang="postcss">
@import url('../../../src/style/reset.css');
.demo-title {
  padding: 15px 15px;
  font-size: 16px;
  font-weight: bold;
}
.demo-input {
  background: #fff;
  padding-bottom: 10px;
  & label {
    font-size: 16px;
    padding: 15px;
  }
  & input {
    height: 30px;
    border: 1px solid #e5e5e5;
    padding: 0 10px;
    width: 250px;
  }
}
.magin-10 {
  margin-top: 10px;
}
.magin-30 {
  margin-bottom: 30px;
}
.btn {
  padding: 10px;
}
</style>
