<template>
  <div>
    <div class="title">
      <!-- <div>{{query.postion}}</div> -->
      <el-button @click="btnClick(1)" :type="!buttonStatus?'success':'info'">左面</el-button>
      <el-button @click="btnClick(2)" :type="!buttonStatus?'info':'success' ">右面</el-button>
    </div>
    
    <div class="top">
      <div class="topOne"></div>
      <div class="topTwo"></div>
      <div class="topThree"></div>
    </div>
    <div class="centerBox">
      <div class="center">
        <div class="line" v-for="(item,index) in roomList" :key="index">
          <div class="jie" v-for="(ele,key) in item" :key="key">
            <div class="caseList" v-for="(ala,keys) in ele" :key="keys">
              <div :class="query.labelId===ala.labelId?'caseBox':''" @click="openArchivesList(ala)">
                <img :src="dangan" :alt="ala.caseNo">
                {{ele.labelId}}
                <el-tooltip effect="dark" :content="ala.labelId" placement="top-start">
                  <span> {{ala.retention}} {{ala.caseNo}}</span>
                </el-tooltip>
                <el-icon class="el-icon-circle-check iconClass " v-if="ala.borrowState===0"></el-icon>
                <el-icon class="el-icon-circle-close noiconClass " v-else></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="boxRight">
        <div class="rightOne"></div>
        <div class="rightTwo"></div>
        <div class="rightthree"></div>
      </div>
    </div>

    <el-dialog :title="'档案详情' + ' - - 盒号：' +fileData.caseNo " v-dialogDrag ref="diaFrom" :close-on-click-modal="false"
      :visible.sync="fileStatus" width="80%" top="10px" :before-close="cancels" append-to-body>
      <div v-for="(item, key) in Alltable" :key="key" class="wholeTable">
        <el-table size="mini" :data="item.tableData" fit border ref="tableForEach" v-loading="item.tableLoading"
          @row-click="editCurrentApplicationApproval($event, item, key)" :max-height="Alltable.length==1?600:250"
          tooltip-effect="dark">
          <el-table-column 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">
              {{ scope.row[ele.columnName] }}
            </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, 30, 50]" :current-page="item.pagination.pageNum"
          :total="item.pagination.total">
        </el-pagination>
      </div>
    </el-dialog>
    <loading-tem :loadingStatus='loadingStatus' />
  </div>
</template>
<script>
  import {
    mixin
  } from "@/mixins/imgSave";
  import {
    selectSectionAndLayer
  } from "@/api/intelligent-warehouse/3D-room-two"
  import {
    getTable,
    getOneTable,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    getBoxFile
  } from "@/api/intelligent-warehouse/warehouse-management/file-onShelves"
  export default {
    mixins: [mixin],
    data() {
      return {
        loadingStatus: false,
        query: {},
        buttonStatus: false, //false左  true右
        roomList: [],
        fileData: [],
        arrNo: [],
        Alltable: {},

      }
    },
    methods: {
      cancels() {
        this.fileStatus = false
      },
      //换页
      handleCurrentChange(val, item, key) {
        item.pagination.pageNum = val;
        this.getData(key)
      },
      //每页换个数
      handleSizeChange(val, item, key) {
        item.pagination.pageSize = val;
        item.pagination.pageNum = 1;
        this.getData(key)
      },
      editCurrentApplicationApproval(val, item, key) {
        this.tableOneClickRow = val
        this.$refs.tableForEach[key].clearSelection();
        this.$refs.tableForEach[key].toggleRowSelection(val);
        this.getData(key + 1, 1)
      },
      getData(key, val) {
        this.Alltable.forEach((item, index) => {
          if (key === index) {
            let params = {
              commonMap: {
                tableName: item.tableName,
              },
              conditionMap: {},
              limit: item.pagination.pageSize,
              page: item.pagination.pageNum,
            };
            if (this.Alltable.length === 2) {
              params.conditionMap.folder_no = this.arrNo.join(",")
              if (key) {
                params.conditionMap.pid = this.tableOneClickRow.id
              }
            } else {
              params.conditionMap.archive_no = this.arrNo.join(",")
            }
            item.tableLoading = true
            getOneTable(params).then((res) => {
              item.tableData = res.body.list;
              item.pagination.total = res.body.total;
              item.tableLoading = false
            }).then(res => {
              this.fileStatus = true
            });
          }
        })
      },


      openArchivesList(val) {
        this.fileData = val
        this.arrNo = []
        let params = {
          labelId: val.labelId,
        }
        getBoxFile(params).then(res => {
          res.forEach(item => {
            this.arrNo.push(item.archiveNo)
          })
        })
        let data = {
          classId: val.classId,
        }
        getTable(data).then((res) => {
            res.body.InterfaceSystem.forEach((item) => {
              this.$set(item, "tableData", []); //表格
              this.$set(item, "tableLoading", false); //表格
              this.$set(item, "pagination", {
                pageSize: 10,
                pageNum: 1,
                total: 0,
              });
            });
            this.Alltable = res.body.InterfaceSystem;
          })
          .then((res) => {
            this.getData(0)
          });

      },
      btnClick(val) {
        switch (val) {
          case 1:
            if (this.buttonStatus) {
              this.buttonStatus = false
              this.getInfo()

            }
            break;
          case 2:
            if (!this.buttonStatus) {
              this.buttonStatus = true
              this.getInfo()
            }
            break;
        }
      },
      getInfo() {
        this.loadingStatus = true
        let p1 = new Promise((resolve, reject) => {
          let data = {
            areaAndLine: this.query.postion + (this.buttonStatus ? "右面" : "左面")
          }
          selectSectionAndLayer(data).then(res => {
            resolve(res)
          }).catch(err => {
            reject(err)
          })
        })

        Promise.all([p1]).then(res => {
          this.roomList = res[0].body.list
          this.loadingStatus = false
        }).catch(err => {
          this.loadingStatus = false
        })
      },

    },
    created() {
      this.query = this.$route.query
      this.buttonStatus = this.$route.query.side === "false" ? false : true
      this.getInfo()
    }
  }

</script>
<style lang="scss" scoped>
  .title {
    padding: 10px;
    letter-spacing: 10px;
    text-align: center;
    font-size: 28px;
  }

  .top {
    height: 25px;
    width: 80%;
    margin: 0 auto;
    display: flex;

    .topOne {
      width: 0px;
      height: 0px;
      border-left: 12.5px solid transparent;
      border-right: 12.5px solid rgb(194, 197, 197);
      border-top: 12.5px solid transparent;
      border-bottom: 12.5px solid rgb(194, 197, 197);
    }

    .topTwo {
      // box-shadow: 25px -3px 7px rgb(194, 197, 197);
      background: rgb(194, 197, 197);
      width: 100%;
    }

    .topThree {
      width: 0px;
      height: 0px;
      border-left: 12.5px solid rgb(194, 197, 197);
      border-right: 12.5px solid transparent;
      border-top: 12.5px solid rgb(194, 197, 197);
      border-bottom: 12.5px solid transparent
    }

  }

  .centerBox {
    margin: 0 auto;
    width: 80%;
    display: flex;

    .boxRight {
      transform: translateY(-25px);
      width: 25px;

      .rightOne {
        width: 0px;
        height: 0px;
        border-left: 12.5px solid transparent;
        border-right: 12.5px solid rgb(194, 197, 197);
        border-top: 12.5px solid transparent;
        border-bottom: 12.5px solid rgb(194, 197, 197)
      }

      .rightTwo {
        height: 95.5%;
        background: rgb(194, 197, 197);
      }

      .rightthree {
        width: 0px;
        height: 0px;
        border-left: 12.5px solid rgb(194, 197, 197);
        border-right: 12.5px solid transparent;
        border-top: 12.5px solid rgb(194, 197, 197);
        border-bottom: 12.5px solid transparent
      }
    }
  }

  .center {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .line {
      width: 35%;
      border-right: 15px solid rgb(194, 197, 197);


      .jie {
        overflow-x: auto;
        display: flex;
        padding: 11px 6px;
        border-bottom: 15px solid rgb(194, 197, 197);
        height: 180px;
      }

    }

    .line:last-child {
      border-right: none;
      box-shadow: none;
    }

    .line:first-child {
      border-left: 15px solid rgb(194, 197, 197);
    }
  }

  .caseList {
    // overflow-y: auto;
    position: relative;
    padding: 0 2px;

    .caseBox {
      border: 2px solid red;
    }

    &:hover {
      cursor: pointer;
    }

    img {
      width: 35px;
      height: 140px;
    }

    span {
      letter-spacing: 2px;
      font-size: 10px;
      font-weight: 600;
      text-align: center;
      position: absolute;
      height: 23px;
      width: 100px;
      transform: rotate(90deg);
      line-height: 30px;
      left: -34px;
      top: 38%;
      z-index: 1000;
    }

    .noiconClass {
      position: absolute;
      bottom: 12px;
      left: 3px;
      color: #D60A0A;
      font-weight: 600
    }

    .iconClass {
      position: absolute;
      bottom: 25px;
      left: 6px;
      color: #5F5039;
      font-weight: 600
    }
  }

</style>
