<template>
  <div
    class="ww-theader"
    :class="{
      fixed
    }">
    <div
      ref="tr"
      class="ww-tr"
      :style="{
        width: `${store.states.tableWidth}px`,
        height: `${store.states.theaderHeight}px`,
        transform: `translate3d(
          -${fixed ? 0 : store.states.tableBodyLeft}px,
          0,
          0
        )`
      }"
    >
      <div
        v-for="(th, index) in columns"
        :key="index"
        class="ww-th"
        :style="{
            width: `${columnsWidth[index]}px`,
            'text-align': th.headerAlign,
        }"
        :class="{
          selection: th.type === 'selection'
        }"
        :title="th.title"
        v-show="th.fixed || allShow"
      >
<!--        <el-checkbox-->
<!--          v-if="th.type === 'selection'"-->
<!--          size="mini"-->
<!--          v-model="checkedAll"-->
<!--          @change="selectAll"-->
<!--        ></el-checkbox>-->
        <el-dropdown v-if="th.type === 'selection'">
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-checkbox
                v-if="th.type === 'selection'"
                size="mini"
                v-model="checkedCurrent"
                @change="selectCurrent()"
              >全选当前页</el-checkbox>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-checkbox
                v-if="th.type === 'selection'"
                size="mini"
                v-model="checkedAll"
                @change="selectAll()"
              >全选所有页</el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <p
          class="ww-title"
          :style="{ width: `${columnsWidth[index] - (th.action ? 20 : 0)}px` }"
          :class="{ active: isActive(columnsStatusList[index]) }"
          v-else
        >
          <span v-if="!$slots[th.key]">
            <span v-if="showIcon" class="icon" :class="iconClass(th.type)"></span>
            {{ th.title }}
            <span v-if="th.required" class="required">*</span>
          </span>
          <span v-else><slot :name="th.key" :row="th"></slot></span>
        </p>
        <div
          v-if="th.type !== 'selection'"
          class="dropdown"
          :class="{active: dropdown.index === index}"
          :style="{
            top: `${(store.states.theaderHeight - 14) / 2}px`
          }"
        >
          <i v-if="th.action" @click.stop="openDropdown(index)"></i>
        </div>
        <div v-if="th.type !== 'selection'" class="handler" @mousedown="handlerDown(index)"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Checkbox,
  Dropdown,
  DropdownMenu,
  DropdownItem,
} from 'element-ui';

export default {
  components: {
    'el-checkbox': Checkbox,
    'el-dropdown': Dropdown,
    'el-dropdown-menu': DropdownMenu,
    'el-dropdown-item': DropdownItem,
  },
  props: {
    fixed: {
      type: Boolean,
      default: false,
    },
    showIcon: {
      type: Boolean,
      default: false,
    },
    allShow: Boolean,
    columnsWidth: {
      type: Array,
      default: () => ([]),
    },
    fixedCount: [String, Number],
    store: {
      required: true,
    },
  },
  data() {
    return {
      checkedCurrent: false,
      checkedAll: false,
      adjustWidthValue: 80,
      adjustWidthFlag: false,
      adjustWidthIndex: 0,
      adjustWidthType: '',
      mouseX: 0,
    };
  },
  computed: {
    columns() {
      return this.store.states.columns;
    },
    columnsStatusList() {
      return this.store.states.columnsStatusList;
    },
    dropdown() {
      return this.store.states.dropdown;
    },
    filters() {
      return this.store.states.filters;
    },
  },
  methods: {
    selectAll() {
      this.$parent.selectAll('All');
      this.$nextTick(() => {
        if (this.checkedAll === true && this.checkedCurrent === true) {
          this.$parent.selectAll('All');
          this.checkedCurrent = false;
        } else if (this.checkedAll === true) {
          this.checkedCurrent = false;
        }
      });
    },
    selectCurrent() {
      this.$parent.selectAll('Current');
      this.$nextTick(() => {
        if (this.checkedCurrent === true && this.checkedAll === true) {
          this.$parent.selectAll('Current');
          this.checkedAll = false;
        } else if (this.checkedCurrent === true) {
          this.checkedAll = false;
        }
      });
    },
    handlerDown(index) {
      this.adjustWidthFlag = true;
      this.adjustWidthIndex = index;
      this.store.states.adjustLineShow = true;
      window.addEventListener('mousemove', this.handlerMove);
      window.addEventListener('mouseup', this.handlerUp);
    },
    handlerMove(e) {
      if (this.adjustWidthFlag) {
        e = e || window.event;
        let width;
        if (this.fixedCount >= this.adjustWidthIndex + 1) {
          width = e.pageX - this.$parent.excelPos.left - this.$refs.tr.children[this.adjustWidthIndex].offsetLeft;
        } else {
          width = e.pageX + this.store.states.tableBodyLeft - this.$parent.excelPos.left - this.$refs.tr.children[this.adjustWidthIndex].offsetLeft;
        }
        if (width >= 80) {
          this.adjustWidthValue = width;
          this.store.states.adjustLineLeft = e.pageX - this.$parent.excelPos.left;
        }
      }
    },
    handlerUp() {
      this.$parent.adjustWidth(this.adjustWidthIndex, this.adjustWidthValue);
      this.adjustWidthFlag = false;
      this.store.states.adjustLineShow = false;
      window.removeEventListener('mousemove', this.handlerMove);
      window.removeEventListener('mouseup', this.handlerUp);
    },
    openDropdown(i) {
      this.store.openDropdown(i);
    },
    isActive(th) {
      if (!th) return false;
      if (this.filters.hasOwnProperty(th.key)) {
        return true;
      } if (th.sort) {
        return true;
      }
      return false;
    },
    iconClass(type) {
      let className;
      switch (type) {
        case 'number':
          className = 'number';
          break;
        case 'date':
          className = 'date';
          break;
        case 'month':
          className = 'date';
          break;
        case 'select':
          className = 'select';
          break;
        default:
          className = 'text';
      }
      return {
        [className]: true,
      };
    },
  },
};
</script>

<style lang="scss">
.ww-theader {
  position: relative;
  font-size: 12px;
  user-select: none;
  overflow: hidden;
  border-right: 1px solid #d6dfe4;
  z-index: 5;
  &.fixed {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 1px 0 8px #d3d4d6;
    z-index: 6;
  }
  .ww-tr {
    display: flex;
    background-color: #E5E9F0;
    border-bottom: 1px solid #C5CDD6;
  }
  .ww-th {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 1px solid #C5CDD6;
    border-left: 1px solid #C5CDD6;
    &.selection {
      justify-content: center;
    }
  }
  .dropdown {
    position: absolute;
    right: 10px;
    z-index: 1;
    display: flex;
    i {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: url("../assets/dropdown.png") center center no-repeat;
      cursor: pointer;
      transition: all 0.3s;
    }
    &.active {
      i {
        transform: rotateZ(180deg);
      }
    }
  }
  .handler {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -8px;
    width: 16px;
    height: 30px;
    cursor: col-resize;
    text-align: center;
  }
  .active {
    color: #2d8cf0;
  }

  .ww-title {
    height: 30px;
    line-height: 30px;
    //text-indent: 4px;
    //padding-left: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #666666;
    .required{
      color: #f5222d;
    }
  }

  .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: text-bottom;
    margin-bottom: 1px;
    &.text {
      background-image: url("../assets/text.png");
    }
    &.select {
      background-image: url("../assets/select.png");
    }
    &.date {
      background-image: url("../assets/date.png");
    }
    &.number {
      background-image: url("../assets/number.png");
    }
  }
}
</style>
