<template>
  <el-popover
    trigger="hover"
    :placement="item.placement"
    :close-delay="0"
  >
    <div class="c-event-detail">
      <div class="c-event-detail__name">
        {{ item.event.origin.target.name }}
        <i
          v-if="editable"
          class="o-icon--active el-icon-delete u-pointer"
          @click="onRemove"
        />
      </div>
      <div class="c-event-detail__time">{{ time }}</div>
      <div class="c-event-detail__desc">{{ date }}</div>
      <div
        v-if="desc"
        class="c-event-detail__desc"
      >
        {{ desc }}
      </div>
    </div>
    <template #reference>
      <div class="c-event">
        <div class="u-ellipsis">{{ item.event.origin.target.name }}</div>
        <div class="c-event__time u-ellipsis">{{ item.startTime }}</div>
        <div class="c-event__sp">|</div>
        <div class="c-event__time u-ellipsis">{{ item.endTime }}</div>
      </div>
    </template>
  </el-popover>
</template>

<script>
import {
  getEventDateDescription,
  getEventExtraDescription
} from '@/utils/event'

export default {
  name: 'EventItemWeek',
  props: {
    item: {
      type: Object,
      default: null
    },
    editable: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    time () {
      const { startTime, endTime } = this.item
      return `${startTime} - ${endTime}`
    },
    date () {
      return getEventDateDescription(this.item.event.origin)
    },
    desc () {
      return getEventExtraDescription(this.item.event.origin)
    }
  },
  methods: {
    onRemove () {
      this.$emit('remove', this.item.event)
    }
  }
}
</script>

<style lang="scss" scoped>
.c-event-detail {
  display: inline-block;
  color: $black;

  &__name {
    max-width: 300px;
    font-size: 16px;
    font-weight: bold;
  }

  &__time {
    margin-top: 6px;
    font-size: 14px;
  }

  &__desc {
    margin-top: 6px;
    color: $info;
    font-size: 12px;
  }
}

.c-event {
  position: sticky;
  top: 0;
  padding: 6px;
  font-size: 14px;

  &__time {
    margin-top: 8px;
    font-size: 12px;
    color: $info;
  }

  &__sp {
    line-height: 1;
    transform: scale(0.5);
  }
}
</style>
