<template>
  <div class="es-table-sizer">
    <div class="es-table-sizer-tips">
      提示：锁定的列排序无效，列的内容是数字才能合计
    </div>
    <es-data-table
      dragSort
      numbers
      form
      row-key="id"
      default-expand-all
      height="480px"
      :mode="mode"
      :data="theads"
      :thead="thead"
      :tree-props="{ children: 'childHead' }"
      @change="handleChange"
      @update-drag-sort="handleDrag"
    >
    </es-data-table>
    <div class="sizer-btn-box">
      <el-button type="primary" size="medium" @click="handleConfirm"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script type="text/babel">
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'Sizer',
  props: {
    mode: String,
    data: Array
  },
  computed: {
    theads: {
      get() {
        if (this.data && this.data.length) {
          let newData = [];
          this.getThead(this.data, newData);
          return newData;
        }
        return [];
      }
    }
  },
  data() {
    return {
      visible: false,
      thead: [
        {
          title: '名称',
          field: 'title'
        },
        {
          title: '锁定列位置',
          field: 'fixed',
          type: 'select',
          clearable: true,
          width: 160,
          data: [
            {
              value: 'left',
              name: '左'
            },
            {
              value: 'right',
              name: '右'
            }
          ]
        },
        {
          title: '列是否显示',
          field: 'hide',
          type: 'switch',
          width: 160,
          align: 'center',
          data: [
            {
              value: false,
              name: '隐藏'
            },
            {
              value: true,
              name: '显示'
            }
          ]
        },
        {
          title: '是否开启合计',
          field: 'total',
          type: 'switch',
          width: 160,
          align: 'center',
          data: [
            {
              value: false,
              name: '关闭'
            },
            {
              value: true,
              name: '开启'
            }
          ]
        }
      ],
      newThead: [],
      nid: 0
    };
  },
  mounted() {
    this.newThead = util.extend(true, [], this.data);
  },
  methods: {
    show() {
      this.visible = true;
    },
    getThead(res, data) {
      res.forEach((item, index) => {
        if (
          item.type !== 'index' &&
          item.type !== 'selection' &&
          item.type !== 'handle'
        ) {
          let { fixed, hide, childHead, children, title, ...other } = item;
          let items = {
            title: title ? title : item.label,
            fixed:
              fixed === true
                ? 'left'
                : fixed === undefined || fixed === false
                ? ''
                : fixed,
            hide: hide ? false : true,
            id: index,
            ...other
          };
          if (childHead && childHead.length) {
            let childHeads = [];
            this.getThead(childHead, childHeads);
            items.childHead = childHeads;
          }
          if (children && children.length) {
            let childHeads = [];
            this.getThead(children, childHeads);
            items.children = childHeads;
          }
          data.push(items);
        } else {
          this.nid++;
        }
      });
    },
    setThead(res, thead) {
      let { name, value, data } = res;
      for (let i in thead) {
        let item = thead[i];
        if (data.field === item.field) {
          thead[i][name] = name === 'hide' ? !value : value;
          thead[i].hide === false && delete thead[i].hide;
          break;
        } else {
          if (item.childHead && item.childHead.length) {
            this.setThead(res, item.childHead);
          }
          if (item.children && item.children.length) {
            this.setThead(res, item.children);
          }
        }
      }
    },
    handleChange(res) {
      this.setThead(res, this.newThead);
    },
    handleDrag(res, evt) {
      let { oldIndex, newIndex } = evt;
      oldIndex += this.nid;
      newIndex += this.nid;
      if (oldIndex > newIndex) {
        this.newThead.splice(newIndex, 0, this.newThead[oldIndex]);
        this.newThead.splice(oldIndex + 1, 1);
      } else {
        this.newThead.splice(newIndex + 1, 0, this.newThead[oldIndex]);
        this.newThead.splice(oldIndex, 1);
      }
    },
    handleConfirm() {
      this.visible = false;
      this.$emit('confirm', this.newThead);
    }
  }
};
</script>
