import Checkbox from "../Checkbox/Checkbox"; // eslint-disable-line
import { mixins } from "./utils";

/* eslint-disable no-underscore-dangle */
export default {
  name: "TreeTable__header",
  mixins: [mixins],
  data() {
    return {};
  },
  computed: {
    table() {
      return this.$parent;
    }
  },
  methods: {
    toggleAllChecked(checked) {
      this.table.bodyData = this.table.bodyData.map(row => ({
        ...row,
        _isChecked: checked
      }));
    }
  },
  render() {
    // className
    function getClassName(type, { headerAlign, key }) {
      const certainType = this.validateType(
        type,
        ["cell", "inner"],
        "getClassName"
      );
      const classList = [];
      if (key == "_normalIndex") {
        classList.push(`${this.prefixCls}--center-cell`);
      }
      if (certainType.cell) {
        classList.push(`${this.prefixCls}__header-cell`);
        if (this.table.border) {
          classList.push(`${this.prefixCls}--border-cell`);
        }
        if (["center", "right"].indexOf(headerAlign) > -1) {
          classList.push(`${this.prefixCls}--${headerAlign}-cell`);
        }
      }
      if (certainType.inner) {
        classList.push(`${this.prefixCls}__cell-inner`);
        if (this.table.treeType && this.table.firstProp === key) {
          classList.push(`${this.prefixCls}--firstProp-header-inner`);
        }
      }
      return classList.join(" ");
    }

    // 根据type渲染单元格Label
    function renderLabel(column, columnIndex) {
      if (
        this.isSelectionCell(this.table, columnIndex) &&
        this.selectType === "checkbox"
      ) {
        const allCheck = this.table.bodyData.every(row => row._isChecked);
        const indeterminate =
          !allCheck && this.table.bodyData.some(row => row._isChecked);
        return (
          <Checkbox
            indeterminate={indeterminate}
            value={allCheck}
            onOn-change={checked => this.toggleAllChecked(checked)}
          ></Checkbox>
        );
      }
      return column.title ? column.title : "";
    }

    // Template
    return (
      <table
        cellspacing="0"
        cellpadding="0"
        border="0"
        class={`${this.prefixCls}__header`}
      >
        {/* <colgroup>
          {this.table.tableColumns.map(column => (
            <col
              width={column.computedWidth || column.minWidth || column.width}
            ></col>
          ))}
        </colgroup> */}
        <thead>
          <tr class={`${this.prefixCls}__header-row`}>
            {
              this.table.tableColumns.map((column, columnIndex) =>
                column.key ? (
                  <th class={getClassName.call(this, "cell", column)}>
                    <div class={getClassName.call(this, "inner", column)}>
                      {renderLabel.call(this, column, columnIndex)}
                    </div>
                  </th>
                ) : (
                  ""
                )
              )}
          </tr>
        </thead>
      </table>
    );
  }
};