<template>
  <view class="render-loadtime">
    {{ text }}
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  props: {
    loadTime: String,
    loadTimeRange: String,
    separator: {
      type: String,
      default: ' ~ '
    }
  },
  computed: {
    text() {
      if (!this.loadTime) return '';
      const dayOffsetList = ['今天', '明天', '后天'];
      const now = dayjs();
      const loadTime = dayjs(this.loadTime);
      const dayOffset = dayjs(loadTime.format('YYYY-MM-DD')).diff(now.format('YYYY-MM-DD'), 'day');
      const prefix = dayOffset >= 0 && dayOffset < 3 ? dayOffsetList[dayOffset] : '';
      if (this.loadTimeRange) {
        const [sectionStart, sectionEnd] = this.loadTimeRange.split(this.separator);
        return [prefix || loadTime.format('YYYY年MM月DD日'), '大约', dayjs(sectionStart).format('HH:mm'), '到', dayjs(sectionEnd).format('HH:mm'), '装货'].join(' ');
      }
      return [prefix || loadTime.format('YYYY年MM月DD日'), loadTime.format('HH:mm'), '装货'].join(' ');
    }
  }
}
</script>

<style lang="scss">
.render-loadtime {
  box-sizing: border-box;
}
</style>