<template>
  <div>
    <table :style="{width:culDataNow.length != 0 ? width + 'px' : '100%'}">
      <colgroup>
        <col
          v-for="(column, index) in columns"
          :key="index"
          :width="column.width"
        >
      </colgroup>
      <tbody>
        <slot>
          <template v-if="culDataNow.length">
            <tr
              v-for="(row, rowIndex) in culDataNow"
              :key="rowIndex"
              @change="selectRow(rowIndex)"
              ref="tbody"
            >
              <template>
                <td
                  v-if="expand && !row[rowKey] "
                  :colspan="columns.length"
                  :class="_expandTdClass"
                >
                  <ExpandCell
                    :expand="columns[0].expand"
                    :item="culDataNow[rowIndex - 1]"
                  />
                </td>
                <td
                  v-else
                  v-for="(column, index) in columns"
                  :style="column.style"
                  :key="index"
                >
                  <Checkbox
                    v-if="selector && index===0"
                    :value="selector[index]"
                    v-model="culSelectValueList[rowIndex]"
                    @click="changeSelect"
                  />
                  <span
                    v-if="column.expand"
                    :class="_expandClass"
                    @click="expandType(columns,rowIndex)"
                  >
                    <Icon :icon="openExpand(rowIndex)" />
                  </span>
                  <RenderCell
                    v-if="column.render"
                    :render="column.render"
                    :index="rowIndex"
                    :row="row"
                  />
                  <template v-else>
                    {{ row[column.key] }}
                  </template>
                </td>
              </template>
            </tr>
          </template>
          <tr v-else>
            <td
              :colspan="columns.length"
              :class="_emptyTextClass"
            >
              {{ emptyText }}
            </td>
          </tr>
        </slot>
      </tbody>
    </table>
  </div>
</template>

<script>
import RenderCell from '../render-cell';
import ExpandCell from './expand-cell';
import Icon from '../icon';
import Checkbox from '../checkbox';

const name = 'hive-table';

export default {
  components: {
    RenderCell,
    ExpandCell,
    Icon,
    Checkbox
  },
  props: {
    /**
     * 列信息配置
     */
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 当前页数据列表
     */
    dataNow: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 可选择
     *
     */
    selector: Array,
    /**
     * 折叠展开的行
     */
    expandIndex: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 可选择时当前页状态
     */
    selectValueList: {
      type: Array,
      default() {
        return [];
      }
    },
    /**
     * 滚动条宽度
     */
    scrollWidth: Number,
    /**
     * table 宽度
     */
    width: Number,
    /**
     * 无数据提醒
     */
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    /**
     * 表格的行 key 参数名
     */
    rowKey: String
  },
  data() {
    return {
      culSelectValueList: this.selectValueList,
      // 当前选择操作的转态
      selectValue: false,
      // 当前页数据
      culDataNow: this.dataNow,
      // 是否含有折叠
      expand: false,
      culExpandIndex: this.expandIndex
    };
  },
  computed: {
    _emptyTextClass() {
      return [`${name}-empty-text`];
    },
    _expandClass() {
      return {
        [`${name}-expand`]: this.columns[0].expand
      };
    },
    _expandTdClass() {
      return `${name}-td-expand`;
    },
    _noExpandTdClass() {
      return `${name}-td-expand-no`;
    }
  },
  watch: {
    selectValueList(value) {
      this.culSelectValueList = value;
    },
    dataNow(value) {
      this.culDataNow = value;
    }
  },
  mounted() {
    for (let i = 0; i < this.columns.length; i++) {
      if (this.columns[i].expand) {
        this.expand = true;
      }
    }
  },
  methods: {
    expandType(columns, rowIndex) {
      this.culExpandIndex = [];
      for (let i = 0; i < this.culDataNow.length - 1; i++) {
        if (this.culDataNow[i + 1][this.rowKey] === undefined) {
          this.culExpandIndex.push(i);
        }
      }
      let index = this.culExpandIndex.indexOf(rowIndex);
      if (index === -1) {
        this.culExpandIndex.push(rowIndex);
        this.culDataNow.splice(rowIndex + 1, 0, {});
      } else {
        this.culExpandIndex.splice(index, 1);
        this.culDataNow.splice(rowIndex + 1, 1);
      }
      this.culExpandIndex = [];
      for (let i = 0; i < this.culDataNow.length - 1; i++) {
        if (this.culDataNow[i + 1][this.rowKey] === undefined) {
          this.culExpandIndex.push(i);
        }
      }
    },
    openExpand(index) {
      if (this.culExpandIndex.indexOf(index) === -1) {
        return 'add';
      } else {
        return 'remove';
      }
    },
    changeSelect(event) {
      this.selectValue = event.target.checked;
    },
    selectRow(index) {
      this.culSelectValueList[index] = this.selectValue;
      this.$emit('onChange', this.culSelectValueList);
    }

  }
};
</script>
