<template>
    <view class="tally-fixBox">
        <view class="input-box row bothSide verCenter">
            <input class="uni-input" placeholder="输入或扫描箱号" placeholder-style="color:#000;font-weight: bold;" v-model="keyword" @input="handleInput($event)" :focus="is_focus" />
            <view class="row verCenter">
                <view class="btn row rowCenter verCenter" @click="add()">添 加</view>
            </view>
        </view>
        <view class="list" v-if="list.length > 0">
            <scroll-view scroll-y="true" class="scroll-Y">
                <view class="title">待合箱箱号：</view>
                <view class="box row bothSide verCenter" v-for="(item,index) in list" :key="index">
                    <view class="row verCenter">
                        <text class="t1">{{index + 1}}.</text>
                        <text class="t2">{{item}}</text>
                    </view>
                    <view class="tt" @click="deleteFix(index)">删除</view>
                </view>
            </scroll-view>
        </view>
        <view class="fix-btn row rowCenter verCenter" @click="fixBox()">合 箱</view>
        <!-- 关单封箱弹窗 -->
        <uni-popup ref="inputDialog" type="dialog" :mask-click="true" @maskClick="maskClick">
            <uni-popup-dialog ref="inputClose" mode="input" :title="title" value="" confirmText="确定" cancelText="取消" placeholder="请输入毛重" @close="dialogInputClose" @confirm="dialogInputConfirm" :before-close="true"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
    import { API } from '@/util/api.js';
    import debounce from 'lodash/debounce';

    export default {
        data() {
            return {
                email: uni.getStorageSync('email') || '', //操作人邮箱
                is_focus: true, //获取焦点动态化
                keyword: '',
                old_box_sn_str: '',
                list: [],
                title: '',
                box_sn: '',
                wsty_id: ''
            };
        },
        watch: {
            list(arr) {
                if (arr.length > 0) {
                    this.old_box_sn_str = arr.join(',');
                } else {
                    this.old_box_sn_str = '';
                }
            }
        },
        methods: {
            /**
             * 监听输入框
             * @param {Object} event
             */
            handleInput: debounce(function(event) {
                var inputValue = event.target.value;
                if (inputValue) {
                    // 执行添加操作
                    this.add(inputValue);
                    // 清空输入框
                    this.keyword = '';
                    // 再次获取焦点
                    this.clearInputAndFocus();
                }
            }, 800),
            /**
             * 添加
             */
            add() {
                if (!this.keyword) {
                    uni.showModal({
                        title: '',
                        content: '请先扫描箱号',
                        showCancel: false
                    });
                    return false;
                }

                if (this.keyword.indexOf('-') !== -1) { // 判断字符串中是否存在 '-'
                    this.keyword = this.keyword.split('-')[0]; // 存在则截取 '-' 前的部分
                }

                // 检查输入的箱号是否已经存在于列表中
                if (this.list.includes(this.keyword)) {
                    uni.showToast({
                        title: '箱号已存在，请勿重复添加',
                        icon: 'none'
                    });
                    // 清空输入框
                    this.keyword = '';
                    return false;
                }

                // 将输入的箱号添加到列表中
                this.list.push(this.keyword);
                // 清空输入框
                this.keyword = '';
                // 再次获取焦点
                this.clearInputAndFocus();

            },
            /**
             * 合箱
             */
            fixBox() {
                if (this.list.length == 0) {
                    uni.showModal({
                        title: '',
                        content: '请先扫描箱号',
                        showCancel: false
                    });
                    return false;
                }
                this.request(API.fixBox, 'POST', { old_box_sn_str: this.old_box_sn_str }, true).then(res => {
                    if (res.err_code === 0) {
                        uni.showToast({
                            title: '合箱成功',
                            icon: 'success',
                            duration: 2000
                        });
                        setTimeout(() => {
                            this.box_sn = res.data.box_sn;
                            this.wsty_id = res.data.wsty_id;
                            this.print();
                        }, 2000);
                    } else {
                        uni.showToast({
                            title: res.err_msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 打印箱号
             */
            print() {
                var params = {
                    type: 1,
                    email: this.email,
                    print_json: JSON.stringify([{ box_sn: this.box_sn }])
                }
                this.request(API.addSCTallyData, 'POST', params, true).then(res => {
                    if (res.code === 0) {
                        this.title = `箱号${this.box_sn}打印成功`;
                        this.$refs.inputDialog.open();
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 删除
             */
            deleteFix(index) {
                this.list.splice(index, 1);
            },
            /**
             * 再次获取焦点
             */
            clearInputAndFocus() {
                this.is_focus = false;
                setTimeout(() => {
                    this.is_focus = true;
                }, 200);
            },
            /**
             * 点击遮罩层触发
             */
            maskClick() {
                this.$refs.inputDialog.close();
            },
            /**
             * 确定
             */
            dialogInputConfirm(val) {
                if (!val) {
                    uni.showToast({
                        title: '请输入毛重',
                        icon: 'error'
                    });
                    return false;
                }
                // 判断 val 是否为数字
                if (isNaN(val)) {
                    uni.showToast({
                        title: '请输入合法数字',
                        icon: 'error'
                    });
                    return false;
                }
                this.request(API.closeBox, 'POST', { wsty_id: this.wsty_id, gross_weight: val, box_sn: this.box_sn }, true).then(res => {
                    if (res.err_code === 0) {
                        uni.showToast({
                            title: '操作成功',
                            icon: 'success',
                            duration: 2000
                        });
                        setTimeout(() => {
                            this.list = [];
                            // 再次获取焦点
                            this.clearInputAndFocus();
                        }, 2000);
                    } else {
                        uni.showToast({
                            title: res.err_msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 不需要换箱
             */
            dialogInputClose() {
                this.$refs.inputDialog.close();
            }
        }
    };
</script>

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

    ::v-deep {
        .uni-dialog-input {
            font-size: 24rpx !important;
        }

        .uni-dialog-title-text {
            padding: 10px;
            text-align: center;
            color: #404547;
            font-size: 26rpx !important;
            font-weight: bold !important;
        }

        .uni-dialog-button-group .uni-dialog-button:first-child {
            display: none;
        }
    }
</style>