<template>


    <div>
        <el-card>
            <el-form :model="formData" ref="dataForm">

                <el-button-group style="display: flex;margin: 0px 0 10px 80%; height: 35px">
                    <el-button
                        type="primary"
                        @click.native="finishAccept()"
                    >完成验收
                    </el-button
                    >
                    <el-button
                        type="primary"
                        @click.native="renewAccept()"
                    >重新验收
                    </el-button
                    >
                </el-button-group>

                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="ao-text">
                            <span>单据号：</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="formData.billNo" auto-complete="off"
                                  disabled
                        ></el-input>
                    </el-col>
                    <el-col :span="3">
                        <div class="ao-text">
                            <span>单据时间：</span>
                        </div>
                    </el-col>
                    <el-col :span="8">

                        <el-input v-model="formData.billdate" auto-complete="off"
                                  disabled
                        ></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 6px">
                    <el-col :span="3">
                        <div class="ao-text">
                            <span>单据类型：</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="formData.billTypeName" auto-complete="off"
                                  disabled
                        ></el-input>
                    </el-col>

                    <el-col :span="3">
                        <div class="ao-text">
                            <span>当前仓库：</span>
                        </div>
                    </el-col>

                    <el-col :span="8">
                        <el-input v-model="formData.invName" auto-complete="off"
                                  disabled
                        ></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 6px">
                    <el-col :span="3">
                        <div class="ao-text">
                            <span>往来信息：</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item class="query-form-item" prop="fromCorp"
                        >
                            <el-input v-model="formData.corpName" auto-complete="off"
                                      disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <div class="ao-text">
                            <span>当前分库：</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="invWarehouseCode">
                            <el-input v-model="formData.subInvName" auto-complete="off"
                                      disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20" style="margin-top: 12px">
                    <el-col :span="2">
                        <div class="ao-text">
                            <el-link
                                target="_blank">{{ scanText }}
                            </el-link>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item prop="code">
                            <el-input
                                id="inputer"
                                placeholder="请输入UDI码"
                                @focus="getInputFocus($event)"
                                @keypress.enter.native="enterKey($event)"
                                ref='inputRef'
                                style="ime-mode:disabled"
                                type="tel"
                                v-model="udiCode"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button
                            type="primary"
                            size="small"
                            @click.native.stop="addCode()"
                            style="height: 31px; margin-left: 20px"
                        >添加
                        </el-button
                        >
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card>
            <el-table v-loading="detailLoading"
                      :data="detailList"
                      :row-style="rowStyle"
                      style="width: 100%">
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="产品通用名" width="160" prop="productName"></el-table-column>
                <el-table-column label="包装规格" width="160" prop="spec"></el-table-column>
                <el-table-column label="批次号" width="100" prop="batchNo"></el-table-column>
                <el-table-column label="注册/备案凭证号" width="150" prop="zczbhhzbapzbh"></el-table-column>
                <el-table-column label="生产日期" width="120" prop="productDate"></el-table-column>
                <el-table-column label="失效日期" width="120" prop="expireDate"></el-table-column>
                <el-table-column label="单据数量" width="100" prop="count"></el-table-column>
                <el-table-column label="验收数量" width="100" prop="acceptCount"></el-table-column>
                <el-table-column label="价格" width="120" prop="price"></el-table-column>
                <el-table-column label="销售清单号（第二票）" width="180" prop="secSalesListNo">
                </el-table-column>
                <el-table-column label="销售发票号（第一票）" width="180" prop="firstSalesInvNo">
                </el-table-column>
                <el-table-column label="销售发票号（第二票）" width="180" prop="secSalesInvNo">
                </el-table-column>
                <el-table-column label="发票日期" width="150" prop="invoiceDate">
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="query.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </el-card>
    </div>

</template>

<script>
import A from "@/plugin/KeyScaner";
import {stockOrderDetail, updateStatus} from "@/api/warehouse/stockOrder";
import {getAcceptOrder, acceptClear, acceptAddCode} from "@/api/warehouse/acceptOrder";
import {enterCodeWeb} from "@/api/warehouse/order";


export default {
    name: "acceptOrder",
    props: {
        closeDialog: {
            type: Function,
            required: true,
        },
        orderQuery: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            formData: {},
            loading: false,
            detailLoading: false,
            udiCode: null,
            sictomText: "",
            originCode: "",
            checkSuccess: false,
            detailList: [],
            total: 0,
            query: {
                code: "",
                corpOrderId: "",
                page: 1,
                limit: 10,
            },
        }
    },

    components: {},

    methods: {

        rowStyle({row, rowIndex}) {
            let rowBackground = {};
            if (row.reCount != row.acceptCount) {
                rowBackground.color = '#f60303';
            }

            return rowBackground;
        },


        handleCurrentChange(val) {
            this.query.page = val;
            this.getCodeList();
        },


        enterKey(event) {
            this.checkSuccess = true;
            let tQuery = {
                originCode: this.originCode,
                code: this.udiCode.trim(),
            }
            enterCodeWeb(tQuery).then((response) => {
                if (response.code === 20000) {
                    this.$refs.inputRef.focus();
                    this.$refs.inputRef.select();
                    this.udiCode = response.data;
                    this.addCode();
                } else {
                    if (response.code == 502) {
                        this.checkSuccess = false;
                        this.udiCode = response.data;
                        this.originCode = this.udiCode;
                    } else if (response.code == 501) {
                        this.checkSuccess = false;
                        this.$message.error(response.message);
                    } else if (response.code == 503) {
                        this.checkSuccess = false;
                        this.udiCode = response.data;
                        this.$confirm(response.message, "提示", {
                            type: "warning",
                        })
                            .then(() => {
                                this.udiCode = response.data;
                                this.addCode();
                            })
                            .catch(() => {
                                this.udiCode = this.originCode;
                            });

                    } else if (response.code == 508) {
                        this.originCode = "";
                        this.udiCode = "01" + response.data.nameCode;
                        this.originCode = this.udiCode;
                    } else {
                        this.$alert(response.message, '提示', {
                            confirmButtonText: '确定',
                            type: 'warning',
                            closeOnClickModal: true,
                            callback: action => {
                                this.$refs.inputRef.focus();
                                this.$refs.inputRef.select();
                            }
                        });
                    }
                }
                this.loading = false;
            });
        },

        addCode() {

            if (this.$isBlank(this.udiCode)) {
                this.$message.error("UDI码不能为空！");
            }
            let postQuery = {
                billNo: this.orderQuery.billNo,
                orderDetailEntities: this.detailList,
                code: this.udiCode,
            }

            acceptAddCode(postQuery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.detailLoading = false;
                        this.detailList = response.data.orderDetailEntities || [];
                        if (response.data.finishAccept) {
                            this.$confirm("校验完成，是否立即完成验收?", "提示", {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            })
                                .then(() => {
                                    this.finishAccept();
                                })
                                .catch(() => {
                                });
                        }

                    } else {
                        this.$message.error(response.message);
                    }


                })
                .catch(() => {
                    this.detailLoading = false;
                    this.detailList = [];
                });


        },

        getInputFocus(event) {
            event.currentTarget.select();
        },

        finishAccept() {
            this.$confirm('是否确定完成验收此单据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let query = {
                    stockOrderId: this.orderQuery.billNo,
                };
                updateStatus(query)
                    .then((response) => {
                        if (response.code == 20000) {
                            this.$message.success("验收成功！");
                            this.closeDialog();
                            this.$emit('childByValue', 1)
                        } else {
                            this.$message.error(response.message);
                        }

                    })
                    .catch(() => {
                    });
            }).catch(() => {
                // this.$message.info('回退失败');
            });

        },


        renewAccept() {
            let query = {
                billNo: this.orderQuery.billNo,
            }
            acceptClear(query)
                .then((response) => {
                    this.detailLoading = false;
                    this.detailList = response.data.orderDetailEntities || [];
                })
                .catch(() => {
                    this.detailLoading = false;
                    this.detailList = [];
                });
        },


        getOrderDetail() {
            this.detailLoading = true;
            let query = {
                billNo: this.orderQuery.billNo,
            }
            getAcceptOrder(query)
                .then((response) => {
                    this.detailLoading = false;
                    this.detailList = response.data.orderDetailEntities || [];

                    if (response.data.exitAccept) {
                        this.$confirm("检测到上一次验收操作未完成, 是否继续上一次验收?", "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning",
                        })
                            .then(() => {
                            })
                            .catch(() => {
                                this.renewAccept();


                            });
                    }

                })
                .catch(() => {
                    this.detailLoading = false;
                    this.detailList = [];
                });
        }

    },


    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
        var that = this;
        var inputer = document.getElementById("inputer");
        window.sc = new A.KeyScaner(inputer);//传入要监听的DOM节点
        sc.onInput = function (text) {
            if (text.includes("delete")) {
                that.vailQuery.code = "";
                return;
            }
            if (that.sitcomScan) {
                let tempTxt = text;
                let str = tempTxt.replace(/[\r]/g, "");
                that.sictomText = that.sictomText + str;
                that.vailQuery.code = that.sictomText;
            } else {
                that.vailQuery.code = text;
            }
        };
        inputer.focus();


    },
    created() {

        this.formData = this.orderQuery;
        this.getOrderDetail()
    },


}
</script>

<style scoped>

.ao-text {
    width: 100%;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    float: right;
    text-align: right;
    margin-top: 10px;
}

#inputer {
    width: 100%;
    min-height: 30px;
    background-color: white;
    border: #d0d0d0;
    border-style: solid;
    border-width: 0.1px;
    color: #4a4a4a;

}

#inputer:focus {
    width: 100%;
    min-height: 30px;
    background-color: white;
    border: #0080FF;
    border-style: solid;
    border-width: 0.1px;
    color: #4a4a4a;

}
</style>
