<template>
  <div class="uif-t-header-cell" :class="classes">
    <template v-if="renderType === 'selection' && column['selection']">
      <u-checkbox class="selection" :value="value" :indeterminate="indeterminate"
                  @u-change="handleSelection"></u-checkbox>
    </template>
    <span v-else-if="column.title" :title="column.title">{{column.title}}</span>
    <template v-else-if="column['headerRender']">
      <cell-render :column="column" :render="column['headerRender']"></cell-render>
    </template>
    <!-- 排序图标-->
    <template v-if="column.sortable">
      <u-icon v-if="column['_sort'] === 'desc'" class="sort-icon" active scene="action" type="sort-descending" @click="handleSort('asc')"></u-icon>
      <u-icon v-else-if="column['_sort'] === 'asc'" class="sort-icon" active scene="action" type="sort-ascending" @click="handleSort('desc')"></u-icon>
      <u-icon v-else class="sort-icon" scene="action" type="sort" @click="handleSort('desc')"></u-icon>
    </template>
  </div>
</template>

<script>
import UCheckbox from '@uif/hq/lib/components/checkbox'
import UIcon from '@uif/hq/lib/components/icon'
import {getRenderType} from '@uif/admin/lib/utils/table'
export default {
  components: {
    UIcon,
    UCheckbox
  },
  props: {
    column: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: -1
    },
    value: {
      type: Boolean,
      default: false
    },
    indeterminate: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  computed: {
    renderType () {
      return getRenderType(this.column)
    },
    classes () {
      return [
        'uif-t-cell-align-' + (this.column.align || 'left'),
        this.column.headerClasses
      ]
    }
  },
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    handleSort (type) {
      this.$emit('sort', type)
    },
    handleSelection () {
      this.$emit('selection')
    }
  }
}
</script>
