<template>
  <div class="van-hairline--bottom">
    <van-field 
        :label="proofSubItem.label" 
        readonly
        :value="valueStr"
        placeholder="点击选择日期" @click="showTimer = true"/>
    <van-popup v-model="showTimer" position="bottom" round >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="showTimer = false"
      />
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Field, Popup, DatetimePicker} from 'vant';
import filter from '@/filter/filters.ts';
@Component({
  name: 'TypeSix',
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
  },
})
export default class TypeSix extends Vue {
  @Prop()
  private proofSubItem: any;
  @Prop()
  private value!: any;

  private showTimer: boolean = false;
  private minDate: any = new Date(2020, 0, 1);
  private maxDate: any = new Date(2025, 10, 1);
  private currentDate: any = new Date();
  get valueStr() {
    if ( this.value.value ) {
      return filter.timeFormat(this.value.value);
    }
    return '';
  }
  private confirm(value: any) {
    this.showTimer = false;
    this.$emit('update:value', {...this.value, value: Math.round(value.getTime() / 1000)});
  }
}
</script>
