<template>
    <div
      slot="reference"
      class="plan"
      :style="{
        'background-color': statusColor,
        'margin-top': 0.1 * cellHeight + 'px'
      }"
      @click="onClick"
    >
      <div class="runTime">
        <span>S:{{ startToString }}</span>
        <span>E:{{ endToString }}</span>
      </div>
      <div class="middle">编号{{ item.id }}</div>
    </div>
</template>

<script>
module.exports = {
	props: {
		data: Object,
		item: Object,
		currentTime: dayjs,
		updateTimeLines: Function,
		cellHeight: Number,
		startTimeOfRenderArea: Number
	},
	data() {
    return {
      dayjs: dayjs
    };
  },
  computed: {
    statusColor() {
      let { item, currentTime } = this;
      let start = dayjs(item.start);
      let end = dayjs(item.end);
      if (start.isBefore(currentTime) && end.isAfter(currentTime)) {
        return "#345612"; // NOW
      } else if (end.isBefore(currentTime)) {
        return "#234561"; // PAST
      } else {
        return "#123456"; // Future
      }
    },
    startToString() {
      return dayjs(this.item.start).format("HH:mm");
    },
    endToString() {
      return dayjs(this.item.end).format("HH:mm");
    }
  },
  methods: {
    onClick() {
      this.updateTimeLines(this.item.start, this.item.end);
    }
  }
}
</script>
