<template>
  <div class="preview-table">
    <div class="top">
      <div class="left">
        <div class="title">
          <div class="left">
            <span></span>
            <span>全部字段</span>
          </div>
        </div>
        <el-table v-if="tableShow" :data="worderAll" size="mini" border ref="listPowerSupplyTab"
          @selection-change="handleSelectionChange" row-key="id" max-height="400">
          <el-table-column type="selection" :reserve-selection="true" width="55" align="center">
          </el-table-column>
          <el-table-column prop="columnChnName" label="字段名" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="right">
        <div class="title">
          <div class="left">
            <span></span>
            <span>已选字段</span>
          </div>
        </div>
        <el-table class="table-sort" row-key="id" :data="tableData" size="mini" border  max-height="400">
          <el-table-column prop="columnChnName" label="字段" align="center">
            <template slot="heard">
              <div>
                <el-tooltip class="item" effect="dark" content="表格可以拖拽" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                <span style="margin-left: 5px">字段</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="width" label="宽度" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.width" size="mini"></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="boxName" label="操作" align="center">
          </el-table-column> -->
        </el-table>
      </div>
    </div>
    <div class="bottom">
      <div class="title">
        <div class="left">
          <span></span>
          <span>预览字段</span>
        </div>
      </div>
      <el-table :data="thirdTableData" size="mini" border>
        <el-table-column v-for="(item, index) in tableData" :key="index + item.columnChnName"
          :label="item.columnChnName" :min-width="(item.width / lengthAll) * 100 + '%'">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import Sortable from "sortablejs";
  export default {
    props: {
      worderAll: Array,
      tableShow: Boolean,
    },
    data() {
      return {
        //列表总长度
        lengthAll: "",
        // 全部字段列表
        firstTableData: [],
        // 已选字段列表
        tableData: [],
        // 预览列表
        thirdTableData: [],
      };
    },
    methods: {
      //行拖拽
      rowDrop() {
        const tbody = document.querySelector(
          ".table-sort .el-table__body-wrapper tbody"
        );
        const _this = this;
        Sortable.create(tbody, {
          onEnd({
            newIndex,
            oldIndex
          }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0];
            _this.tableData.splice(newIndex, 0, currRow);
          },
        });
      },
      handleSelectionChange(val) {
        this.lengthAll = val.length * 150;
        this.tableData = [];
        this.worderAll.forEach((ele) => {
          val.forEach((item) => {
            if (ele.columnChnName === item.columnChnName) {
              let data = {
                id: item.id,
                columnChnName: item.columnChnName,
                width: item.width,
                columnName: item.columnName,
              };
              this.tableData.push(data);
            }
          });
        });
        this.rowDrop();
      },
    },
  };

</script>
<style lang="scss" scoped>
  .preview-table {
    width: 100%;
    text-align: left;
    padding: 10px;
    box-sizing: border-box;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 28px;
      margin-bottom: 5px;

      .left {
        span {
          color: #1b6ada;

          &:first-of-type {
            display: inline-block;
            width: 2px;
            height: 15px;
            background-color: #1b6ada;
            margin-right: 5px;
          }
        }
      }
    }

    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .left {
        width: 30%;
      }

      .right {
        width: 69%;
      }
    }
  }

</style>
