<template>
  <div :class="classes">
    <template v-if="renderType === 'selection'">
      <u-checkbox v-if="column['selection']" class="selection" :value="!!data['_isChecked']"
                  @u-change="handleSelection"></u-checkbox>
      <u-icon v-if="column['operation']" class="operation" type="more-vertical" scene="action"
              title="操作" @click="handleOperation"></u-icon>
    </template>
    <template v-else-if="renderType === 'normal'">
      <span :title="renderText">{{renderText}}</span>
    </template>
    <template v-else-if="renderType === 'slot'">
      <base-slot :slot-name="column.slot" :params="{data, column, index}"></base-slot>
    </template>
    <template v-else-if="renderType === 'render'">
      <cell-render :data="data" :column="column" :index="index" :render="column.render"></cell-render>
    </template>
  </div>
</template>

<script>
import UCheckbox from '@uif/hq/lib/components/checkbox'
import UIcon from '@uif/hq/lib/components/icon'
import BaseSlot from '@uif/hq/lib/components/base-slot'
import CellRender from './cell-render'
import {getRenderType} from '@uif/admin/lib/utils/table'
import {normalizeValue, isFunction} from '@uif/hq/lib/utils/assist'
export default {
  components: {
    UCheckbox,
    UIcon,
    CellRender,
    BaseSlot
  },
  props: {
    index: {
      type: Number,
      default: -1
    },
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    column: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    renderType () {
      return getRenderType(this.column)
    },
    classes () {
      return [
        'uif-t-cell',
        'uif-t-cell-' + this.renderType,
        'uif-t-cell-align-' + (this.column.align || 'left'),
        {
          'uif-t-cell-ellipsis': !this.column.wrap,
          'uif-t-cell-wrap': this.column.wrap
        },
        normalizeValue(this.column.classes, this.data, this.index)
      ]
    },
    renderText () {
      if (this.renderType === 'normal') {
        const {key, getText} = this.column
        return isFunction(getText) ? getText(this.data) : this.data[key]
      }
      return ''
    }
  },
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    handleSelection (value) {
      this.$set(this.data, '_isChecked', value)
      this.$emit('selection', value, [this.data])
    },
    handleOperation (event) {
      this.$emit('operation', event, this.data)
    }
  }
}
</script>
