<template>
  <view class="cv-picker-date-time">
    <picker
      class="cv-picker-date-item"
      mode="date"
      :value="localVal_date"
      :start="startDate"
      :end="endDate"
      @change="bindDateChange"
      :fields="fields"
      @click="changeIconTop"
      @cancel="bindPickerCancel"
    >
      <view class="cv-picker-date-text" v-if="localVal_date != ''">{{ localVal_date }}</view>
      <view class="cv-picker-item-placeholder" v-else>{{ placeholder }}</view>
    </picker>
    <picker
      class="cv-time-base-item"
      mode="time"
      :value="localVal_time"
      :start="startTime"
      :end="endTime"
      @change="bindTimeChange"
      @click="changeIconTop"
      @cancel="bindPickerCancel"
    >
      <view class="cv-time-base-text" v-if="localVal_time != ''">{{ localVal_time }}</view>
      <view class="cv-picker-item-placeholder" v-else>{{ placeholder2 }}</view>
    </picker>
  </view>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvDatetimeBase',
  emits: ['input', 'update:modelValue'],
  props: {
    //默认输入框
    value: {
      type: String,
      default: ''
    },
    modelValue: {
      type: String,
      default: ''
    },
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    },
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    fields: {
      type: String,
      default: 'day'
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请选择日期'
    },
    // 占位符
    placeholder2: {
      type: String,
      default: '请选择时间'
    }
  },
  watch: {
    value(newVal) {
      this.localVal = this.value;
      this.localVal = newVal;
      this.localVal_date = this.localVal.split(' ')[0] || '';
      this.localVal_time = this.localVal.split(' ')[1] || '';
    }
  },
  data() {
    return {
      localVal: '',
      localVal_date: '',
      localVal_time: '',
      iconTop: false
    };
  },
  created() {
    this.localVal = this.doValueGet();
    this.localVal_date = this.localVal.split(' ')[0] || '';
    this.localVal_time = this.localVal.split(' ')[1] || '';
  },
  methods: {
    doValueGet() {
      if (this.value === '') return this.modelValue;
      if (this.modelValue === '') return this.value;
      return this.value;
    },
    bindTimeChange: function (e) {
      let value = e.detail.value;
      this.localVal_time = value;
      this.mergeDateTime();
    },
    bindDateChange: function (e) {
      let value = e.detail.value;
      this.localVal_date = value;
      this.mergeDateTime();
    },
    bindPickerCancel() {
      this.iconTop = false;
    },
    mergeDateTime() {
      this.localVal = this.localVal_date + ' ' + this.localVal_time;
      this.iconTop = false;
      this.$emit('input', this.localVal);
      this.$emit('update:modelValue', this.localVal);
    },
    changeIconTop() {
      this.iconTop = true;
    }
  }
};
</script>

<style>
.cv-picker-date-time {
  min-height: 35px;
  display: flex;
  flex: 1;
}
.cv-picker-date-item,
.cv-time-base-item {
  height: 35px;
  line-height: 35px;
  display: flex;
  width: auto;
  min-width: 60px;
  margin-left: 20px;
}
.cv-time-base-item {
  min-width: 50px;
  margin-right: 10px;
}
.cv-picker-item-placeholder {
  color: grey;
}
</style>
