
<template>
  <div class="form-datetime mb-4 last:mb-0 flex" :style="options.style">
    <v-label :options="options"></v-label>
    <div class="form-value flex-1">
      <div class="datetime" @click="show = true">{{ value | format }}</div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker v-model="currentDate" :type="options.mode || 'datetime'" @cancel="show = false" @confirm="confirmDate" title="选择完整时间" />
    </van-popup>
  </div>
</template>
<script>
import Base from '../base';
import dayjs from 'dayjs';
import DateTimePicker from 'vant/lib/datetime-picker';
import 'vant/lib/datetime-picker/style';
import Popup from 'vant/lib/popup';
import 'vant/lib/popup/style';
import vLabel from './label';

export default {
  name: 'v-form-datetime',
  extends: Base,
  components: {
    'van-datetime-picker': DateTimePicker,
    'van-popup': Popup,
    vLabel,
  },
  data(){
    return {
      show: false,
      currentDate: new Date(),
    }
  },
  props: {
    value: [Date, String]
  },
  filters: {
    format(dataTime){
      if(!dataTime) return '';
      let formatStr = 'YYYY-MM-DD HH:mm'
      return dayjs(dataTime).format( formatStr );
    }
  },
  methods: {
    handleChange(value){
      let formatStr = this.options && this.options.format||'YYYY-MM-DD HH:mm'
      this.$emit('update:value',  dayjs(value).format(formatStr));
    },
    confirmDate(value){
      this.handleChange(value);
      this.show = false;
    }
  }
}
</script>
<style lang="less" scoped>
.form-datetime {
  .datetime {
    padding: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0.4rem;
    min-height: 2rem;
    box-sizing: border-box;
    text-align: left;
  }
}
</style>
