<template>
  <td
    v-if="cellVisible"
    :class="tdClass"
    :colspan="colSpan"
    :rowspan="rowSpan"
    :style="tdStyle"
  >
    <x-custom-render
      v-if="column.customRender"
      :content="item.content"
      :row="originRow"
      :column="column"
      :r-index="rowIndex"
      :c-index="item.columnIndex"
      :custom-render="column.customRender"
    ></x-custom-render>
    <template v-else>
      <div v-if="isSelectionCol" class="table-cell-content icon-column">
        <x-checkbox :value="!!checkboxVal" @on-change="onCheckChange"></x-checkbox>
      </div>
      <div v-else-if="isExpandCol" class="table-cell-content icon-column" @click.stop="onExpandClick">
        <i class="expand-icon" :class="[isExpand ? 'ans-icon-arrow-down' : 'ans-icon-arrow-right']"></i>
      </div>
      <div v-else :class="cellClass">
        <template v-if="treeType">
          <i
            v-if="first"
            class="unfold-icon ans-icon-arrow-right"
            :class="{'rotate-down': unfold}"
            @click="onClickFold"
          ></i>
          <span class="tree-branch-text" @click="onClickFold">
            <x-custom-render
              v-if="column.treeText && first"
              :content="item.content"
              :row="originRow"
              :column="column"
              :r-index="rowIndex"
              :c-index="item.columnIndex"
              :custom-render="column.treeText"
            ></x-custom-render>
            <template v-else>{{ item.content }}</template>
          </span>
        </template>
        <template v-else>
          <x-custom-render
            v-if="column.treeText && first"
            :content="item.content"
            :row="originRow"
            :column="column"
            :r-index="rowIndex"
            :c-index="item.columnIndex"
            :custom-render="column.treeText"
          ></x-custom-render>
          <span v-else class="tree-branch-text">{{ item.content }}</span>
        </template>
      </div>
    </template>
  </td>
</template>

<script>
import XCustomRender from './CustomRender'
import { xCheckbox } from '../../../vue-checkbox/src'

export default {
  name: 'tableTd',
  components: { xCheckbox, XCustomRender },
  props: {
    originRow: {
      type: Object,
      default: () => {}
    },
    rowIndex: { // eslint-disable-line
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    _uniRowKey: { // eslint-disable-line
      type: String,
      default: ''
    },
    column: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    isSelectionCol() {
      return this.column.type === 'selection'
    },
    isExpandCol() {
      return this.column.type === 'expand'
    },
    cellVisible() {
      if (!this.item) return false
      return this.colSpan || this.rowSpan
    },
    tdStyle() { // eslint-disable-line
      if (this.column.hasOwnProperty('leftWidth')) {
        return {
          position: 'sticky',
          left: this.column.leftWidth + 'px'
        }
      } else if (this.column.hasOwnProperty('rightWith')) {
        return {
          position: 'sticky',
          right: this.column.rightWith + 'px'
        }
      }
    },
    tdClass() {
      const align = this.column.align || this.column.headerAlign
      return [
        'table-cell',
        `align-${align}`,
        this.column.tdClass
      ]
    },
    checkboxVal() {
      return this.table.selectedRows.includes(this._uniRowKey)
    },
    isExpand() {
      return this.table.expandRows.includes(this._uniRowKey)
    },
    unfold() {
      return this.table.unfoldedRows.includes(this._uniRowKey)
    },
    treeType() {
      return this.originRow[this.table.childrenProp] && this.originRow[this.table.childrenProp].length
    },
    cellClass() {
      return [
        'table-cell-content',
        this.first && ('row-level-' + (this.originRow._level || 1)),
        this.treeType && 'flex-wrapper ',
        this.table.treeTitle && 'ellipsis-text'
      ]
    },
    table() {
      return this.$parent.table
    },
    colSpan() {
      return this.item.spanModel.colspan
    },

    rowSpan() {
      const { maxRowSpan } = this.table

      if (maxRowSpan > 1 &&
        (this.rowIndex === this.table.rangeY.start) &&
        this.item.spanModel.rowspan === 0
      ) {
        return maxRowSpan - this.rowIndex % maxRowSpan
      }

      return this.item.spanModel.rowspan
    }
  },
  methods: {
    // 多选
    onCheckChange() {
      this.table.store.commit('onCheckStateChange', this.originRow, this._uniRowKey)
    },

    // 展开收起行
    onExpandClick() {
      this.table.store.commit('onExpandStateChange', this.originRow, this._uniRowKey)
    },

    // 树点击展开收起
    onClickFold() {
      this.table.store.commit('onFoldStateChange', this.originRow, this._uniRowKey)
    }
  }
}
</script>
