<template>
  <div class="zhy-field-time">
    <van-field
      :value="this.value ? $dayjs(this.value).format('YYYY-MM-DD'): null"
      :label="label"
      readonly
      input-align="right"
      @click="show = true"
      placeholder="请选择时间"
    />
    <van-popup v-if="type === 0" position="bottom" round v-model="show">
      <van-datetime-picker
        v-bind="$attrs"
        v-model="templateValue"
        type="date"
        :min-date="minDate"
        @confirm="confirm"
        :max-date="maxDate"
      />
    </van-popup>
    <van-calendar
        v-else
        v-model="show"
        :min-date="minDate"
        show-confirm
        @confirm="confirm"
        :max-date="maxDate" />
  </div>
</template>

<script>
import {Calendar} from 'vant'
import Vue from 'vue'
Vue.use(Calendar)
export default {
  name: "zhy-field-time",
  props: {
    value: {
      type: Date,
      default: () => null,
    },
    type: {
      type: Number,
      default: 0,
    },
    placeholder: {
      type: String,
      default: "请选择时间",
    },
    minDate: {
      type: Date,
      default: () =>
        new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 365 * 10),
    },
    maxDate: {
      type: Date,
      default: () =>
        new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365 * 10),
    },
    label: {
        type: String,
        default: '时间'
    }
  },
  data() {
    return {
      show: false,
      templateValue: this.value
    };
  },
  methods: {
    confirm(val) {
      this.show = false;
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="stylus" scoped>
.zhy-field-time {
}
</style>