<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-popup :get-container="getContainer"
      v-model="show"
      position="bottom">
    <vue-hash-calendar model="dialog" :defaultDatetime="time_date" @confirm="hiredate_confirm"></vue-hash-calendar>
    </van-popup>
  </van-cell>
</template>

<script>
import vueHashCalendar from '@/components/common/vueHashCalendar'
import moment from 'moment'
export default {
  name: 'DateTimeCell',
  components: {vueHashCalendar},
  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
    }
  },
  data () {
    return {
      time_date: '',
      show: false
    }
  },
  methods: {
    getContainer () {
      return document.body
    },
    onConfirm (data) {
      this.show = false
      this.$emit('value', moment(data).format('YYYY-MM-DD'))
    },
    hiredate_confirm (value) {
      this.show = false
      this.$emit('value', moment(value.getTime()).format('YYYY-MM-DD HH:mm'))
    }
  },
  created () {
    let self = this
    self.time_date = new Date()
  }
}
</script>

<style scoped>

</style>
