<template>
  <view>
    <view @click="changeShow"  class="name">
      <view class="name-text">{{ title }}</view>
      <view class="picker">
        {{ timeFormat(time, 'yyyy-mm-dd h:M') }}
      </view>
    </view>
    <up-datetime-picker itemHeight="60" :minDate="minDate" :title="placeholder" :show="show" v-model="time"
                        mode="datetime" @confirm="confirm" :closeOnClickOverlay="true"
                        @close="close"></up-datetime-picker>
  </view>
</template>

<script>
import { timeFormat } from 'uview-plus'

export default {
  name: 'LockDatetimePicker',
  props: {
    title: String,
    value: Number,
    minDate: Number,
    placeholder: String
  },
  data() {
    return {
      time: 0,
      show: false
    }
  },
  created() {
    this.time = this.value
  },
  methods: {
    timeFormat,
    changeShow() {
      this.show = !this.show
    },
    close() {
      this.show = false
    },
    confirm(e) {
      this.show = false
      this.$emit('changeTime', e.value)
    }
  }
}
</script>

<style scoped lang="scss">
.name {
  height: 100rpx;
  width: 750rpx;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  font-weight: bold;
  font-size: 32rpx;

  .name-text {
    width: 168rpx;
    margin-left: 32rpx;
    line-height: 100rpx;
  }

  .picker {
    margin-right: 32rpx;
    text-align: right;
    width: 518rpx;
    height: 100rpx;
    line-height: 100rpx;
  }
}
</style>
