<template>
    <view class="scanInventory">
        <view class="scanInven-form-item">
            <view class="box row verCenter operate">
                <text @click="exportChange()">导出</text>
                <text @click="getBoxSnAndNumAll()">箱列表</text>
            </view>
            <view class="box row verCenter">
                <view class="label">箱号</view>
                <input v-model="box_sn" @input="inputChange" placeholder-style="font-size:24rpx;" class="uni-input" placeholder="请输入箱号" />
            </view>
            <view class="box row verCenter">
                <view class="label">扫描</view>
                <input v-model="code_str" @input="scanChange" placeholder-style="font-size:24rpx;" class="uni-input" placeholder="扫描焦点" style="width: 261rpx;" />
                <view class="scan-view row rowCenter verCenter" @click="scodeChange()"><text class="iconfont icon-juxing6"></text></view>
                <view class="uni-list-cell-db">
                    <text class="iconfont icon-sanjiaoxing1"></text>
                    <picker @change="bindPickerChange" :value="index" :range="array">
                        <view class="uni-input" style="text-align: center;">{{ array[index] || '请选择扫描类型' }}</view>
                    </picker>
                </view>
            </view>
        </view>
        <view class="addRow row rowCenter verCenter" @click="addRowChange()">新增行</view>
        <view class="uni-table-box">
            <uni-table type="selection" ref="table" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
                <uni-tr>
                    <uni-th align="center">序号</uni-th>
                    <uni-th align="center">型号</uni-th>
                    <uni-th align="center">数量</uni-th>
                    <uni-th align="center">扫描时间</uni-th>
                </uni-tr>
                <uni-tr v-for="(item, index) in list" :key="index">
                    <uni-td align="center">{{ index + 1 }}</uni-td>
                    <uni-td align="center"><input class="uni-input" v-model="list[index].goods_sn" /></uni-td>
                    <uni-td align="center"><input class="uni-input" v-model="list[index].goods_num" /></uni-td>
                    <uni-td align="center">{{ item.scan_time_cn }}</uni-td>
                </uni-tr>
            </uni-table>
        </view>
        <view class="save row rowCenter verCenter" @click="submit()">关箱保存</view>
        <view class="fix-box row bothSide verCenter">
            <view>
                <text class="t1">已选择：</text>
                <text class="t2">{{ selectedIndexs.length }}</text>
            </view>
            <view class="btn row rowCenter verCenter" @click="deleteChange">删除</view>
        </view>
        <uni-popup ref="popup" type="center" background-color="#fff">
            <view class="uni-table-box pop-list" style="width: 550rpx;">
                <uni-table border stripe emptyText="暂无更多数据">
                    <uni-tr>
                        <uni-th align="center">箱号</uni-th>
                        <uni-th align="center">货品数</uni-th>
                        <uni-th align="center">保存时间</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item, index) in listPop" :key="index">
                        <uni-td align="center">{{ item.box_sn }}</uni-td>
                        <uni-td align="center">{{ item.box_sn_goods_num }}</uni-td>
                        <uni-td align="center">{{ item.scan_time_cn }}</uni-td>
                    </uni-tr>
                </uni-table>
            </view>
        </uni-popup>
    </view>
</template>

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

export default {
    data() {
        return {
            timer: null, // 延时器的名字
            box_sn: '',
            code_str: '',
            code_type: 'digikey',
            list: [],
            listPop: [],
            selectedIndexs: [],
            index: 0,
            array: ['扫描digikey', '扫描Rochester', '扫描TME', '扫描Chip1stop'],
            arrar_val: ['digikey', 'Rochester', 'TME', 'Chip1stop']
        };
    },
    methods: {
        scodeChange() {
            this.code_str = '';
            uni.scanCode({
                success: res => {
                    console.log(res);
                    if (res.errMsg == 'scanCode:ok') {
                        this.code_str = res.result;
                        if (res.result) {
                            this.identifyQrCodeNumAndSn();
                        }
                    }
                },
                fail: function(res) {
                    console.log(res);
                    uni.showToast({
                        title: '扫码失败',
                        icon: 'error'
                    });
                }
            });
        },
        getBoxSnAndNumAll() {
            this.request(API.getBoxSnAndNum, 'POST', { box_sn: '' }, true).then(res => {
                if (res.err_code === 0) {
                    this.listPop = res.data;
                    this.$refs.popup.open('center');
                } else {
                    uni.showModal({
                        title: '提示',
                        content: res.err_msg,
                        showCancel: false
                    });
                }
            });
        },
        getBoxSnAndNum() {
            this.request(API.getBoxSnAndNum, 'POST', { box_sn: this.box_sn }, true).then(res => {
                if (res.err_code === 0) {
                    this.list = res.data;
                } else {
                    uni.showModal({
                        title: '提示',
                        content: res.err_msg,
                        showCancel: false
                    });
                }
            });
        },
        identifyQrCodeNumAndSn() {
            this.request(API.identifyQrCodeNumAndSn, 'POST', { code_str: this.code_str, code_type: this.code_type }, true).then(res => {
                if (res.err_code === 0) {
                    this.list.unshift({
                        goods_num: res.data.num || '',
                        goods_sn: res.data.sn || '',
                        scan_time_cn: '',
                        wsbxnmsn_id: ''
                    });
                } else {
                    uni.showModal({
                        title: '提示',
                        content: res.err_msg,
                        showCancel: false
                    });
                }
            });
        },
        bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.target.value);
            this.index = e.target.value;
            this.code_type = this.arrar_val[e.target.value];
            if (this.code_str) {
                this.identifyQrCodeNumAndSn();
            }
        },
        selectionChange(e) {
            this.selectedIndexs = e.detail.index;
            this.selectedIndexs.sort();
        },
        scanChange(event) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                var val = event.target.value;
                if (val) {
                    this.identifyQrCodeNumAndSn();
                }
            }, 800);
        },
        inputChange(event) {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                var val = event.target.value;
                if (val) {
                    this.getBoxSnAndNum();
                }
            }, 800);
        },
        deleteChange() {
            if (this.selectedIndexs.length <= 0) {
                uni.showModal({
                    title: '提示',
                    content: '请选择要删除的数据',
                    showCancel: false
                });
                return false;
            }
            for (let i = 0; i < this.selectedIndexs.length; i++) {
                console.log(this.selectedIndexs[i]);
                this.list.splice(this.selectedIndexs[i], 1);
            }

            this.$forceUpdate();
            this.$refs.table.clearSelection();
        },
        exportChange() {
            if (!this.box_sn) {
                uni.showModal({
                    title: '提示',
                    content: '请输入箱号',
                    showCancel: false
                });
                return false;
            }
            this.request(API.getBoxSnAndNum, 'POST', { box_sn: this.box_sn, export: 1 }, true).then(res => {
                if (res.err_code === 0) {
                    uni.downloadFile({
                        url: res.data,
                        success: function(res) {
                            const filePath = res.tempFilePath;
                            uni.openDocument({
                                filePath: filePath,
                                showMenu: true,
                                success: function(res) {
                                    console.log('打开文档成功');
                                },
                                fail: function() {
                                    uni.showModal({
                                        title: '提示',
                                        content: '暂不支持该文件类型预览',
                                        showCancel: false
                                    });
                                    console.log('打开文档失败');
                                }
                            });
                        }
                    });
                } else {
                    uni.showModal({
                        title: '提示',
                        content: res.err_msg,
                        showCancel: false
                    });
                }
            });
        },
        addRowChange() {
            this.list.unshift({
                goods_num: '',
                goods_sn: '',
                scan_time_cn: '',
                wsbxnmsn_id: ''
            });
        },
        submit() {
            var self = this;
            let params = {};
            let arr = [];
            if (this.list.length <= 0) {
                uni.showModal({
                    title: '提示',
                    content: '请扫描或者添加行数据',
                    showCancel: false
                });
                return false;
            }
            if (!this.box_sn) {
                uni.showModal({
                    title: '提示',
                    content: '请输入箱号',
                    showCancel: false
                });
                return false;
            }
            for (let i = 0; i < this.list.length; i++) {
                arr.push({
                    goods_sn: this.list[i].goods_sn,
                    goods_num: this.list[i].goods_num,
                    wsbxnmsn_id: this.list[i].wsbxnmsn_id
                });
            }
            params.list = JSON.stringify(arr);
            params.box_sn = this.box_sn;
            this.request(API.submitBoxSnAndNum, 'POST', params, true).then(res => {
                if (res.err_code === 0) {
                    uni.showModal({
                        title: '提示',
                        content: '保存成功',
                        showCancel: false,
                        success: function(res) {
                            if (res.confirm) {
                                self.list = [];
                                self.box_sn = '';
                                self.code_str = '';
                            }
                        }
                    });
                } else {
                    uni.showModal({
                        title: '提示',
                        content: res.err_msg,
                        showCancel: false
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss">
@import '../../assets/css/scanInventory/index.scss';
</style>