<template>
    <view>
        <uni-collapse>
            <uni-forms ref="form" :modelValue="formData" :rules="rules">
                <!-- <uni-collapse-item title="库存查询" :open="true"> -->
                <uni-forms-item label="物料编码" :labelWidth='90' name="materialCode">
                    <uni-easyinput suffixIcon="scan" @iconClick="scanBar" v-model="formData.materialCode"
                        @confirm="scanBarMaterialCode" type="text" />
                </uni-forms-item>
                <uni-forms-item label="物料名称" :labelWidth='90' name="materialName">
                    <uni-easyinput v-model="formData.materialName"></uni-easyinput>
                </uni-forms-item>
                <uni-forms-item label="批号" :labelWidth='90' name="batchNo">
                    <uni-easyinput v-model="formData.batchNo" type="text" />
                </uni-forms-item>
                <uni-forms-item label="库位条码" :labelWidth='90' name="storageLocationBarcode">
                    <uni-easyinput suffixIcon="scan" @iconClick="scanBarstorageLocationBarcode"
                        @confirm="splitStlBarcode" type="text" v-model="formData.storageLocationBarcode" />
                </uni-forms-item>
                <button @click="queryStockInfo" form-type="submit" type="primary"
                    style="text-align: center;font-size: 18px;width: 50%;">查询</button>
                <!-- </uni-collapse-item> -->
            </uni-forms>
            <uni-collapse-item title="库位库存明细" :open="true">
                <view v-for="(item, index) in wmsMaterialDetailList" :key="index" :disabled="item.disabled"
                    class="item">
                    <text>物料编码：{{ item.materialCode }}</text>
                    <text>批号：{{ item.batchNo }}</text>
                    <text>箱号：{{ item.lotNo }}</text>
                    <text>物料名称：{{ item.materialName }}</text>
                    <text>拼接库位：{{ item.connectBin }}</text>
                    <text>入库时间：{{ item.storageInTime }}</text>
                    <text>库存总数：{{ item.number }}</text>
                    <text>锁定数量：{{ item.lockNumber }}</text>
                    <text>可用数量：{{ item.MaterialAvailableNumber }}</text>
                </view>
            </uni-collapse-item>
        </uni-collapse>
    </view>
</template>

<script>
    import {
        listStock,
        listStockLike
    } from "@/api/wms/stock";
    import {
        listMaterial
    } from "@/api/mes/material.js";

    export default {
        data() {
            return {
                formData: {
                    storageLocationBarcode: null,
                    materialCode: null,
                    materialName: null,
                    batchNo: null,
                },
                wmsMaterialDetailList: [],
                // rules: {
                //     materialCode: {
                //         rules: [{
                //             required: true,
                //             errorMessage: '请输入物料编码!'
                //         }]
                //     },
                //     materialName: {
                //         rules: [{
                //             required: true,
                //             errorMessage: '请输入物料名称!'
                //         }]
                //     },
                // }
            };
        },

        methods: {
            // 【物料编码】的扫描按钮点击操作
            scanBar() {
                const _this = this;
                uni.scanCode({
                    scanType: ['barCode', 'qrCode'],
                    success: function(res) {
                        _this.$set(_this.formData, "materialCode", res.result);
                        _this.scanBarMaterialCode(res.result);
                    }
                });
            },
            // 输入物料编码确认后的操作
            scanBarMaterialCode(code) {
                // 查出物料编码关联的物料名称
                listMaterial({
                    materialCode: code
                }).then(res => {
                    if (res.total > 0) {
                        this.formData.materialName = res.rows[0].materialName;
                    }
                });
            },
            // 【库位条码】的扫描按钮点击操作
            scanBarstorageLocationBarcode() {
                const _this = this;
                uni.scanCode({
                    scanType: ['barCode', 'qrCode'],
                    success: function(res) {
                        _this.$set(_this.formData, "storageLocationBarcode", res.result);
                        _this.splitStlBarcode(res.result);
                    }
                });
            },
            // 分割库位条码
            splitStlBarcode(e) {
                this.formData.whCode = null;
                this.formData.areaCode = null;
                this.formData.shelvesCode = null;
                this.formData.storageLocationCode = null;
                let array = e.split('-');
                switch (array.length) {
                    case 1:
                        this.formData.whCode = array[0];
                        this.queryStockInfo();
                        break;
                    case 2:
                        this.formData.whCode = array[0];
                        this.formData.areaCode = array[1];
                        this.queryStockInfo();
                        break;
                    case 3:
                        this.formData.whCode = array[0];
                        this.formData.areaCode = array[1];
                        this.formData.shelvesCode = array[2];
                        this.queryStockInfo();
                        break;
                    case 4:
                        this.formData.whCode = array[0];
                        this.formData.areaCode = array[1];
                        this.formData.shelvesCode = array[2];
                        this.formData.storageLocationCode = array[3];
                        this.queryStockInfo();
                        break;
                    case 5:
                        this.formData.whCode = array[0];
                        this.formData.areaCode = array[1];
                        this.formData.shelvesCode = array[2];
                        this.formData.storageLocationCode = array[3] + '-' + array[4];
                        this.queryStockInfo();
                        break;
                }
            },
            queryStockInfo() {
                // 获取库位库存明细数据
                listStockLike(this.formData).then(res => {
                    for (let obj of res.rows) {
                        obj.MaterialAvailableNumber = obj.number - obj.lockNumber;
                    }
                    this.wmsMaterialDetailList = res.rows;
                }).catch(err => {
                    uni.showToast({
                        title: '请输入必填字段',
                        icon: 'none',
                    })
                    console.error('获取库存明细失败:', err);
                });
                // // 先验证表单，不知道为什么，uniapp里的验证功能没用，查不出来，自己写吧
                // this.$refs.form.validate((res) => {
                //     // 自己写个验证逻辑
                //     let required = ['materialCode', 'materialName'];
                //     for (let field of required) {
                //         if (!this.formData[field]) {
                //             uni.showToast({
                //                 title: '请输入必填字段',
                //                 icon: 'none',
                //             })
                //             return;
                //         }
                //     }

                //     console.log('表单数据信息：', res);
                // }).catch((error) => {
                //     console.error('表单验证失败:', error);
                // });
            },
        },
        onReady() {
            this.$refs.form.setRules(this.rules);
        },
    }
</script>

<style>
    .item {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f7f7f7;
        font-size: 14px;
    }

    .item text {
        display: block;
        margin: 5px 0;
    }
</style>