<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
      :filter="filter"
      :itemHeight="70"
      :visibleItemCount="5"
      :minDate="minDate"
      :show="show"
      v-model="time"
      :formatter="formatter"
      :maxDate="maxDate"
      mode="datetime"
      @confirm="confirm"
      :closeOnClickOverlay="true"
      @close="close"
      @cancel="close"
    ></up-datetime-picker>
  </view>
</template>

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

  export default {
    name: 'LockDatetimePicker',
    props: {
      title: String,
      value: Number,
      minDate: Number,
      maxDate: Number,
      type: {
        type: String,
        default: 'datetime'
      }
    },
    data() {
      return {
        time: 0,
        show: false
      }
    },
    created() {
      this.time = this.value
    },
    methods: {
      timeFormat,
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        }
        if (type === 'month') {
          return `${value}月`
        }
        if (type === 'day') {
          return `${value}日`
        }
        if (type === 'hour') {
          return `${value}时`
        }
        if (type === 'minute') {
          return `${value}分`
        }
        return value
      },
      filter(mode, options) {
        if (mode === 'minute' && this.type === 'datehour') {
          return options.filter(option => option === '00')
        }

        return options
      },
      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>
