<template>
    <div >
        <a-table
            style="margin-top:40px"
            :columns="columns"
            :row-key="record => record.id"
            :data-source="data"
            :pagination="pagination"
            @change="getStockPageInfo"
            >
           <span slot="type" slot-scope="record">
               {{ statusMap[record.type] }}
          </span>
          <span slot="pic" slot-scope="text" style="width:auto">

            <template>
                <span style="height:100%;">
                    <happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
                        <viewer><img class="historyImg" :src="imgUrl+text.pic"/></viewer>
                    </happy-scroll>
                </span>
                
            </template>

          </span> 
        </a-table>
    </div>
</template>
<script>
import {imgUrl} from "@/api/importExcel";
const columns=[
    {
        title:'随行工单号',
        dataIndex: 'orderNum'
    },
    {
        title:'货架号',
        dataIndex: 'shelveId'
    },
    {
        title:'行',
        dataIndex: 'row'
    },
    {
        title:'列',
        dataIndex: 'column'
    },
    {
        title:'类型',
        
        scopedSlots: {customRender: 'type'},
    },
    {
        title:'图片',
        scopedSlots: {customRender: 'pic'},
    },
    {
        title:'时间',
        dataIndex: 'createTime'
    },
]
export default {
    data() {
        return {
            pageNum:1,
            pageSize:10,
            data: [],
            pagination:{
                total:0,
                defaultPageSize:10, // 默认每页显示数量
                showTotal: total => `共 ${total} 条数据`, // 显示总数
                showSizeChanger:true, // 显示可改变每页数量
                pageSizeOptions: ['10', '20', '30'],
                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
            },
            row: 0,
            column: 0,
            direction:0,
            side:0,
            columns,
            statusMap: {0:"未知",1:"取货到位",2:"取货完成",3:"放货到位",4:"放货完成"},
            
        }
    },
    beforeRouteLeave(to ,form, next) {
        // 修复第二次进入界面不执行created
        this.$destroy();
        // if (to.name == 'checkManage') {
        //     to.meta.isUseCache = true;    
        // }else{
        //     to.meta.isUseCache = false;
        // }   
        next();
    },
    created() {
        this.imgUrl = imgUrl
        if (this.$route.query.row && this.$route.query.column && this.$route.query.side &&  this.$route.query.direction &&  this.$route.query.streetId) {
           
            this.row = this.$route.query.row
            this.column = this.$route.query.column
            this.side = this.$route.query.side
            this.direction = this.$route.query.direction
            this.streetId = this.$route.query.streetId
        }
    },
    mounted() {
        this.getStockPageInfo()
    },
    destroyed () {
        
    },
    
    methods: {
        getStockPageInfo(pagination) {
            if(pagination){
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.pageNum = pagination.current;
                this.pageSize = pagination.pageSize;
            }
        
            this.request();
        },
        request(){
            this.$api.httpApi.getStockPage({
                data: {
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    row:this.row,
                    column:this.column,
                    side:this.side,
                    direction:this.direction,
                    streetId:this.streetId
                }
            }).then(res => {
                const pagination = { ...this.pagination };
                pagination.total = res.data.total;
                this.data = res.data.list;
                this.pagination = pagination;
            }).catch(err => {

            });
        },
       
    }
}
</script>
<style lang="scss">
    .ant-carousel .slick-slide {
        color: #000000;
    }

    .checkOperation {
            .carousel-page {
                width: 100%;
                /*border: solid 1px blue;*/
                &-title {
                    color: #009FE3;
                    font-size: 16px;
                    margin: 0;
                    padding: 15px 0 10px 25px;
                }

                &-content {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-left: 25px;

                    .img-box {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        font-size: 17px;
                        height: 400px;
                        margin-right: 10px;
                        img {
                            height: 100%
                        }

                        p {
                            height: 25px;
                        }
                        ul {
                            width: 100% / 4;
                            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: 130px;
                                    display: inline-block;
                                }
                                .img-box-value {
                                    display: inline-block;
                                    width: calc(100% - 130px);
                                    overflow: hidden;
                                    position: relative;
                                    top: 5px;
                                }
                            }
                        }
                    }
                }

                &-footer {
                    width: calc(100% - 380px);
                    .info-box {
                        color: #000000;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        p {
                            padding: 0 20px;
                            font-size: 18px;
                        }
                    }

                    .status {
                        text-align: center;
                        font-size: 21px;
                    }

                    .status-btn {
                        display: flex;
                        align-items: flex-start;
                        justify-content: flex-start;

                        .btn {
                            padding: 50px;
                            font-size: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            line-height: 0;
                            margin: 15px 45px;
                        }
                    }
                }
            }

        .bottom-btn {
            width: 100%;
            display: flex;
            align-items: right;
            justify-content: center;

            p {
                font-size: 18px;
                padding: 0;
                margin: 0;
            }

            .btn {
                margin: 25px;
            }
        }
    }
    .historyImg {
        width: 180px;
        height:auto;
    }

</style>
