<!--
/**
 * @fileoverview Header component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElasticHeader
 */
-->
<template>
  <div :style="{ ...style['header'] }" class="gantt-elastic__header">
    <slot name="headerOperationList" />
    <div
      :style="{ ...style['header-title'] }"
      class="gantt-elastic__header-title"
    >
      <div
        v-if="!opts.title.html"
        :style="{ ...style['header-title--text'] }"
        class="gantt-elastic__header-title--text"
      >
        {{ opts.title.label }}
      </div>
      <div
        v-if="opts.title.html"
        :style="{ ...style['header-title--html'] }"
        class="gantt-elastic__header-title--html"
        v-html="opts.title.label"
      />
    </div>
    <div
      :style="{ ...style['header-options'] }"
      class="gantt-elastic__header-options"
    >
      <button
        :style="{ ...style['header-btn-recenter'] }"
        class="gantt-elastic__header-btn-recenter"
        @click.prevent="recenterPosition"
      >
        {{ opts.locale.Now }}
      </button>
      <label
        :style="{ ...style['header-label'] }"
        class="gantt-elastic__header-label"
      >
        {{ opts.locale["X-Scale"] }}
        <div
          :style="{ ...style['header-slider-wrapper'] }"
          class="gantt-elastic__header-slider-wrapper"
        >
          <vue-slider
            :style="{ ...style['header-slider'] }"
            :process-style="{ ...style['header-slider--process'] }"
            :slider-style="{ ...style['header-slider--slider'] }"
            v-model="scale"
            :max="24"
            :min="2"
            class="gantt-elastic__header-slider"
            tooltip="none"
            width="100px"
          />
        </div>
      </label>
      <label
        :style="{ ...style['header-label'] }"
        class="gantt-elastic__header-label"
      >
        {{ opts.locale["Y-Scale"] }}
        <div
          :style="{ ...style['header-slider-wrapper'] }"
          class="gantt-elastic__header-slider-wrapper"
        >
          <vue-slider
            :style="{ ...style['header-slider'] }"
            :process-style="{ ...style['header-slider--process'] }"
            :slider-style="{ ...style['header-slider--slider'] }"
            v-model="height"
            :max="100"
            :min="7"
            class="gantt-elastic__header-slider"
            tooltip="none"
            width="100px"
          />
        </div>
      </label>
      <!--      <label-->
      <!--        :style="{ ...style['header-label'] }"-->
      <!--        class="gantt-elastic__header-label"-->
      <!--      >-->
      <!--        {{ opts.locale["Before/After"] }}-->
      <!--        <div-->
      <!--          :style="{ ...style['header-slider-wrapper'] }"-->
      <!--          class="gantt-elastic__header-slider-wrapper"-->
      <!--        >-->
      <!--          <vue-slider-->
      <!--            :style="{ ...style['header-slider'] }"-->
      <!--            :process-style="{ ...style['header-slider&#45;&#45;process'] }"-->
      <!--            :slider-style="{ ...style['header-slider&#45;&#45;slider'] }"-->
      <!--            v-model="scope"-->
      <!--            :max="31"-->
      <!--            :min="0"-->
      <!--            class="gantt-elastic__header-slider"-->
      <!--            tooltip="none"-->
      <!--            width="100px"-->
      <!--          />-->
      <!--        </div>-->
      <!--      </label>-->
      <!--      <label-->
      <!--        :style="{ ...style['header-label'] }"-->
      <!--        class="gantt-elastic__header-label"-->
      <!--      >-->
      <!--        {{ opts.locale["Task list width"] }}-->
      <!--        <div-->
      <!--          :style="{ ...style['header-slider-wrapper'] }"-->
      <!--          class="gantt-elastic__header-slider-wrapper"-->
      <!--        >-->
      <!--          <vue-slider-->
      <!--            :style="{ ...style['header-slider'] }"-->
      <!--            :process-style="{ ...style['header-slider&#45;&#45;process'] }"-->
      <!--            :slider-style="{ ...style['header-slider&#45;&#45;slider'] }"-->
      <!--            v-model="divider"-->
      <!--            :max="100"-->
      <!--            :min="0"-->
      <!--            class="gantt-elastic__header-slider"-->
      <!--            tooltip="none"-->
      <!--            width="100px"-->
      <!--          />-->
      <!--        </div>-->
      <!--      </label>-->
      <label
        :style="{ ...style['header-task-list-switch--label'] }"
        class="gantt-elastic__header-task-list-switch--wrapper"
      >
        <switches
          :style="{ ...style['header-task-list-switch'] }"
          v-model="root.state.options.taskList.display"
          class="gantt-elastic__header-task-list-switch"
        />
        {{ opts.locale["Display task list"] }}
      </label>
    </div>
  </div>
</template>

<script>
import vueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import Switches from 'vue-switches'

const defaultStyle = {
  header: {
    margin: '0px auto',
    background: '#f3f5f747',
    padding: '10px',
    overflow: 'hidden',
    clear: 'both',
    'margin-right': '20px',
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'space-between'
  },
  'header-title': { float: 'left' },
  'header-options': { float: 'right' },
  'header-title--text': {
    'font-size': '20px',
    'vertical-align': 'middle',
    'font-weight': '400',
    'line-height': '35px',
    'padding-left': '22px',
    'letter-spacing': '1px'
  },
  'header-title--html': {
    'font-size': '20px',
    'vertical-align': 'middle',
    'font-weight': '400',
    'line-height': '35px',
    'padding-left': '22px',
    'letter-spacing': '1px'
  },
  'header-btn-recenter': {
    background: '#95A5A6',
    border: 'none',
    outline: 'none',
    cursor: 'pointer',
    color: 'white',
    'border-radius': '3px',
    'margin-right': '27px',
    'font-size': '16px',
    padding: '10px 12px'
  },
  'header-slider': {
    'box-sizing': 'content-box'
  },
  'header-slider-wrapper': {
    display: 'inline-block',
    'vertical-align': 'middle'
  },
  'header-slider--slider': { 'box-sizing': 'content-box' },
  'header-slider--process': { 'box-sizing': 'content-box' },
  'header-task-list-switch--label': { 'box-sizing': 'content-box' },
  'header-task-list-switch': {
    margin: '0px 15px',
    'vertical-align': 'middle'
  },
  'header-label': {}
}
const defaultOptions = {
  title: {
    label: '',
    html: false
  },
  locale: {
    Now: '跳转到此刻',
    'X-Scale': 'X-缩放',
    'Y-Scale': 'Y-缩放',
    'Task list width': 'Task list',
    'Before/After': 'Expand',
    'Display task list': '显示/隐藏日报'
  }
}
export default {
  name: 'GanttHeader',
  components: {
    vueSlider,
    Switches
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['options', 'dynamicStyle'],
  inject: ['root'],
  data() {
    return {
      scaleTimeoutId: null,
      firstScale: false,
      localScale: 0,
      localHeight: 0,
      localBefore: 0,
      localPercent: 0,
      sliderOptions: {
        xScale: {
          value: 0
        }
      },
      style: {},
      opts: {}
    }
  },
  computed: {
    /**
     * If there is a component slot specified for header
     * @returns {bool}
     */
    beforeOptionsIsComponent() {
      const headerSlot = this.options.slots.header
      if (
        typeof headerSlot.beforeOptions === 'object' &&
        !Array.isArray(headerSlot.beforeOptions)
      ) {
        return true
      }
      return false
    },
    /**
     * If there is a slot with beforeOptions html content
     * @returns {bool}
     */
    beforeOptionsIsHtml() {
      if (typeof this.options.slots.header.beforeOptions === 'string') {
        return true
      }
      return false
    },
    scale: {
      get() {
        return this.localScale
      },
      set(value) {
        this.localScale = Number(value)
        this.setScale(this.localScale)
      }
    },
    height: {
      get() {
        return this.localHeight
      },
      set(value) {
        this.localHeight = Number(value)
        this.root.$emit('row-height-change', Number(value))
      }
    },
    scope: {
      get() {
        return this.localBefore
      },
      set(value) {
        this.localBefore = Number(value)
        this.root.$emit('scope-change', Number(value))
      }
    },
    divider: {
      get() {
        return this.localPercent
      },
      set(value) {
        this.localPercent = Number(value)
        this.root.$emit('taskList-width-change', Number(value))
      }
    }
  },
  created() {
    this.localScale = this.root.state.options.times.timeZoom
    this.localHeight = this.root.state.options.row.height
    this.localBefore = this.root.state.options.scope.before
    this.localPercent = this.root.state.options.taskList.percent
    this.sliderOptions.xScale.value = this.root.state.options.times.timeZoom
    this.style = this.root.mergeDeep({}, defaultStyle, this.dynamicStyle)
    this.opts = this.root.mergeDeep({}, defaultOptions, this.options)
  },
  methods: {
    getImage() {
      this.root.getImage('image/png').then(imgB64 => {
        const link = document.createElement('a')
        link.href = imgB64
        link.download = 'gantt-elastic.png'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    recenterPosition() {
      this.root.$emit('recenterPosition')
    },
    setScale(value) {
      if (this.scaleTimeoutId !== null) {
        clearTimeout(this.scaleTimeoutId)
        this.scaleTimeoutId = null
      }
      // debouncing
      if (this.firstScale) {
        this.scaleTimeoutId = setTimeout(() => {
          this.root.$emit('times-timeZoom-change', value)
          this.scaleTimeoutId = null
        }, 50)
      } else {
        this.root.$emit('times-timeZoom-change', value)
        this.firstScale = true
      }
    }
  }
}
</script>
