<template>
  <div class="">
    <group>
      <datetime
        v-model="value"
        @on-change="onChange"
        :title="title"
        :confirm-text="confirm_text"
        :cancel-text="cancel_text"
        :placeholder="placeholder"
        @on-cancel="onCancel"
        @on-confirm="onConfirm"
        @on-hide="onHide"></datetime>
    </group>
  </div>
</template>
<script>
  /*
    参考vux文档 datetime
  */
  import { Datetime, Group, XButton } from 'vux'
  export default {
    components: {
      Datetime,
      Group,
      XButton
    },
    props: ['title', 'confirm_text', 'cancel_text', 'placeholder', 'value'],
    data () {
    },
    mounted () {},
    methods: {
      onChange (value) {
        // console.warn('on-change', value)
      },
      log (str1, str2 = '') {
        console.warn(str1, str2)
      },
      onConfirm (val) {
        this.$emit('on-confirm', val)
      },
      onCancel () {
        this.$emit('on-cancel')
      },
      onHide () {
        this.$emit('on-hide')
      }
    }
  }
</script>
<style lang="less">
  .dp-header {
    background-color: #89A9CF;
    color: #fff;
    .dp-item.dp-left, .dp-item.dp-right {
      color: #fff!important;
      font-size: 14px;
    }
  }
  .dp-item {
    .scroller-item {
      font-size:14px;
    }
    .scroller-item-selected {
      font-size: 16px;
    }
  }
</style>