<template>
    <div>
        <el-card :body-style="{ padding: '5px' }" style="margin-bottom:5px">
            <header-box :search="search" @searchClick='getData' @resetClick='resetClick' />
        </el-card>
        <el-card :body-style="{ padding: '5px' }" style="height:calc(100vh - 205px)">
            <el-col :span="24">
                <el-table v-loading.fullscreen.lock="loading"
                    :element-loading-text="loadingText"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.1)" border :data="tableData" @row-click="handleClickTableRow" max-height="500px" tooltip-effect="dark">
                    <el-table-column prop="archiveNo" label="档号" align="left">
                    </el-table-column>
                    <el-table-column prop="archiveNum" label="数量" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="boxPosition" label="位置" align="center" width="250">
                    </el-table-column>
                    <el-table-column prop="caseNo" label="盒号" align="center">
                    </el-table-column>
                    <el-table-column prop="filingYear" label="归档年度" align="center">
                    </el-table-column>
                    <el-table-column prop="maintitle" label="题名" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="retention" label="保管期限" align="center">
                    </el-table-column>
                    <el-table-column prop="state" label="状态" align="center" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.state==1?'success':'warning'">{{scope.row.state==1?'已入库':'未入库'}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="160">
                        <template slot-scope="scope">
                            <template v-if="!scope.row.flag">
                                <el-button type="success" size="mini" @click="handleClickOpen(scope.row)">开架</el-button>
                                <!-- <el-button type="primary" size="mini" @click="handleClickClose(scope.row)">关架</el-button> -->
                            </template>
                            <template v-else>
                                <el-button type="warning" size="mini" @click="handleClickClose(scope.row)">关架</el-button>
                            </template>
                            <!-- <el-button type="primary" size="mini" @click="handleClickDetail(scope.row)">详情</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                 <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                    layout="total, prev, pager, next, sizes" :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 50]"
                    :current-page="pagination.pageNum" :total="pagination.total">
                </el-pagination>
            </el-col>
            <!-- <el-col :span="14">
                <div class="top-button">
                    <ul class="mjj-ul">
                        <li :class="activeBtn==index?'active':''" v-for="(item,index) in treeArr" :key="index+'_btn'" @click="handleClickBtn(item)">{{item.name}}</li>
                    </ul>
                    <div class="mjj-content" :style="currentBoxArr.length==12?`{width:415px}`:currentBoxArr.length==13?`width:450px`:`width:485px`">
                        <div class="mjj-item" :style="{left:item.left+'px'}" :class="item.isHigh==true?'active-color':''" v-for="(item,index) in currentBoxArr" :key="index+'_box'">
                            <div class="box">
                                <div class="item-label">{{item.name}}</div>
                                <div class="item-box"></div>
                                <div class="item-icon-box">
                                    <div class="item-icon" v-if="item.direction=='left' || item.direction=='right'"><i :class="item.status=='left'?'icon-left':'icon-right'"></i></div>
                                </div>
                                <div class="item-icon2"><i v-if="item.isShowPause" class="icon-pause"></i></div>
                                <div class="item-icon3"><i class="icon-control"></i></div>
                            </div>
                        </div>
                    </div>
                    <div style="text-align:center;">九州通虚拟库房</div>
                </div>
            </el-col> -->
        </el-card>
        <!-- 查看详情 -->
        <detail-view :visible="isShowDetail" :rowObject="currentTableRowObject" @cancel="cancel"></detail-view>
    </div>
</template>
<script>
import {mixin} from "@/mixins/imgSave";
import headerBox from "./components/header.vue"
import {selectFilePosition,openShelving,offShelving} from "@/api/intelligent-warehouse/warehouse-virtual.js";
import { message,clearObjValue} from '@/utils/common';
import detailView from "./components/detail.vue";
import { antiShake } from "@/utils/antiShake.js"; // 防抖
  export default {
    mixins: [mixin],
    data() {
      return {
        loading:false, // 
        loadingText:'加载中',
        currentTableRowObject:{}, // 当前行数据
        isShowDetail:false,
        tableData:[], // table数据
        store: false,
        search:{
            archiveNo:'', // 档号
            caseNo:'', // 盒号
            filingYear:'', // 归档年度
            maintitle:'', // 题名
            retention:'', //保管期限
        }, // 查询条件
        treeArr:[
            {id:0,name:'湖北档案室(1)',num:12,index_num:1},
            {id:1,name:'湖北档案室(2)',num:13,index_num:2},
            {id:2,name:'湖北档案室(3)',num:14,index_num:3},
            {id:3,name:'湖北档案室(4)',num:14,index_num:4}],
        activeBtn:0, // 当前按钮索引
        currentBoxNum:12, // 对应当前按钮索引数量
        currentBoxArr:[], // 当前对应的盒子对象
        currentSearchParams:{},
        moveArr:[], // 移动元素的对象
        targetPosition:30, // 目标位置
        moveDistance:10, // 移动距离
        setIntervalElement:null, // 定时器
        currentFlag:0, // 0表示点击开架，1表示关架
        aa:null,
        pagination:{
            pageSize: 10,
            pageNum: 1,
            total:0
        }
      }
    },
    components: {
      headerBox,
      detailView
    },
    methods: {
        handleClickDetail(row){
            this.isShowDetail = true;
            this.currentTableRowObject = row;
        },
        handleSelectionChange(val) {
        },
        handleCurrentChange(val) {
            this.pagination.pageNum = val;
            this.getData(this.search)
        },
        handleSizeChange(val) {
            this.pagination.pageSize = val;
            this.pagination.pageNum = 1;
            this.getData(this.search)
        },
        // 点击按钮
        handleClickBtn(item){
            this.currentBoxArr = [];
            this.activeBtn = item.id;
            this.currentBoxNum = item.num;
            // 生成盒子数量;
            this.combinationBox(this.currentBoxNum);
        },
        // 生成box
        combinationBox(num){
            let arr = [];
            for(let i=0;i<num;i++){
                let obj = {}; 
                if(i==0){
                    obj = {
                        id:0,
                        name:1,
                        direction:'none', // none,left,right
                        isShowPause:true, // true表示展示，false表示不展示
                        isHigh:false, // 是否高亮
                        left:0
                    }
                }else{
                    obj = {
                        id:i,
                        name:i+1,
                        direction:'none', // none,left,right
                        isShowPause:true, // true表示展示，false表示不展示
                        isHigh:false, // 是否高亮
                        left:(i*30)+ (i*5)
                    }
                }
                
                arr.push(obj);
            }
            this.currentBoxArr = arr;
        },
        // 点击查询按钮
        getData(params){
            selectFilePosition({...params,page:this.pagination.pageNum,limit:this.pagination.pageSize}).then((res)=>{
                let result = res.body.data;
                this.tableData = result;
                this.pagination.total = res.body.total;
            }).catch((error)=>{
                message('warning',error,'2500');
            })
        },
        // table行点击事件
        handleClickTableRow(row){
            // 拿到档案室的区号
            let _nameNum = this.searchName2(row.boxPosition);
            // 拿到列的数字
            let _columnNum = this.searchName(row.boxPosition,"列");
            this.treeArr.find((item)=>{
                if(item.index_num == _nameNum){
                    this.handleClickBtn(item);
                }
            })
            // 高亮列
            this.currentBoxArr.find((item)=>{
                if(item.name == _columnNum){
                    item.isHigh = true;
                }
            })
        },
        // 找到文字中前面的数字
        searchName(strValue,findStr){
            let retValue = null;
            const regex =new RegExp("\\d+(?=" + findStr + ")");  // 正则表达式：匹配区前面的数字
            const matchResult = strValue.match(regex);
            if (matchResult) {
                retValue = matchResult[0];
                console.log(retValue);  // 输出：1
            } else {
                console.log('未找到匹配的数字');
            }
            return retValue;
        },
        // 找到括号中的数字
        searchName2(strValue){
            let retValue = null;
            const regex =/\((\d+)\)/;  // 正则表达式：匹配区前面的数字
            const matchResult = strValue.match(regex);
            if (matchResult) {
                retValue = matchResult[1];
                console.log(retValue);  // 输出：1
            } else {
                console.log('未找到匹配的数字');
            }
            return retValue;
        },
        // 查找包含的文字
        searchName3(strValue){
            let _retuValue = null; // 返回找到的只
            const leftText = '左面';
            const rightText = '右面';
            const containsLeft = strValue.includes(leftText);
            const containsRight = strValue.includes(rightText);
            if (containsLeft) {
                _retuValue = 0;
            } else {
                console.log('字符串中不包含左面或右面文字');
            }

            if (containsRight) {
                _retuValue = 1;
            } else {
                console.log('字符串中不包含左面或右面文字');
            }
            return _retuValue;
        },
        // 点击开架
        handleClickOpen:antiShake(function(row){
            this.loading = true;
            this.loadingText = '开架中...'
            this.currentFlag = 0;
            this.moveArr = [];
            // 区
            let _qu = this.searchName2(row.boxPosition);
            // 列
            let _column = this.searchName(row.boxPosition,"列");
            // 面
            let _z = this.searchName3(row.boxPosition);
            let _params = {
                q:_qu,
                l:_column,
                z:_z,
                lableId:row.labelId
            }
            
            openShelving(_params).then((res)=>{
                this.loading = false;
                message('success', res.msg, 2000);
                // 刷新数据
                this.getData(this.search);
                // this.setIntervalElement = setInterval(()=>{
                //     this.elementMove(_column,row);
                // },1000);
            }).catch((error)=>{
                this.loading = false;
                message('warning', error, 2000)
            })
        }),
        // 元素移动动画:column指定要移动的元素
        elementMove(column,row){
            // 移动的元素
            if(this.currentFlag==0 && row.flag==0){ // 点击了开架
                // 从所有元素中找到要移动的元素；
                this.moveArr = this.currentBoxArr.filter((item)=>{return Number(item.name) <= column});
                this.moveArr.forEach((box,index)=>{
                    let currentLeft = box.left;
                    let newPosition = currentLeft - this.moveDistance;
                    // 拿到原来最后一个的位置
                    let targetPosition = column*30;
                    if (targetPosition - this.moveArr[column - 1].left <=30) {
                        this.moveArr[index].left = newPosition;
                        this.currentBoxArr[index].left = newPosition;                        
                    } else {
                        clearInterval(this.setIntervalElement);
                        this.setIntervalElement = null
                    }
                })
            }else if(this.currentFlag == 1 && row.flag==0){ // 点击了关架
                this.moveArr = this.currentBoxArr.filter((item)=>{return Number(item.name) <= column});
                this.moveArr.forEach((box,index)=>{
                    let currentLeft = box.left;
                    let newPosition = currentLeft + this.moveDistance;
                    if (this.currentBoxArr[column+1] - this.moveArr[column - 1] >=20) {
                        this.moveArr[index].left = newPosition;
                    } else {
                        clearInterval(this.setIntervalElement);
                        this.setIntervalElement = null;
                    }
                })
            }
            
        },
        cancel(){
            this.isShowDetail = false;
        },
        // 关架
        handleClickClose:antiShake(function(row){
            this.loading = true;
             this.loadingText = '关架中...'
            this.moveArr = [];
            this.currentFlag = 1;
            // 区
            let _qu = this.searchName2(row.boxPosition);
            // 列
            let _column = this.searchName(row.boxPosition,"列");
            // 面
            let _z = this.searchName3(row.boxPosition);
            let _params = {
                q:_qu,
                l:_column,
                z:_z,
                lableId:row.labelId
            }
            console.log(this.currentBoxArr);
            
            offShelving(_params).then((res)=>{
                this.loading = false;
                message('success', res.msg, 2000);
                // 刷新数据
                this.getData(this.search);
                // this.aa = setInterval(()=>{
                //     this.elementMove(_column,row);
                // },1000);
            }).catch((error)=>{
                this.loading = false;
                message('warning', error, 2000)

            })
        }),
        // 点击重置按钮
        resetClick(){
            clearObjValue(this.search);
        },
    },
    created() {
        this.combinationBox(this.currentBoxNum)
    },
    mounted(){
        //setInterval(checkPosition, 100);
    },
    beforeDestroy() {
    }
  }

</script>

<style lang="scss" scoped>
.top-button{
    .mjj-ul{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        list-style: none;
        padding: 0 20px;
        li{
            cursor: pointer;
            height: 45px;
            width: 130px;
            line-height: 45px;
            text-align: center;
            border: 1px solid #037ac4;
            border-radius: 8px;
            color: #037ac4;
            margin-right: 10px;
            background-color:#fff;
            cursor: pointer;
            font-size:14px;
        }
        .active{
            background-color:#037ac4;
            color:#fff;
            cursor: pointer;
        }
    }
    .mjj-content{
        width: 470px;
        height: 375px;
        position:relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin:20px auto;
        .mjj-item{
            width: 30px;
            border: 1px solid #ccc;
            background-color: #e1e1e1;
            height: 360px;
            padding:10px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right:10px;
            position:absolute;
            .box{
                width:100%;
                height:100%;
                display:flex;
                flex-direction: column;
                align-content: center;
                .item-label{
                    width:100%;
                    font-size:16px;
                    font-weight:600;
                    color:#000;
                    text-align:center;
                }
                .item-box{
                    width: 20px;
                    height: 12px;
                    border: 1px solid #037ac4;
                    border-radius: 5px;
                    margin:20px auto 0;
                }
                .item-icon-box{
                    width:100%;
                    height:175px;
                    .item-icon{
                        width:32px;
                        height:32px;
                        margin-top:90px;
                        .icon-left{
                            display:inline-block;
                            width:32px;
                            height:32px;
                            background:url("~@/assets/img/icon-left.png") no-repeat;
                            background-size:cover;
                            background-position: center;
                        }
                        .icon-right{
                            display:inline-block;
                            width:32px;
                            height:32px;
                            background:url("~@/assets/img/icon-right.png") no-repeat;
                            background-size:cover;
                            background-position: center;
                        }
                    }
                }
            
                .item-icon2{
                    width: 100%;
                    height: 20px;
                    background: #1890ff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top:40px;
                    .icon-pause{
                        display:inline-block;
                        width:12px;
                        height:12px;
                        background:url("~@/assets/img/icon-pause.png") no-repeat;
                        background-size:cover;
                        background-position: center;
                    }
                }
                .item-icon3{
                    width: 100%;
                    height: 30px;
                    margin-top: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    background: #1890ff;
                    .icon-control{
                        display:inline-block;
                        width:20px;
                        height:20px;
                        background:url("~@/assets/img/icon-wheel.png") no-repeat;
                        background-size:cover;
                        background-position: center;
                    }
                }
                &:last-child{
                    margin-right:0;
                }
            }
            
        }
        .active-color{
            background:#a9cdf2;
        }
        
        
    }
}
</style>
