<template>
    <view class="packSingle">
        <view class="search-type row bothSide verCenter">
            <view class="left">
                <view class="title">容器：</view>
                <view class="search-bar row bothSide verCenter">
                    <view class="row verCenter">
                        <text class="iconfont icon-juxing1"></text>
                        <input class="uni-input" placeholder="请扫描或输入库位" placeholder-style="color:#919399" />
                    </view>
                    <text class="iconfont icon-a-juxing11"></text>
                </view>
            </view>
            <view class="right">
                <view class="row bothSide verCenter" style="margin-bottom: 10rpx;">
                    <view class="title" style="margin-bottom: 0;">库位：</view>
                    <view class="tip-box row verCenter">
                        <text class="iconfont icon-a-juxing4"></text>
                        <text class="t1">推荐库位：</text>
                        <text class="t2">A001 A货架01位</text>
                    </view>
                </view>
                <view class="search-bar row bothSide verCenter">
                    <view class="row verCenter">
                        <text class="iconfont icon-juxing1"></text>
                        <input class="uni-input" placeholder="请扫描或输入库位" placeholder-style="color:#919399" />
                    </view>
                    <text class="iconfont icon-a-juxing11"></text>
                </view>
            </view>
        </view>
        <view class="info-box row">
            <view class="text-item row verCenter" style="flex: 0 0 100%;">
                <text class="label">容 器：</text>
                <text class="t1">A00001</text>
            </view>
            <view class="text-item row verCenter">
                <text class="label">任 务 数：</text>
                <text class="tt">8</text>
            </view>
            <view class="text-item row verCenter">
                <text class="label">理货数量：</text>
                <text class="tt">5000</text>
            </view>
            <view class="text-item row verCenter">
                <text class="label">待上架数量：</text>
                <text class="tt">5000</text>
            </view>
        </view>
        <view class="list row bothSide">
            <view class="box box-width" v-for="(item, index) in 10" :key="index">
                <view class="check-box-icon"></view>
                <view class="text-item row verCenter">
                    <text class="label">入库批次号：</text>
                    <text class="t1">A00001</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">入仓号：</text>
                    <text class="t1">A00001</text>
                </view>
                <view class="bor row"></view>
                <view class="text-item row verCenter">
                    <text class="label">货品名称：</text>
                    <text class="tt">ASD3DAADS22</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">标准品牌：</text>
                    <text class="tt">TI</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">D / C：</text>
                    <text class="tt">22+</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">产 地：</text>
                    <text class="tt">美国</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">理货数量：</text>
                    <text class="tt" style="color: #F98119;">1000</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">待上架数量：</text>
                    <text class="tt" style="color: #F98119;">500</text>
                </view>
                <view class="text-item row verCenter">
                    <text class="label">销 售 员：</text>
                    <text class="tt">元瑾晶</text>
                </view>
                <view class="btn-box row" @click="showDrawer()"><view class="btn row rowCenter verCenter">详情</view></view>
            </view>
        </view>
        <view class="fix-btn row verCenter"><view class="btn1 row rowCenter verCenter">上 架</view></view>
        <!-- 上架记录详情弹窗 -->
        <uni-drawer ref="showRight" mode="right">
            <view class="uni-drawer-tally-receive-detail">
                <view class="title row rowCenter verCenter">
                    <text class="iconfont icon-juxing2" @click="closeDrawer()"></text>
                    <text class="text">详情</text>
                </view>
                <view class="field-item  row" style="margin-top: 39rpx;">
                    <view class="item row verCenter">
                        <text class="label">入库批次号：</text>
                        <text class="text">ASN2201010001</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">入 仓 号：</text>
                        <text class="text">A65512</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">入库单号：</text>
                        <text class="text">SF2135661465161</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">容 器：</text>
                        <text class="text">A00001</text>
                    </view>
                </view>
                <view class="bor"></view>
                <view class="item-tit">货品详情</view>
                <view class="field-item  row">
                    <view class="item row verCenter" style="flex: 0 0 100%;">
                        <text class="label">货品编码：</text>
                        <text class="tt" style="max-width: 100%;">6546546416541654665</text>
                    </view>
                    <view class="item row verCenter" style="flex: 0 0 100%;">
                        <text class="label">货品名称：</text>
                        <text class="tt" style="max-width: 100%;">ASD3DAADS22</text>
                    </view>
                    <view class="item row verCenter" style="flex: 0 0 100%;">
                        <text class="label">标准品牌：</text>
                        <text class="tt" style="max-width: 100%;">Nexperia</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">D / C：</text>
                        <text class="tt">22+</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">产 地：</text>
                        <text class="tt">美国</text>
                    </view>
                    <view class="item row verCenter" style="flex: 0 0 100%;">
                        <text class="label">货品品质：</text>
                        <text class="tt">良品</text>
                    </view>
                    <view class="item row verCenter" style="flex: 0 0 100%;margin-bottom: 17rpx;">
                        <text class="label">其他批次属性：</text>
                        <text class="tt">-</text>
                    </view>
                </view>
                <view class="bor"></view>
                <view class="field-item  row">
                    <view class="item row verCenter">
                        <text class="label">预期数量：</text>
                        <text class="tt">100000</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">单 位：</text>
                        <text class="tt">PCS</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">理货数量：</text>
                        <text class="tt" style="color: #F98119;">5000</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">待上架数：</text>
                        <text class="tt" style="color: #F98119;">1212</text>
                    </view>
                </view>
                <view class="bor"></view>
                <view class="form-input">
                    <view class="input-title"><text class="input-title-t1">上架数量：</text></view>
                    <view class="input-box"><input type="text" class="uni-input" placeholder-style="color:#919399" placeholder="请输入" /></view>
                </view>
                <view class="bor"></view>
                <view class="field-item  row">
                    <view class="item row verCenter">
                        <text class="label">销 售 员：</text>
                        <text class="tt">100000</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">采 购 员：</text>
                        <text class="tt">PCS</text>
                    </view>
                    <view class="item row verCenter" style="flex: 0 0 100%;">
                        <text class="label">客 户：</text>
                        <text class="tt">深圳市猎芯科技有限公司</text>
                    </view>
                </view>
                <view class="bor"></view>
                <view class="field-item  row">
                    <view class="item row verCenter">
                        <text class="label">上架时间：</text>
                        <text class="tt">2023-04-01 11:28:59</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">上架人：</text>
                        <text class="tt">拾贰</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">质检时间：</text>
                        <text class="tt">2023-04-01 11:28:59</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">质 检 人：</text>
                        <text class="tt">拾贰</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">理货时间：</text>
                        <text class="tt">2023-04-01 11:28:59</text>
                    </view>
                    <view class="item row verCenter">
                        <text class="label">理 货 人：</text>
                        <text class="tt">拾贰</text>
                    </view>
                </view>
                <view class="btn row verCenter bothSide"><view class="btn1 row rowCenter verCenter">提交</view></view>
            </view>
        </uni-drawer>
    </view>
</template>

<script>
import { API } from '@/util/api.js';
export default {
    data() {
        return {};
    },
    onNavigationBarButtonTap(e) {
        console.log(e);
        if (e.index == 0) {
            uni.navigateTo({
                url: '/pages/putaway/record'
            });
        }
    },
    methods: {
        showDrawer() {
            this.$refs.showRight.open();
        },
        closeDrawer() {
            this.$refs.showRight.close();
        }
    }
};
</script>

<style scoped lang="scss">
@import '@/assets/css/putaway/packSingle.scss';
</style>