<template>
  <van-cell
    :title="title"
    :value="value"
    :label="label"
    :icon="icon"
    :url="url"
    :border="border"
    :required="required"
    @click="show=true"
    is-link
  >
    {{date_value}}
    <van-calendar v-model="show" @confirm="onConfirm" :min-date="minDate1" :max-date="maxDate1" color="#238dfa" :get-container="getContainer"/>
  </van-cell>
</template>

<script>
  import Vue from 'vue';
  import {Calendar} from 'vant';
  import moment from 'moment'
  Vue.use(Calendar);
  export default {
    name: "DateCell",
    model: {
      prop: 'date_value',
      event: 'value'
    },
    props: {
      date_value: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      border: {
        type: Boolean,
        default: true
      },
      required: {
        type: Boolean,
        default: false
      },
      minDate:{
        type: Date,
        default: ()=>{
          return new Date(1970, 0, 0)
        }
      },
      maxDate:{
        type: Date,
        default: ()=>{
          return new Date(2099, 10, 28)
        }
      },
    },
    data() {
      return {
        show: false,
        minDate1: this.minDate,
        maxDate1: this.maxDate,
      }
    },
    methods: {
      getContainer() {
        return document.body
      },
      onConfirm(data) {
        this.show = false
        this.$emit('value', moment(data).format('YYYY-MM-DD'))
      }
    },
    mounted() {
    },
    created(){

    }
  }
</script>

<style scoped>

</style>
