<template>
  <el-dialog title="卷内文件调整" width="980px" top="5vh" @opened="onOpened" @closed="onClosed"
             :visible="show" @update:visible="d => $emit('update:show', d)"
             custom-class="demo-file-sort-dialog" :lock-scroll="false">
    <el-row :gutter="15">
      <el-col :md="8">
        <!-- 操作按钮 -->
        <div class="ele-table-tool-default">
          <div style="line-height: 28px;">案卷列表</div>
        </div>
        <el-table ref="docTable" :data="documents" highlight-current-row border @current-change="currentChange"
                  height="400px" class="demo-file-sort-table">
          <el-table-column prop="title" label="案卷题名" show-overflow-tooltip/>
          <el-table-column prop="piece_no" label="案卷档号" show-overflow-tooltip/>
        </el-table>
      </el-col>
      <el-col :md="8">
        <!-- 操作按钮 -->
        <div class="ele-table-tool-default ele-cell">
          <div class="ele-cell-content">卷内列表</div>
          <el-button @click="moveUp" type="primary" icon="el-icon-top" class="ele-btn-icon" size="mini">上移
          </el-button>
          <el-button @click="moveDown" type="primary" icon="el-icon-bottom" class="ele-btn-icon" size="mini">下移
          </el-button>
          <el-button @click="moveOut" type="primary" icon="el-icon-top-right" class="ele-btn-icon" size="mini">调出
          </el-button>
        </div>
        <el-table :data="list1" ref="fileTable" v-loading="loading" border height="400px"
                  @selection-change="selectionChange1">
          <el-table-column type="selection" width="45" align="center"/>
          <el-table-column prop="title" label="文件题名" show-overflow-tooltip/>
          <el-table-column prop="archive_no" label="文件档号" show-overflow-tooltip/>
        </el-table>
      </el-col>
      <el-col :md="8">
        <!-- 操作按钮 -->
        <div class="ele-table-tool-default ele-cell">
          <div class="ele-cell-content">未归档列表</div>
          <el-button @click="moveIn" type="primary" icon="el-icon-top-left" class="ele-btn-icon" size="mini">调入
          </el-button>
        </div>
        <el-table :data="list2" v-loading="loading" border height="400px" @selection-change="selectionChange2">
          <el-table-column type="selection" width="45" align="center"/>
          <el-table-column prop="title" label="文件题名" show-overflow-tooltip/>
          <el-table-column prop="archive_no" label="文件档号" show-overflow-tooltip/>
        </el-table>
      </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "FileSort",
  props: {
    show: Boolean,
    // 案卷列表
    documents: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      data: [],  // 文件列表
      active: null,  // 选中案卷的档号
      loading: true,  // 加载loading
      choose1: [],
      choose2: []
    }
  },
  computed: {
    // 选中案卷的卷内文件
    list1() {
      return this.data.filter(d => d.piece_no === this.active);
    },
    // 未归档的卷内文件
    list2() {
      return this.data.filter(d => !d.piece_no);
    }
  },
  methods: {
    /* 弹窗被打开 */
    onOpened() {
      this.query();
      if (this.documents.length) this.$refs.docTable.setCurrentRow(this.documents[0]);
    },
    /* 弹窗被关闭 */
    onClosed() {
      this.data = [];
    },
    /* 查询所选案卷的卷内文件 */
    query() {
      this.loading = true;
      this.$http.get('https://cdn.eleadmin.com/20200610/archive.json').then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.data = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    /* 案卷选中 */
    currentChange(currentRow) {
      this.active = currentRow.piece_no;
    },
    /* 上移 */
    moveUp() {
      if (!this.choose1.length) return this.$message.error('请选择一条数据');
      if (this.choose1.length > 1) return this.$message.error('只能选择一条数据');
      if (this.list1.indexOf(this.choose1[0]) === 0) return;
      let index = this.data.indexOf(this.choose1[0]);
      let old = this.data[index - 1];
      this.$set(this.data, index - 1, this.choose1[0]);
      this.$set(this.data, index, old);
      this.$nextTick(() => {
        this.$refs.fileTable.toggleRowSelection(this.data[index - 1]);
      });
    },
    /* 下移 */
    moveDown() {
      if (!this.choose1.length) return this.$message.error('请选择一条数据');
      if (this.choose1.length > 1) return this.$message.error('只能选择一条数据');
      if (this.list1.indexOf(this.choose1[0]) === this.list1.length - 1) return;
      let index = this.data.indexOf(this.choose1[0]);
      let old = this.data[index + 1];
      this.$set(this.data, index + 1, this.choose1[0]);
      this.$set(this.data, index, old);
      this.$nextTick(() => {
        this.$refs.fileTable.toggleRowSelection(this.data[index + 1]);
      });
    },
    /* 调出 */
    moveOut() {
      if (!this.choose1.length) return this.$message.error('请至少选择一条数据');
      this.choose1.forEach(d => {
        d.piece_no = '';
      });
    },
    /* 调入 */
    moveIn() {
      if (!this.choose2.length) return this.$message.error('请至少选择一条数据');
      this.choose2.forEach(d => {
        d.piece_no = this.active;
      });
    },
    /* 中间表格选中 */
    selectionChange1(selection) {
      this.choose1 = selection;
    },
    /* 右边表格选中 */
    selectionChange2(selection) {
      this.choose2 = selection;
    },
    /* 保存 */
    save() {
      let result = this.data.map(d => {
        return {archive_no: d.archive_no, piece_no: d.piece_no};
      });
      console.log(result);
      this.$emit('update:show', false);
    },
    /* 关闭弹窗 */
    close() {
      this.$emit('update:show', false);
    }
  }
}
</script>

<style>
.demo-file-sort-dialog {
  margin-bottom: 5vh;
}

.demo-file-sort-dialog .el-dialog__body {
  padding-top: 15px;
  padding-bottom: 0;
}

.demo-file-sort-dialog .el-dialog__body > .el-row > .el-col {
  margin-bottom: 15px;
}

.demo-file-sort-table .el-table__row {
  cursor: pointer;
}

.demo-file-sort-table .el-table__row > td:last-child:after {
  content: "\e6e0";
  font-family: element-icons !important;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}

.demo-file-sort-table .el-table__row > td:last-child .cell {
  padding-right: 20px;
}
</style>