<template>
  <div class="table-head">
    <p class="tip">
      <i class="el-icon-s-opportunity"></i>
      <span> 可拖动行排序</span>
    </p>
    <el-table
        row-key="prop"
        :data="tableShowList">
      <el-table-column prop="label" label="表头名称" align="center"></el-table-column>
      <el-table-column label="是否显示" width="120" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isShow"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="调整顺序" width="120" align="center">
        <template slot-scope="scope">
          <i class="el-icon-rank"></i>
        </template>
      </el-table-column>
      <el-table-column label="调整表头宽度">
        <template slot-scope="scope">
          <div class="flex-col">
            <div>
              <el-radio v-model="scope.row.isAuto" :label="true">自适应</el-radio>
            </div>
            <div>
              <el-radio v-model="scope.row.isAuto" :label="false">固定宽度</el-radio>
              <el-input-number v-show="!scope.row.isAuto" v-model="scope.row.width" size="mini"
                               controls-position="right" :min="100" :max="300"></el-input-number>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer tc">
      <el-button size="medium" class="btn-wh" @click="isTableHead = false">关闭</el-button>
      <el-button size="medium" class="btn-blue" type="primary" @click="saveTableHead()">保存</el-button>
    </div>
  </div>
</template>
<script>
import Sortable from 'sortablejs';

export default {
  name: "tableHead",
  props: {
    tableShowList: Array
  },
  data() {
    return {
      isTableHead: false
    };
  },
  methods: {
    rowDrop() {
      const tbody = document.querySelector('.table-head .el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        onEnd({newIndex, oldIndex}) {
          const currRow = _this.tableShowList.splice(oldIndex, 1)[0];
          _this.tableShowList.splice(newIndex, 0, currRow);
        }
      });
    },
    saveTableHead() {
      this.isTableHead = false;
      this.$emit('saveTableHead', this.tableShowList);
    },

  },
  created() {
    this.rowDrop();
  }
};
</script>

<style lang="scss" scoped>
.table-head {

  .tip {

    i {
      color: #E6A23C;
    }

    font-size: 14px;
    padding-bottom: 10px;
  }

  .el-icon-rank {
    font-size: 18px;
    margin-left: 20px;
    cursor: move;
  }

  .point {
    color: #66b1ff;

    &:hover {
      color: #1A3679;
    }
  }
}
</style>
