<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag :title="'请选择关联的案卷'" :visible.sync="visible"
    :before-close="cancel" top="3vh">
    <div class="topBox">
      <span>案卷级档号：</span>
      <el-input style="width:300px" placeholder="请输入案卷级档号" size="mini" v-model="folderNo" clearable></el-input>
      <el-button size="mini" @click="searchfolderNo" type="primary">搜索</el-button>
    </div>
    <div v-for="(item, key) in Alltable" :key="key" class="wholeTable">
      <div v-if="Alltable.length==2 && key===0 ">
        <el-table highlight-current-row v-loading="item.tableLoading" size="small" :data="item.tableData" fit border
          ref="ajTable" max-height="71vh" :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChanges($event, item)" tooltip-effect="dark">
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>
          <el-table-column sortable v-for="(ele, index) in JSON.parse(item.tableShow)" :key="index"
            :prop="ele.columnName" :min-width="ele.width" :label="ele.columnChnName" align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="ele.columnName === 'fonds_no'">
                {{ (fondsList.filter(f => f.fondscode === scope.row[ele.columnName])[0] || {}).codeName }}
              </span>
              <span v-if="ele.columnName !== 'fonds_no'">{{ scope.row[ele.columnName] }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination @current-change="handleCurrentChange($event, item, key)"
          @size-change="handleSizeChange($event, item, key)" layout="total, prev, pager, next, sizes"
          :page-size="item.pagination.pageSize" :page-sizes="[10, 20, 50, 100, 500,1000]"
          :current-page="item.pagination.pageNum" :total="item.pagination.total">
        </el-pagination> -->
        <div style="text-align:right;color:#000;font-weight:600;padding: 10px">
          案卷数量：{{item.tableData.length}} 条
        </div>
      </div>
    </div>
    <!-- <el-table :data="tableData" tooltip-effect="dark" ref="multipleTable" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
    </el-table> -->

    <div class="footer">
      <el-button v-loading="btnLoading" @click="submit" size="mini" type="primary">确定</el-button>
      <el-button @click="cancel" size="mini" type="info">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {
    relationAnjuan
  } from "@/api/archives-management/ungroupedManagement/simplifiedPaper"
  import {
    message,
    retentionList
  } from "@/utils/common";
  export default {
    props: {
      fondsList: {
        type: Array,
        default: () => [],
      },
      visible: {
        type: Boolean,
        default: () => false,
      },
      Alltable: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        folderNo: "",
        multipleSelection: [],
        btnLoading: false
      }
    },
    methods: {
      searchfolderNo() {
        this.$emit("searchfolderNo")
      },
      submit() {
        if (this.Alltable[0].selectTable.length != 1) {
          message("warning", "请选择一条案卷", 2000)
          return
        }
        let data = {
          anjuaId: this.Alltable[0].selectTable[0].id,
          juanneiIdList: this.Alltable[1].selectTableTwo.map(ele => ele.id),
          tableNameAnjuan: this.Alltable[0].tableName,
          tableNameJuannei: this.Alltable[1].tableName,
        }
        this.btnLoading = true
        relationAnjuan(data).then(res => {
          message("success", "关联成功，请前往未入库档案查看", 3000)
        }).finally(res => {
          this.btnLoading = false
        })
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
        let data = new Date().getFullYear()
        let jsData = Number(row.filing_year) + retentionList[row.retention]
        if (retentionList[row.retention] != null) {
          if (jsData - data <= 1) {
            return 'success-row';
          }
        }
        return ''
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //表格获取每行
      handleSelectionChanges(val, item) {
        item.selectTable = JSON.parse(JSON.stringify(val));
      },
      cancel() {
        this.$emit("cancel")
      }
    }
  }

</script>
<style lang="scss" scoped>
  .topBox {
    padding-bottom: 10px;
  }

  .footer {
    text-align: center;
  }

</style>
