<template>
  <view>
    <tui-input :required="required"
               textRight
               :placeholder="placeholder"
               :label="label"
               disabled
               @click="!disabled && show()"
               :value="value">
      <view v-if="!disabled"
            slot="right">
        <tui-icon name="arrowright"
                  :size="24"></tui-icon>
      </view>
    </tui-input>
    <tui-datetime :endDay="new Date().getDate()"
                  :endMonth="new Date().getMonth() + 1"
                  :endYear="new Date().getFullYear()"
                  :type="7"
                  ref="dateTime"
                  @confirm="change"></tui-datetime>
  </view>
</template>
<script>
import moment from "moment";
export default {
  props: {
    value: {},
    label: {},
    required: {},
    placeholder: {},
    now: {},
    disabled: {},
    type: {
      type: String,
      default: "YYYY-MM-DD HH:mm:ss",
    },
  },
  methods: {
    show: function (e) {
      this.$refs.dateTime && this.$refs.dateTime.show();
    },
    change(e) {
      this.$emit("input", e.result);
    },
  },
  created() {
    if (this.now) {
      // console.log('moment.HTML5_FMT.DATE:',moment.HTML5_FMT.DATE);
      console.log("this.type:", this.type);
      this.$emit("input", moment().format('YYYY-MM-DD HH:mm:ss'));
    }
  },
};
</script>
