<template>
  <section class="AiDateTime">
    <div @tap.stop="show=true">
      <slot v-if="$slots.default"/>
      <div v-else class="right">
        <span v-if="value" v-text="value"/>
        <span v-else class="color-999" v-text="placeholder"/>
        <u-icon name="arrow-right" color="#ccc" class="right-icon"/>
      </div>
    </div>
    <u-picker v-model="show" mode="time" @confirm="handleConfirm" :params="params"/>
  </section>
</template>

<script>
export default {
  name: "AiDateTime",
  model: {
    event: "change",
    prop: "value"
  },
  props: {
    value: {default: ""},
    placeholder: {default: "请选择"},
    format: {default: "YYYY-MM-DD HH:mm:ss"}
  },
  data() {
    return {
      show: false,
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
        timestamp: true
      }
    }
  },
  methods: {
    handleConfirm(v) {
      this.$emit('change', this.$dateFormat(v.timestamp * 1000, this.format))
    }
  }
}
</script>

<style lang="scss" scoped>
.AiDateTime {
  width: 100%;

  .right {
    width: 100%;
    text-align: right;

    .right-icon {
      margin-left: 8px;
    }
  }

  .color-999 {
    color: #999;
  }
}
</style>
