<!--
/**
 * @fileoverview ItemColumn component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <div
    :style="itemColumnStyle"
    class="gantt-elastic__task-list-item-column"
    @click="emitEvent('click1', $event)"
    @contextmenu.prevent="emitEvent('rightShow', $event)"
  >
    <div :style="wrapperStyle" class="gantt-elastic__task-list-item-value-wrapper">
      <slot />
      <div :style="containerStyle" class="gantt-elastic__task-list-item-value-container">
        <div
          v-if="!html"
          :style="valueStyle"
          class="gantt-elastic__task-list-item-value"
          @click="emitEvent('click', $event)"
          @mouseenter="emitEvent('mouseenter', $event)"
          @mouseover="emitEvent('mouseover', $event)"
          @mouseout="emitEvent('mouseout', $event)"
          @mousemove="emitEvent('mousemove', $event)"
          @mousedown="emitEvent('mousedown', $event)"
          @mouseup="emitEvent('mouseup', $event)"
          @mousewheel="emitEvent('mousewheel', $event)"
          @touchstart="emitEvent('touchstart', $event)"
          @touchmove="emitEvent('touchmove', $event)"
          @touchend="emitEvent('touchend', $event)"
        >
          <span v-if="value === '未开始'"><el-tag type="info" size="mini">未开始</el-tag></span>
          <span v-else-if="value === '进行中'"><el-tag size="mini">进行中</el-tag></span>
          <span v-else-if="value === '已完成'"><el-tag type="success" size="mini">已完成</el-tag></span>
          <span v-else-if="value === '暂停中'"><el-tag type="danger" size="mini">暂停中</el-tag></span>
          <span v-else>{{ value }}</span>
        </div>
        <div
          v-else
          :style="valueStyle"
          class="gantt-elastic__task-list-item-value"
          @click="emitEvent('click', $event)"
          @mouseenter="emitEvent('mouseenter', $event)"
          @mouseover="emitEvent('mouseover', $event)"
          @mouseout="emitEvent('mouseout', $event)"
          @mousemove="emitEvent('mousemove', $event)"
          @mousedown="emitEvent('mousedown', $event)"
          @mouseup="emitEvent('mouseup', $event)"
          @mousewheel="emitEvent('mousewheel', $event)"
          @touchstart="emitEvent('touchstart', $event)"
          @touchmove="emitEvent('touchmove', $event)"
          @touchend="emitEvent('touchend', $event)"
          v-html="value"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ItemColumn',
  inject: ['root'],
  // eslint-disable-next-line vue/require-prop-types
  props: ['column', 'task'],
  data() {
    return {}
  },
  computed: {
    /**
     * Should we display html or just text?
     *
     * @returns {boolean}
     */
    html() {
      if (
        typeof this.column.html !== 'undefined' &&
        this.column.html === true
      ) {
        return true
      }
      return false
    },

    /**
     * Get column value
     *
     * @returns {any|string}
     */
    value() {
      if (typeof this.column.value === 'function') {
        return this.column.value(this.task)
      }
      return this.task[this.column.value]
    },

    itemColumnStyle() {
      return {
        ...this.root.style['task-list-item-column'],
        ...this.column.style['task-list-item-column'],
        width: this.column.finalWidth + 'px',
        height: this.column.height + 'px'
      }
    },

    wrapperStyle() {
      return {
        ...this.root.style['task-list-item-value-wrapper'],
        ...this.column.style['task-list-item-value-wrapper']
      }
    },

    containerStyle() {
      return {
        ...this.root.style['task-list-item-value-container'],
        ...this.column.style['task-list-item-value-container']
      }
    },

    valueStyle() {
      return {
        ...this.root.style['task-list-item-value'],
        ...this.column.style['task-list-item-value']
      }
    }
  },
  methods: {
    /**
     * Emit event
     *
     * @param {String} eventName
     * @param {Event} event
     */
    emitEvent(eventName, event) {
      // console.log(eventName, 11111)
      if (
        typeof this.column.events !== 'undefined' &&
        typeof this.column.events[eventName] === 'function'
      ) {
        this.column.events[eventName]({
          event,
          data: this.task,
          column: this.column
        })
      }
      if (eventName === 'rightShow') {
        console.log(this.task.type, eventName, 11111)
      }
      this.root.$emit(`taskList-${this.task.type}-${eventName}`, {
        event,
        data: this.task,
        column: this.column
      })
    }
  }
}
</script>
