<template>
    <div
      class="flex"
      :class="computedClass(data, config.class, config.type === TYPE_ENUM.TWO_LINE_TEXT)">
      <!-- TAG -->
      <onestop-tag
        v-if="config.type === TYPE_ENUM.TAG"
        :type="computedTagType(data, config)"
        :size="config.extraConfig && config.extraConfig.size"
      >
        {{data[config.prop]}}
      </onestop-tag>

      <!-- OPERATIONS config.extraConfig.actions -->
      <el-tooltip
        v-else-if="config.type === TYPE_ENUM.OPERATIONS"
        v-for="(action, index) in (config.extraConfig || {}).actions"
        class="onestop-table-column-tooltip"
        :content="action.toolTip"
        placement="top"
        :key="index"
      >
        <onestop-icon
          v-if="computedIconShow(data, action.show)"
          @click="(event) => actionClickHandler(event, data, action)"
          class="onestop-table-icon"
          :iconName="getIconName(action.type)"
        />
      </el-tooltip>

      <!-- Time: YYYY-MM-DD hh:mm:ss -->
      <template
        v-else-if="config.type === TYPE_ENUM.TIME"
      >
        {{formatDate(data[config.prop], config.extraConfig)}}
      </template>

      <!-- TEXT with two line / TEXT: default -->
      <template v-else>{{data[config.prop]}}</template>
    </div>
  </template>
</template>

<script>
import Vue from 'vue'
import { Tooltip } from 'element-ui'
import { CONFIG } from './index.js'

import 'element-ui/lib/theme-chalk/tooltip.css'

Vue.component(Tooltip.name, Tooltip)

const TYPE_ENUM = {
  TEXT: 'text',
  TAG: 'tag',
  TWO_LINE_TEXT: 'two-line-text',
  OPERATIONS: 'operation',
  TIME: 'date'
}

export default {
  name: 'OnestopTableColumn',
  components: {
  },
  data () {
    return {
      TYPE_ENUM
    }
  },
  props: {
    data: {
      type: Object,
      require: true
    },
    config: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  created () {

  },
  methods: {
    formatDate (date, config) {
      const { format = 'YYYY-MM-DD hh:mm:ss' } = config || {}

      let d = new Date(date)
      const year = d.getFullYear()
      const month = `${d.getMonth() + 1}`.padStart(2, '0')
      const day = `${d.getDate()}`.padStart(2, '0')
      const hour = `${d.getHours()}`.padStart(2, '0')
      const min = `${d.getMinutes()}`.padStart(2, '0')
      const sec = `${d.getSeconds()}`.padStart(2, '0')

      return format.replace(/YYYY/, year)
            .replace(/MM/, month)
            .replace(/DD/, day)
            .replace(/hh/, hour)
            .replace(/mm/, min)
            .replace(/ss/, sec)
    },
    actionClickHandler (event, row, config) {
      const { click } = config

      click && click(row, event)
    },
    getIconName (key) {
      return (CONFIG.find(config => config.key === key) || {}).class
    },
    computedClass (row, config, isTwoLine = false) {
      let className = isTwoLine ? 'word-ellipsis' : ''

      if (!config) return className

      try {
        for (let name in config) {
          const result = this.getKeyData(row, config[name])

          if (result) {
            className += ` ${name}`
          }
        }

        return className
      } catch (err) {
        return className
      }
    },
    computedTagType (row, config) {
      const { tagType, tagConfig } = config.extraConfig || {}

      if (tagType) return tagType

      if (!tagConfig) return ''

      try {
        for (let type in tagConfig) {
          const result = this.getKeyData(row, tagConfig[type])

          if (result) {
            return type
          }
        }

        return ''

      } catch (err) {
        return ''
      }
    },
    computedIconShow (row, config) {
      if (typeof config === 'undefined') return true

      const result = this.getKeyData(row, config)

      return result
    },
    getKeyData (row, val) {
      const curExpStr = val.replace('$.', 'row.')

      const result = eval(`${curExpStr}`)

      return result
    }
  }
}
</script>
