<template>
    <div class="history">
        <div style="margin-top: 10px">
            <a-select  @change="handleChange" style="width:200px" v-model="streetId">
                <a-select-option v-for="i in streets" :key="i.name" :value="i.id">
                    {{i.name}}
                </a-select-option>
            </a-select>
        </div>
        <div style="display:flex">
            <div style="margin-left: 10px,width:100,height:200,float:left">
                <ul style="width:400,line-height:40">
                    <li>
                        <span class="img-box-title">
                            {{street.name}}-{{realCheck.direction == ''?'左右':(realCheck.direction == 1?"左":"右")}}-{{realCheck.side == ''?'深浅':(realCheck.side == 1?"浅":"深")}}-{{realCheck.row}}层-{{realCheck.column}}列
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            核对状态:{{realCheck.status == 1?"盘点正确":"盘点异常"}}
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            系统条码:{{realCheck.WMSCode}}
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            盘点结果条码:{{realCheck.checkCode}}
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            系统品规:
                        </span>
                    </li>
                    
                    <li>
                        <span class="img-box-title">
                            盘点结果品规:
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            系统数量:{{realCheck.WMSCount}}
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            盘点结果数量:{{realCheck.checkCode}}
                        </span>
                    </li>
                    <li>
                        <span class="img-box-title">
                            盘点时间:{{realCheck.time}}
                        </span>
                    </li>
                </ul>
            </div>
            <div >
                <a-row type="flex" justify="space-around"  style="height:300,margin-left:400">
                    <a-col :span="4">
                        <p>顶部图片1</p>
                        <viewer >
                            <img class="historyImg" :src="realCheck.IP"/>
                        </viewer>
                    </a-col>
                    <a-col :span="4">
                        <p>顶部图片2</p>
                        <viewer >
                            <img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
                        </viewer>
                    </a-col>
                </a-row>
                <a-row type="flex" justify="space-around" align="middle" style="height:300">
                    
                    
                    <a-col :span="4">
                        <p>侧面图片1</p>
                        <viewer >
                            <img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
                        </viewer>
                    </a-col>
                    <a-col :span="4">
                        <p>侧面图片2</p>
                        <viewer >
                            <img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
                        </viewer>
                    </a-col>
                </a-row>
                <a-row type="flex" justify="space-around" align="middle" style="height:300">
                
                    <a-col :span="4">
                        <p>侧面图片3</p>
                        <viewer >
                            <img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
                        </viewer>
                    </a-col>
                    <a-col :span="4">
                        <p>侧面图片4</p>
                        <viewer >
                            <img class="historyImg" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"/>
                        </viewer>
                    </a-col>
                </a-row>
            </div>

        </div>
        
        
    </div>
</template>
<script>

import Model from "./model.vue"
export default {
    name: "checkMonitoring",
    data() {
        return {
            queryParam: {
                orderNum: ''
            },
            street: '',
            streetId:'',
            SRMNumber:'',
            
            streets:[],
            realCheck:{
                direction:'',
                side:'',
                
                column:'',
                row:'',
                WMSCode:'',
                WMSCategory:'',
                WMSCount:'',
                checkCode:'',
                checkCategory:'',
                checkCount:'',
                topPic1:'',
                topPic2:'',
                sidePic1:'',
                sidePic2:'',
                sidePic3:'',
                sidePic4:'',
                time:'',
            }
            
        }
    },
    mounted() {
        this.request();
    },
    methods: {
        request() {
            this.$api.httpApi.getAllStreet({
            }).then(res => {
                console.log("update data")
                this.streets = res.data
                this.street = res.data[0]
                this.streetId = this.street.id
                this.SRMNumber = this.street.plcId
                this.getRealTimeCheck();
            }).catch(err => {

            });
        },
        handleChange(value) {
            
            this.street = value
            console.log("street:"+this.street);
            this.getRealTimeCheck();
            
        },
        getRealTimeCheck(){
           
            console.log("SRMNUmber:"+this.SRMNumber);
            this.$axios.get('/clientTest/realtimeCheck', {
                params: {SRMNumber:this.SRMNumber}
            }).then(res => {
                if (res.code == 200) {
                    if(res.data != null){
                        this.realCheck = res.data
                    }
                    
                    
                } else {
                    this.$message.error('获取失败');
                }
            }).catch(err => {

            })
           
        }
    },
    components: {
        Model
    }
};
</script>

<style lang="scss" scoped>
.history {
    padding: 24px;
}
.ant-drawer-content-wrapper {
    height: auto !important;
}

.ant-drawer-body {
    text-align: center;
}

.ant-advanced-search-form .ant-form-item {
    display: flex;
    width: 100%;
}

.historyImg {
    width: 900px;
    height:auto;
    margin: 5px;
}
ul {
    
    height: 100%;
    margin-bottom: 0;
    padding-inline-start: 0;
    
    li {
        background-color: #ffaf11;
       
        margin: 10px 0;
        padding: 5px;
        
        font-size: 16px;
        font-weight: 600;
        color: #494e52;
        
        .img-box-title {
            width: 230px;
            display: inline-block;
        }
        
    }
}
</style>
