<template>
  <div>
    <div class="shelves">
      <div class="top">
        <div v-for="(item, index) in storeHomes" :key="index" :class="{'active': item.activeImg ? true : false}"
          @click="roomClick(item.id)">{{item.storeName}}</div>
      </div>
      <ul>
        <li>
          <div class="title">选择区</div>
          <div class="content" v-if="firstList.length > 0">
            <div class="item" v-for="(item, index) in firstList" :key="index" @click="changeQu(item.id)">
              <img :src="item.activeImg ? qu2 : qu1" alt="">
              <span>{{item.storeName}}</span>
            </div>
          </div>
        </li>
        <li>
          <div class="title">选择列</div>
          <div class="content" v-if="secondList.length > 0">
            <div class="item" v-for="(item, index) in secondList" :key="index" @click="changeLie(item.id)">
              <img :src="item.activeImg ? lie2 : lie1" alt="">
              <span>{{item.storeName}}</span>
            </div>
          </div>
        </li>
        <li>
          <div class="title">选择面</div>
          <div class="content" v-if="thirdList.length > 0">
            <div class="item" @click="changeMian(thirdList[0].id)">
              <img :src="thirdList[0].activeImg ? mian2 : mian1" alt="">
              <span>{{thirdList[0].storeName}}</span>
            </div>
            <div class="lineBox"></div>
            <div class="item" @click="changeMian(thirdList[1].id)">
              <img :src="thirdList[1].activeImg ? mian4 : mian3" alt="">
              <span>{{thirdList[1].storeName}}</span>
            </div>
          </div>
        </li>
        <li>
          <div class="title">选择节</div>
          <div class="content" v-if="fourthList.length > 0">
            <div class="item" v-for="(item, index) in fourthList" :key="index" @click="changeJie(item.id)">
              <img :src="item.activeImg ? jie2 : jie1" alt="">
              <span>{{item.storeName}}</span>
            </div>
          </div>
        </li>
        <li>
          <div class="title">选择层</div>
          <div class="content" v-if="fifthList.length > 0">
            <div class="item" v-for="(item, index) in fifthList" :key="index" @click="changeCeng(item.id)">
              <img :src="item.activeImg ? ceng2 : ceng1" alt="">
              <span>{{item.storeName}}</span>
            </div>
          </div>
        </li>
        <li>
          <div class="title">选择档案</div>
          <div class="content" v-if="sixthList.length > 0">
            <div class="item" v-for="(item, index) in sixthList" :key="index" @click="openArchivesList(item)">
              <img :src="dangan">
              <el-tooltip effect="dark" :content="item.boxPosition" placement="top-start">
                <span>{{item.caseNo}}</span>
              </el-tooltip>
              <el-icon class="el-icon-circle-check iconClass " v-if="item.borrowState===0"></el-icon>
              <el-icon class="el-icon-circle-close noiconClass " v-else></el-icon>
            </div>
          </div>
        </li>
      </ul>
      <div class="btnClass" v-if="store">
        <el-button @click="subClick" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel" size="mini" type="info">取消</el-button>
      </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="600" 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">
              <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, 30, 50]" :current-page="item.pagination.pageNum"
          :total="item.pagination.total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getBoxFile
  } from "@/api/intelligent-warehouse/warehouse-management/file-onShelves"
  import {
    selectThreeId
  } from '@/api/intelligent-warehouse/warehouse-management/fileBox-management'
  import {
    getTable,
    getOneTable,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  export default {
    props: {
      fondsList: {
        type: Array,
        default: () => [],
      },
      store: {
        type: Boolean,
        default: () => true,
      },
      shelvesStatus: {
        type: Boolean,
        default: () => false,
      },
      storeHomes: {
        type: Array,
        default: () => [],
      },
      firstList: {
        type: Array,
        default: () => [],
      },
      secondList: {
        type: Array,
        default: () => [],
      },
      thirdList: {
        type: Array,
        default: () => [],
      },
      fourthList: {
        type: Array,
        default: () => [],
      },
      fifthList: {
        type: Array,
        default: () => [],
      },
      sixthList: {
        type: Array,
        default: () => [],
      },
      multipleSelection: {
        type: Array,
        default: () => [],
      },
      addressObj: {
        type: Object,
        default: () => {},
      },
      qu1: {
        type: String,
        default: () => "",
      },
      qu2: {
        type: String,
        default: () => "",
      },
      lie1: {
        type: String,
        default: () => "",
      },
      lie2: {
        type: String,
        default: () => "",
      },
      mian1: {
        type: String,
        default: () => "",
      },
      mian2: {
        type: String,
        default: () => "",
      },
      mian3: {
        type: String,
        default: () => "",
      },
      mian4: {
        type: String,
        default: () => "",
      },
      jie1: {
        type: String,
        default: () => "",
      },
      jie2: {
        type: String,
        default: () => "",
      },
      ceng1: {
        type: String,
        default: () => "",
      },
      ceng2: {
        type: String,
        default: () => "",
      },
      dangan: {
        type: String,
        default: () => "",
      },

    },
    data() {
      return {
        fileStatus: false,
        flieList: [],
        fileData: [],
        paginationT: {
          pageSize: 10,
          pageNum: 1,
          total: 0,
        },
        Alltable: {},
        arrNo: [],
        tableOneClickRo: {},
        xmId: ""
      }
    },
    methods: {
      roomClick(id) {
        this.$emit('roomClick', id)
      },
      changeQu(id) {
        this.$emit('changeQu', id)
      },
      changeLie(id) {
        this.$emit('changeLie', id)
      },
      changeMian(id) {
        this.$emit('changeMian', id)
      },
      changeJie(id) {
        this.$emit('changeJie', id)
      },
      changeCeng(id) {
        this.$emit('changeCeng', id)
      },
      openArchivesList(val) {
        this.fileData = val
        this.arrNo = []
        let params = {
          labelId: val.labelId,
        }
        getBoxFile(params).then(res => {
          res.forEach(item => {
            // this.arrNo.push(item.archiveNo)
            this.arrNo.push(item.recId)
          })
        })

        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;
            if (this.Alltable.length === 3) {
              this.getxmId(params)
            }
          })
          .then((res) => {
            this.getData(0)
          });

      },
      getxmId(params) {
        selectThreeId(params).then(res => {
          this.xmId = res.body.id
        })
      },
      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(",")
            } */
            if (key === 0) {
              params.conditionMap.id = this.Alltable.length != 3 ? this.arrNo.join(",") : this.xmId
            }
            if (key === 1) {
              params.conditionMap.pid = this.tableOneClickRow.id
              params.conditionMap.id = this.Alltable.length === 3 ? 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
            });
          }
        })
      },
      //每页换个数
      handleSizeChange(val, item, key) {
        item.pagination.pageSize = val;
        item.pagination.pageNum = 1;
        this.getData(key)
      },
      //换页
      handleCurrentChange(val, item, key) {
        item.pagination.pageNum = val;
        this.getData(key)
      },
      cancel() {
        this.$emit('cancel')
      },
      cancels() {
        this.fileStatus = false
      },
      subClick() {
        let arr = []
        this.multipleSelection.map(item => {
          arr.push({
            ...this.addressObj,
            id: item.id
          })
        })
        this.$store.dispatch('fileOnShelves/putOnFile', arr).then(res => {
          this.cancel()
          this.$emit('getData')
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .shelves {
    width: 100%;

    overflow-y: auto;

    .top {
      width: 100%;
      margin-bottom: 10px;
      text-align: left;
      display: flex;
      flex-wrap: wrap;

      div {
        padding: 4px 10px;
        box-sizing: border-box;
        margin-left: 5px;
        border-radius: 3px;
        color: #fff;
        background-color: #909399;

        &:first-of-type {
          margin-left: 0;
        }

        &.active {
          background: #409eff;
        }

        &:hover {
          cursor: pointer;
        }
      }
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-inline-start: 0;

      li {
        text-indent: 5px;
        border: 1px solid #cfe2f3;
        height: 170px;
        max-height: 170px;
        overflow-y: auto;
        margin-top: 10px;
        border-radius: 5px;

        .title {
          letter-spacing: 1px;
          font-weight: 600;
          line-height: 20px;
          background-color: #cfe2f3;
          padding: 2px 3px;
          box-sizing: border-box;
        }

        .content {
          width: 100%;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;

          .item {
            display: flex;
            flex-direction: column;
            margin-right: 5px;

            &:hover {
              cursor: pointer;
            }
          }
        }

        &:first-of-type {
          width: 28%;
          margin-top: 0;

          img {
            width: 100px;
            height: 80px;
          }
        }

        &:nth-of-type(2) {
          width: 71%;
          margin-top: 0;

          img {
            width: 50px;
            height: 80px;
          }
        }

        &:nth-of-type(3) {
          width: 28%;

          .content {
            display: flex;
            justify-content: space-between;
          }

          .lineBox {
            border: 1px solid rgb(223, 223, 223);
          }

          img {
            width: 70px;
            height: 100px;
          }
        }

        &:nth-of-type(4) {
          width: 37%;

          img {
            width: 50px;
            height: 80px;
          }
        }

        &:nth-of-type(5) {
          width: 32%;

          img {
            width: 50px;
            height: 30px;
          }
        }

        &:nth-of-type(6) {
          width: 100%;

          .item {
            position: relative;
            margin-right: 8px;

            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: -37px;
              top: 37px;
              z-index: 1000;
            }

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

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

          .item:hover {
            position: relative;

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

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

            .iconClass {
              position: absolute;
              bottom: 10px;
              left: -2px;
              color: rgb(83, 63, 3);
              font-weight: 600
            }
          }



          img {
            width: 32px;
            height: 100px;

          }


        }
      }
    }

    .btnClass {
      text-align: center;
    }
  }

</style>
