<template>
  <div class="q-pa-xs">
    <q-btn
      @click.stop="step=1;showSelectWin=true;selectValue=valueInner||Date.now();"
      color="primary q-mr-xs"
      label="选择..."
      outline
      v-if="!showonly&&!inputShow"
    ></q-btn>
    <q-input
      outlined
      dense
      @click="step=1;showSelectWin=true;"
      color="primary q-mr-xs"
      :value="valueStr"
      :rules="$attrs.rules"
      :bg-color="inputBgColor"
      v-if="!showonly&&inputShow"
    >
      <template #append v-if="!!valueStr">
        <q-btn flat dense round icon="cancel" @click.stop="clear" />
      </template>
    </q-input>
    <!-- 显示的情况 -->
    <span class="q-ma-xs" v-if="valueStr&&!inputShow">
      <span v-text="date" class="cursor-pointer" @click="step=1;showSelectWin=!showonly"></span>
      <span
        v-text="time"
        :class="type==='dateTime'?'q-ml-sm':''"
        class="cursor-pointer"
        @click="step=2;showSelectWin=!showonly"
      ></span>
      <q-btn
        class="q-ml-sm"
        icon="clear"
        round
        flat
        dense
        color="grey-8"
        @click="clear"
        v-if="!showonly"
      ></q-btn>
    </span>
    <kyb-dialog v-model="showSelectWin" transition-show="scale" transition-hide="scale">
      <q-card class>
        <q-bar>
          <q-icon name="date_range" />
          <div>选择日期</div>
          <q-space />
          <q-btn dense flat round icon="close" v-close-popup>
            <q-tooltip>关闭</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card-section v-if="type!=='dateTime'" class="scroll" style="max-height: 80vh">
          <q-date v-if="type==='date'" :value="selectDate" @input="onDateInput($event); onFinish();showSelectWin=false" class="no-shadow" />
          <q-time
            v-if="type==='time'"
            :with-seconds="withSeconds"
            :value="selectTime"
            @input="onTimeInput($event); onFinish();showSelectWin=false"
            class="no-shadow"
            format24h
          />
        </q-card-section>
        <q-card-section v-if="type==='dateTime'" class="q-pa-none scroll" style="max-height: 80vh">
          <q-stepper
            v-model="step"
            header-nav
            ref="stepper"
            color="primary"
            animated
            class="no-shadow"
          >
            <q-step :name="1" title="日期" icon="settings" :done="step > 1" :header-nav="step > 1">
              <q-date :value="selectDate" @input="onDateInput" class="no-shadow" />
            </q-step>
            <q-step
              :name="2"
              title="时间"
              icon="create_new_folder"
              :done="step > 2"
              :header-nav="step > 2"
            >
              <q-time :with-seconds="withSeconds" :value="selectTime" @input="onTimeInput" class="no-shadow" format24h />
            </q-step>
          </q-stepper>
        </q-card-section>
        <q-separator />
        <q-card-section v-if="type==='dateTime'" class="q-pa-sm">
          <q-btn
            v-if="step===1"
            @click="() => { done1 = true; step = 2 }"
            :disabled="!selectDate"
            color="primary"
            label="下一步"
          />

          <q-btn
            v-if="step===2"
            @click="() => { done2 = true; showSelectWin=false; onFinish() }"
            color="primary"
            :disabled="!selectDate||!selectTime"
            label="完成"
          />
          <q-btn flat v-if="step>1" @click="step = 1" color="primary" label="返回" class="q-ml-sm" />
        </q-card-section>
      </q-card>

      <!-- <q-time :with-seconds="withSeconds" v-model="time"/> -->
    </kyb-dialog>
  </div>
</template>
<script>
// import _ from 'underscore'
export default {
  name: 'kyb-date',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    name: String,
    type: { type: String, default: 'date' },
    value: Number,
    inputShow: Boolean,
    showonly: Boolean,
    inputBgColor: String
  },
  data: function() {
    return {
      withSeconds: false,
      showSelectWin: false,
      step: 1,
      valueInner: this.value,
      selectValue: undefined
    }
  },
  watch: {
    value(old) {
      this.valueInner = old
    }
  },
  mounted() {
    // console.log(this)
  },
  computed: {
    date() {
      return this.getDate(this.valueInner)
    },
    time() {
      return this.getTime(this.valueInner)
    },
    valueStr: function() {
      return this.genValueStr(this.date, this.time)
    },
    selectDate() {
      return this.getDate(this.selectValue)
    },
    selectTime() {
      return this.getTime(this.selectValue)
    }
  },
  methods: {
    clear() {
      this.$emit('input', undefined)
    },
    getDate(value) {
      let date
      if (
        value !== undefined &&
        value !== null
      ) {
        let v = new Date(value)
        if (this.type === 'dateTime') {
          date = v.showDate('/')
        } else if (this.type === 'date') {
          date = v.showDate('/')
        }
      }
      return date
    },
    getTime(value) {
      let time
      if (
        value !== undefined &&
        value !== null
      ) {
        let v = new Date(value)
        if (this.type === 'dateTime') {
          time = v.showTime()
        } else if (this.type === 'time') {
          time = v.showTime()
        }
      }
      return time
    },
    genValueStr(date, time) {
      if (this.type === 'date') {
        return date
      } else if (this.type === 'time') {
        return time
      } else if (this.type === 'dateTime') {
        if (date && time) {
          return date + ' ' + time
        }
      }
      return undefined
    },
    onDateInput(date) {
      const d = new Date()
      d.setDateByStr(date, '/')
      this.selectTime && d.setTimeByStr(this.selectTime)
      this.selectValue = d.getTime()
    },
    onTimeInput(time) {
      const d = new Date()
      this.selectDate && d.setDateByStr(this.selectDate, '/')
      d.setTimeByStr(time)
      this.selectValue = d.getTime()
    },
    onFinish() {
      if (this.type === 'date') {
        if (this.selectDate) {
          this.$emit('date-str', this.selectDate)
          this.$emit('input', new Date().setDateByStr(this.selectDate, '/').getTime())
        }
      } else if (this.type === 'time') {
        if (this.selectTime) {
          this.$emit('date-str', this.selectTime)
          this.$emit('input', new Date().setTimeByStr(this.selectTime).getTime())
        }
      } else if (this.type === 'dateTime') {
        if (this.selectDate && this.selectTime) {
          this.$emit('date-str', `${this.selectDate} ${this.selectTime}`)
          this.$emit(
            'input',
            new Date()
              .setDateByStr(this.selectDate, '/')
              .setTimeByStr(this.selectTime)
              .getTime()
          )
        }
      }
    }
  }
}
</script>
