<template>
  <div>
    <table :style="{width:width + 'px',borderBottom:fixed?'':'none'}">
      <colgroup>
        <col
          v-for="(column, index) in columns"
          :key="index"
          :width="column.width"
        >
      </colgroup>
      <thead :class="_headClass">
        <slot name="thead">
          <tr>
            <th
              v-for="(column, index) in columns"
              :key="index"
              :class="column.sorter ? _sortThClass : ''"
              @click="sortColumn(column,index)"
              :style="{width:itemWidth[index]+'px'}"
            >
              <Checkbox
                v-if="selector && index===0"
                v-model="value"
                @change="checkAll"
                :indeterminate="culIndeterminate"
              />
              <span :class="_titleClass">{{ column.title }}</span>
              <span
                :class="[ _sortClass,item === index ? _sortChangeClass : '']"
                v-if="column.sorter"
              >
                <div :class="_sortInnerClass">
                  <i :class="_sortUpClass" />
                  <i :class="_sortDownClass" />
                </div>
              </span>
            </th>
          </tr>
        </slot>
      </thead>
    </table>
  </div>
</template>

<script>
import Checkbox from '../checkbox';
const name = 'hive-table';

export default {
  components: {
    Checkbox
  },
  props: {
    /**
     * 列信息配置
     */
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 可选择
     *
     */
    selector: Array,
    /**
     * 是否为半选中
     */
    indeterminate: {
      type: Boolean,
      default: false
    },
    /**
     * 是否为全选
     */
    allValue: {
      type: Boolean,
      default: false
    },
    /**
     * 滚动条宽度
     */
    scrollWidth: Number,
    /**
     * table 宽度
     */
    width: Number,
    /**
     * 每列宽度
     */
    itemWidth: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 是否固定
     */
    fixed: Boolean
  },
  data() {
    return {
      culIndeterminate: this.indeterminate,
      // 可选择时是否全选
      value: this.allValue,
      sorter: '',
      // 当前操作排序的项
      item: -1
    };
  },
  computed: {
    _headClass() {
      return `${name}-thead`;
    },
    _titleClass() {
      return `${name}-thead-title`;
    },
    _sortThClass() {
      return `${name}-thead-th-sorter`;
    },
    _sortClass() {
      return [`${name}-thead-sorter`];
    },
    _sortChangeClass() {
      return {
        [`${name}-thead-sorter--asc`]: this.sorter === 'asc',
        [`${name}-thead-sorter--desc`]: this.sorter === 'desc'
      };
    },
    _sortInnerClass() {
      return `${name}-thead-sorter-inner`;
    },
    _sortUpClass() {
      return `${name}-thead-sorter-up`;
    },
    _sortDownClass() {
      return `${name}-thead-sorter-down`;
    }
  },
  watch: {
    indeterminate(ind) {
      this.culIndeterminate = ind;
    },
    allValue(value) {
      this.value = value;
    }
  },
  methods: {
    sortColumn(column, num) {
      if (!column.sorter) {
        return '';
      }
      if (this.item !== num) {
        this.item = num;
        this.sorter = '';
      }
      if (column.order && column.order === 'desc') {
        if (this.sorter === '') {
          this.sorter = 'desc';
        } else if (this.sorter === 'desc') {
          this.sorter = 'asc';
        } else {
          this.sorter = '';
        }
      } else {
        if (this.sorter === '') {
          this.sorter = 'asc';
        } else if (this.sorter === 'asc') {
          this.sorter = 'desc';
        } else {
          this.sorter = '';
        }
      }

      this.$emit('click', column, num, this.sorter);
    },
    checkAll(value) {
      this.culIndeterminate = false;
      this.$emit('onChange', value);
    }
  }
};
</script>
