<template>
    <div class="container">
        <div>
            <div style="padding-top: 15px;">批次号生成</div>
            <div class="number">{{ BatDispatchBatchNo }}</div>
            <div class="wenzi">没有进入批次的数据：</div>
            <div class="middle-box" style="">
                <van-cell v-for="(item, index) in noCodeList" :key="index" :value="item" />
                <div v-if="noCodeList.length == 0"
                    style="margin: 20px 0; color: #ccc; font-size: 14px; text-align: center;">已全部进去批次</div>
                <div>批次内包含以下快件：</div>
                <van-cell v-for="(item, index) in list" :key="index" :value="item" />
            </div>
        </div>
        <div class="bottom">
            <van-button @click="onBack" type="default">返回上一页</van-button>
            <van-button @click="newBatch" type="info">创建新批次</van-button>
            <van-button @click="backHome" type="info">返回首页</van-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'batched',
    props: ['isRemoval', 'BatDispatchBatchNo', 'codesList', 'noCodesList'],
    data() {
        return {
            noCodeList: this.noCodesList,//没有进入批次的数据
            list: this.codesList.filter(item => !this.noCodesList.includes(item))
        };
    },
    mounted() {
        console.log(this.isRemoval, '456')
        console.log(this.BatDispatchBatchNo)
    },
    methods: {
        // 返回
        onBack() {
            console.log(this.isRemoval, '456')
            // this.$router.go(-1)
            this.$emit('isRemoval', true);
        },
        // 创建新批次
        newBatch() {
            this.$router.go('Removal')
        },
        // 回首页
        backHome() {
            this.$router.push('/')
        }
    }

};
</script>

<style lang="less" scoped>
* {
    font-size: 16px;
}

.container {
    height: 100vh;
    background-color: #fff;
    padding: 0 20px;

    .number {
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .wenzi {
        margin-top: 30px;
    }

    .middle-box {
        height: 72vh;
        overflow-y: auto;

        &-little {
            width: 40%;
            margin-left: 20px;
        }
    }



}

.bottom {
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-evenly;
}
</style>
