<template>
  <view class="ml-table-td" :class="{'is-border': cellBorder}" :style="{width: cellWidth, height: cellHeight}" @click="clickEvent">
    <view :class="['ml-table-cell', cellAlign ? `align-${cellAlign}` : '', getCellClass({ type: 'body', renderType: 'custom' })]">
      <slot></slot>
    </view>
  </view>
</template>

<script>
import XEUtils from 'xe-utils'

export default {
  name: 'MlTableTd',
  options: {
    virtualHost: true
  },
  props: {
    align: String,
    width: [String, Number],
    className: String
  },
  inject: {
    currVM: {
      from: '$pageVM',
      default: null
    },
    $table: {
      from: 'mlTable',
      default: null
    }
  },
  data () {
    return {
    }
  },
  computed: {
    currColumn () {
      const { $table, field } = this
      if ($table) {
        return $table.columns.find(column => column.field === field)
      }
      return null
    },
    cellBorder () {
      const $table = this.$table
      if ($table) {
        return $table.border
      }
      return false
    },
    cellAlign () {
      const $table = this.$table
      if ($table) {
        return $table.align
      }
      return this.align
    },
    cellWidth () {
      let { $table, width, currColumn } = this
      if ($table) {
        if (!width && currColumn) {
          width = currColumn.width
        }
        if (width) {
          if (isNaN(width)) {
            return width
          }
          return `${width}rpx`
        }
        return `${$table.colMinWidth}%`
      }
      return ''
    },
    cellHeight () {
      const { $table } = this
      if ($table) {
        if ($table.rowOpts.height) {
          return `${$table.rowOpts.height};`
        }
        return $table.showOverflow ? '84rpx' : ''
      }
      return ''
    }
  },
  methods: {
    getCellClass (params) {
      const { $table, currColumn } = this
      const clss = []
      const showOverflow = currColumn && XEUtils.isBoolean(currColumn.showOverflow) ? currColumn.showOverflow : ($table ? $table.showOverflow : false)
      if (showOverflow) {
        clss.push('is-ellipsis')
      }
      if ($table) {
        if ($table.cellClass) {
          if (XEUtils.isFunction($table.cellClass)) {
            clss.push($table.cellClass.call(this.currVM, { ...params }))
          } else {
            clss.push(`${$table.cellClass}`)
          }
        }
      }
      return clss.join(' ')
    },
    clickEvent () {
      const { $table } = this
      if ($table) {
        $table.$emit('cell-click', {})
      }
    }
  }
}
</script>

<style lang="scss">
.ml-table-td {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10rpx;
  text-align: center;
  color: rgba(39, 42, 48, 0.65);
  border-bottom: 1px solid rgba(126, 134, 142, 0.16);
  box-sizing: border-box;
  font-size: 24rpx;
  min-height: 84rpx;
}
.ml-table-cell {
  display: block;
  width: 100%;
  white-space: normal;
  word-break: break-all;
  &.is-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &.align-left {
    text-align: left;
  }
  &.align-center {
    text-align: center;
  }
  &.align-right {
    text-align: right;
  }
}
</style>
