<template>
  <div>
    <van-cell is-link @click="showPopup">{{ dateTime }}</van-cell>
    <van-popup v-model="show" position="bottom" :close-on-click-overlay="false">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @change="change"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Cell, Popup, DatetimePicker } from 'vant';
export default {
  components: {
    vanCell: Cell,
    vanPopup: Popup,
    vanDatetimePicker: DatetimePicker
  },
  props: ['value','minDate','maxDate'],
  created() {
    this.currentDate = this.value
    if (!this.value) {
      this.dateTime = "请选择日期"
    } else {
      this.dateTime = this.dateFormat(this.currentDate)
    }
  },
  data() {
    return {
      show: false,
      currentDate: '',
      dateTime: ''
    }
  },
  watch: {
    value(val) {
      this.currentDate = val
      this.dateTime = this.dateFormat(this.currentDate)
    },
  },
  methods: {
    showPopup() {
      this.show = true
    },
    change() {
    },
    confirm() {
      this.dateTime = this.dateFormat(this.currentDate)
      this.show = false
      this.$emit('input', this.currentDate)
    },
    cancel() {
      this.show = false
    },
    dateFormat(date) {
      let y = date.getFullYear();  
      let m = date.getMonth() + 1;  
      m = m < 10 ? '0' + m : m;  
      let d = date.getDate();  
      d = d < 10 ? ('0' + d) : d;  
      return y + '-' + m + '-' + d;  
    }
  }
}
</script>
