<template>
  <div class="module">
<div :class="className">
      <span class="spanTitle1">{{ title }}</span>
<van-cell :value="internalValue" @click="focus1" />
<div class="container1">
    <van-calendar v-model="showPicker" color="#1c4990"
                  :default-date="defaultDate"
                  :min-date="minDate" class="calendar"
                  :max-date="maxDate"
                  :show-confirm="true"
                  @confirm="onConfirmDate"
                  @close="blur"
                  :close-on-click-overlay="false"
    >
      <template v-if="type !== 'date'" slot="title">
        <div class="calendar-title" @click="timerPicker = true">
          {{ selectTimeToSeconds }}
        </div>
      </template>
    </van-calendar>
    <van-overlay class="time-picker" :show="timerPicker"  :close-on-click-overlay="false">
      <van-picker show-toolbar title="选择时间" @cancel="timerPicker = false" :columns="timeColumns" @confirm="confirmTime" />
    </van-overlay>
  </div>
<b v-if="verify" class="verify">*</b>
    </div>
    <p class="reminder" v-if="reminder">当前项为必填项</p>
    </div>
</template>

<script>
import moment from 'moment'
export default {

  props: {
    title: {
      type: String,
      default () {
        return ''
      }
    },
    value: {
      type: String,
      default () {
        return ''
      }
    },
    verify: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 类型 选择到秒还是只到日期
    type: {
      type: String,
      default () {
        return 'seconds'
      }
    },
    showTimePicker: {
      type: Boolean,
      default () {
        return false
      }
    },
    minDate: {
      type: Date,
      default () {
        return new Date(2010, 0, 1)
      }
    },
    defaultDate: {
      type: Date,
      default () {
        return new Date()
      }
    },
    maxDate: {
      type: Date,
      default () {
        return new Date(2050, 0, 1)
      }
    }
  },
  name: 'Time',
  watch: {
    showTimePicker: {
      handler () {
        this.showPicker = true
      },
      immidiate: true
    },
    value (cur, old) {
      if (!cur) {
        this.reminder = true
        this.className = 'el_input_focusTrue'
        this.internalValue = ''
      } else {
        this.internalValue = cur
        this.blur()
      }
    }
  },
  data () {
    return {
      className: 'el_input_focus',
      internalValue: this.value,
      show: false,
      cascaderValue: '',
      reminder: false,
      currentDate: new Date(),
      showPicker: this.showTimePicker,
      timerPicker: false,
      selectTimeToSeconds: moment().format('HH:mm:ss'),
      timeColumns: [
        {
          values: this.createTimeList(23),
          defaultIndex: Number(moment().format('HH'))
        },
        {
          values: this.createTimeList(59),
          defaultIndex: Number(moment().format('mm'))
        },
        {
          values: this.createTimeList(59),
          defaultIndex: Number(moment().format('ss'))
        }
      ]

    }
  },
  mounted () {
    console.log(this.minDate, 1111)
    if (this.value) {
      this.className = 'el_input_focus1'
      this.reminder = false
    }
  },

  methods: {
    createTimeList (N) {
      const foo = []
      for (let i = 0; i <= N; i += 1) {
        if (i < 10) {
          foo.push(`0${i}`)
        } else {
          foo.push(i)
        }
      }
      return foo
    },
    // 发现时间
    onConfirmDate (date) {
      if (this.type === 'date') {
        this.internalValue = `${moment(date).format('YYYY-MM-DD')
        } `
      } else {
        this.internalValue = `${moment(date).format('YYYY-MM-DD')
        } ${this.selectTimeToSeconds}`
      }
      console.log(this.internalValue)
      if (this.verify) {
        if (this.value) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.value) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
      // this.$emit('onConfirmDate', selectTime)
      this.$emit('input', this.internalValue)
      this.showPicker = false
    },
    confirmTime (value) {
      this.selectTimeToSeconds = `${value[0]}:${value[1]}:${value[2]}`
      this.timerPicker = false
    },

    formatDate (date) {
      return `${new Date(date).getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      this.show = false
      this.internalValue = this.formatDate(date)
      if (this.verify) {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.internalValue) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
      this.$emit('input', this.internalValue)
    },
    focus1 () {
      this.showPicker = true
      if (this.internalValue) {
        this.className = 'el_input_focus1'
      } else {
        this.className = 'el_input_blur'
      }
    },
    blur () {
      this.showPicker = false
      if (this.verify) {
        if (this.value) {
          this.className = 'el_input_focus1'
          this.reminder = false
        } else {
          this.reminder = true
          this.className = 'el_input_focusTrue'
        }
      } else {
        if (this.value) {
          this.className = 'el_input_focus1'
        } else {
          this.className = 'el_input_focus'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container1 {
   .time-picker {
  z-index: 9999 !important;
   display: flex;
    align-items: center;
}
/deep/ .van-picker {
      width:100%;
      z-index: 99999 !important;
    }
}

</style>
