<template>
  <CInput ref="label" :label="label">
    <slot>
      <div class="wrapper">
        <div style="width: 67%; display: inline-block;">
          <div>
            <input ref="start" type="text" readonly="true" class="input-wrapper" :value="value.start_time" style="width: 40%;" placeholder="选择开始时间" @focus="onFocusStartTime" @blur="validate">
            <span style="display: inline-block; width: 5%;">-</span>
            <input ref="end" type="text" readonly="true" class="input-wrapper" :value="value.expire_time" style="width: 40%;" placeholder="选择结束时间" @focus="onFocusEndTime" @blur="validate">
          </div>
        </div>

        <div style="display: inline-block;">
          <Radio :label="{text: '无固定期限', value: true}" v-model="noLimitTime"></Radio>
        </div>
      </div>
    </slot>
  </CInput>
</template>

<script>

import Input from './input';
import Radio from './radio';
import {DatePicker} from 'cube-ui';

export default {
  name: 'CDatePick',
  props: {
    label: {
      type: String
    },
    value: {
      type: Object,
      default() {
        return {start_time: '', expire_time: '', noLimit: false};
      }
    }
  },
  data() {
    return {
      noLimitTime: this.value.noLimit
    };
  },
  methods: {
    onFocusStartTime() {
      if (!this.startDatePicker) {
        this.startDatePicker = this.$createDatePicker({
          title: '选择开始时间',
          min: new Date(1990, 7, 8),
          max: new Date(2050, 9, 20),
          value: this.value.start_time ? new Date(...this.value.start_time.split('/')) : new Date(),
          onSelect: this.selectStartTimeHandle,
          onCancel: null
        });
      }

      this.startDatePicker.show();
    },
    selectStartTimeHandle(date, selectedVal) {
      this.$refs.start.value = selectedVal.join('/');
      this.updateTime();
      this.validate();
    },
    onFocusEndTime() {
      if (this.noLimitTime) {
        this.noLimitTime = false;
      }

      this.endDatePicker = this.$createDatePicker({
        title: '选择结束时间',
        min: this.value.start_time ? new Date(...this.value.start_time.split('/')) : new Date(1990, 7, 8),
        max: new Date(2050, 9, 20),
        value: this.value.expire_time ? new Date(...this.value.expire_time.split('/')) : new Date(),
        onSelect: this.selectEndTimeHandle,
        onCancel: null
      });

      this.endDatePicker.show();
    },
    selectEndTimeHandle(data, selectedVal) {
      this.$refs.end.value = selectedVal.join('/');
      this.updateTime();
      this.validate();
    },
    updateTime() {
      this.$emit('input', {
        start_time: this.$refs.start.value,
        expire_time: this.$refs.end.value,
        noLimit: this.noLimitTime
      });
    },
    validate() {
      if (this.$refs.start.value && (this.$refs.end.value || this.noLimitTime)) {
        this.$refs.label.setShowError(false);
        return true;
      } else {
        this.$refs.label.setShowError();
        return false;
      }
    }
  },
  watch: {
    noLimitTime(newVal) {
      this.$refs.end.value = '';

      this.updateTime();
      this.validate();
    }
  },
  components: {
    CInput: Input,
    DatePicker,
    Radio
  }
};
</script>

<style lang="scss">

  .wrapper {
    width: 100%;
    font-size: 28px;
  }

  .input-wrapper {
    display: inline-block;
    line-height: 1;
  }

  .cube-picker-panel {
    /deep/ .cube-picker-confirm {
      color: black;
    }
  }
</style>