<template>
  <view>
    <u-form-item
        :label="label"
        :prop="prop"
        :required="required"
        :label-position="labelPosition"
        @click="fnShowPicker"
    >
      <view class="select_content">
        <u-input
            :value="value || '请选择'"
            border="none"
            input-align="right"
            readonly
        />
        <u-icon name="arrow-right"></u-icon>
      </view>
    </u-form-item>
    <u-line/>
    <u-datetime-picker
        v-model="currentValue"
        :show="visible"
        :max-date="maxDate"
        :min-date="minDate"
        :mode="mode"
        @cancel="visible = false"
        @confirm="fnConfirm"
    />
  </view>
</template>

<script>
import dayjs from "dayjs";

export default {
  props: {
    value: {
      type: String,
      required: true,
      default: "",
    },
    label: {
      type: String,
      default: "时间",
    },
    prop: {
      type: String,
      default: "",
    },
    mode: {
      type: String,
      default: "datetime",
    },
    labelPosition: {
      type: String,
      default: "left",
    },
    required: {
      type: Boolean,
      default: true,
    },
    maxDate: {
      type: Number,
      default: dayjs().add(10, "year").valueOf(),
    },
    minDate: {
      type: Number,
      default: dayjs().subtract(10, "year").valueOf(),
    },
  },
  data() {
    return {
      visible: false,
      currentValue: this.value ? dayjs(this.value).valueOf() : new Date().getTime(),
    }
  },
  methods: {
    fnShowPicker() {
      this.visible = true
    },
    fnConfirm({mode, value}) {
      if (mode === "datetime")
        this.$emit('input', dayjs(value).format("YYYY-MM-DD HH:mm"))
      else if (mode === "date")
        this.$emit('input', dayjs(value).format("YYYY-MM-DD"))
      else if (mode === "year-month")
        this.$emit('input', dayjs(value).format("YYYY-MM"))
      this.visible = false;
    }
  },
}
</script>

<style scoped lang="scss"></style>