<template>
    <div>
        <el-card class="el-card">

            <el-form
                :inline="true"
                :model="filterQuery"
                label-width="480px"
                size="mini"
                v-if="searchVisible"
            >

                <el-row>
                    <el-form-item class="query-form-item" label-width="100px">
                        <el-input
                            id="inputer"
                            v-model="filterQuery.code"
                            placeholder="UDI码"
                            clearable
                            ref='inputRef'
                            style="width: 500px"
                            @keypress.enter.native="enterKey($event)"
                        ></el-input>
                    </el-form-item>

                </el-row>
                <el-row>
                    <el-form-item class="query-form-item">
                        <el-select
                            v-model="filterQuery.supId"
                            filterable
                            remote
                            clearable="true"
                            reserve-keyword
                            placeholder="请输入供应商名称"
                            :remote-method="findMethod"
                            size="mini"
                            style="width: 100%"
                            :loading="loading"
                        >
                            <el-option
                                v-for="item in fromOptions"
                                :key="item.name"
                                :label="item.name"
                                :value="item.erpId"
                            >
                                <span style="float: left">{{ item.name }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="display: flex">
                        <el-button type="primary" icon="search" @click="getList"
                        >查询
                        </el-button
                        >
                    </el-form-item>
                </el-row>


            </el-form>

            <el-table
                v-loading="loading"
                :data="list"
                style="width: 100%"
                @row-click="getOrderDetail"
                highlight-current-row
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="扫码单据类型" prop="action">
                    <template slot-scope="scope">
                        <span>{{ getActionName(scope.row.action) }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="订单号"
                    prop="id"
                    show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column label="来源" prop="fromType">

                    <template slot-scope="scope">
                        <span>{{ fromTypeMap[scope.row.fromType] }}</span>
                    </template>


                </el-table-column>
                <el-table-column label="往来单位" prop="fromCorp" width="250">
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    prop="actDate"
                    width="150"
                    show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span>{{ scope.row.actDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="校验状态" prop="contrastStatus" width="120">
                    <template slot-scope="scope">
                        <el-tag :type="(scope.row.contrastStatus === 1) | statusFilterType">
                            {{ erpCheckStatus[scope.row.contrastStatus] }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click.native.stop="intentDetail(scope.row)"
                        >详情
                        </el-button
                        >
                        <!--                        <el-button-->
                        <!--                            type="text"-->
                        <!--                            size="small"-->
                        <!--                            @click.native.stop="deleteDialog(scope.row.id)"-->
                        <!--                        >删除-->
                        <!--                        </el-button>-->
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                :page-size="filterQuery.limit"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :current-page="filterQuery.page"
                :total="total"
            ></el-pagination>
        </el-card>

        <el-card class="el-card" v-if="true" id="printJS-form">
            <el-table
                v-loading="loading"
                :row-class-name="tableRowClassName"
                :data="detailList"
                style="width: 100%"
            >
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column
                    label="产品通用名"
                    prop="coName"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="包装规格"
                    prop="packSpec"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="批次号"
                    prop="batchNo"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="生产日期"
                    prop="productDate"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="失效日期"
                    prop="expireDate"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="单据数量"
                    prop="erpCount"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="实际数量"
                    prop="reCount"
                    :show-overflow-tooltip="true"
                ></el-table-column>

                <el-table-column label="扫码数量" prop="count"></el-table-column>
                <el-table-column
                    label="生产企业"
                    prop="productCompany"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    label="注册/备案凭证号"
                    prop="authCode"
                    :show-overflow-tooltip="true"
                ></el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            title="单号详情"
            :visible.sync="codeDetailVisible"
            width="80%"
            append-to-body
            v-if="codeDetailVisible"
        >
            <codeDetail
                :idQuery="idQuery"
                v-on:closeDetailDialog="closeDetailDialog"
            ></codeDetail>
        </el-dialog>

    </div>
</template>

<script>
import {
    orderList,
    codeList,
    findAllByOrderId,
    updateUnit,
    filterOrder,
    deleteByOrderId,
    updateExportStatus,
    uploadOrder,
    mergeOrder,
    orderDetail,
} from "../../api/warehouse/order";
import draggable from "vuedraggable";
import {saveAs} from "file-saver";
import codeDetail from "../warehouse/code";
import store from "../../store";
import successOrderExportPDFSetting from "../warehouse/successOrderExportPDF";
import {downloadInoutOrderSuccessPDF} from "../../api/itextpdf/itextpdf";
import selectErpOrder from "../warehouse/DialogSelectErpOrder";
import {getBussinessType} from "../../api/basic/bussinessType";
import {filterOrderTrace} from "@/api/inventory/invCodeTrace";
import {getBasicUnitMaintains} from "@/api/basic/basicUnitMaintain";
import A from "@/plugin/KeyScaner";

export default {
    name: "invUdiTraceOrder",
    props: {
        isSelect: {
            type: Boolean,
            default: false,
        },
        diloadTrue: {
            type: Boolean,
            default: false,
        },
        udiCode: {
            type: Object,
            required: true,
        },
    },

    data() {
        return {
            filterQuery: {
                code: "",
                batchNo: null,
                productIdFk: null,
                customerId: null,
                page: 1,
                limit: 20,
                supId: null,
            },
            searchVisible: true,
            sitcomScan: false,
            checkStatus: {
                1: "校验异常",
                0: "未校验",
                2: "正常",
            },
            fromOptions: [],
            erpCheckStatus: {
                1: "校验异常",
                0: "未校验",
                2: "校验成功",
            },
            fromTypeMap: {
                "1": "UDIMS平台",
                "2": "网页新增",
                "3": "pda即时校验",
                "4": "pda未校验",
                "5": "pc端扫码精灵",
                "6": "缺量补录单据",
                "7": "UDI供应商平台",
                "8": "平衡补录单据",
                "10": "手动补单"
            },
            //往来单位
            list: [],
            detailList: [],

            detailQuery: {
                orderId: "",
            },
            deleteData: {
                id: "",
            },
            idQuery: {
                id: "",
            },
            curIndex: "",
            adListNoDataText: "无数据",
            codeDetailVisible: false,
            total: 0,
            loading: false,
            index: null,
            formName: null,
            orderId: "",
            formMap: {
                add: "新增",
                edit: "编辑",
            },

            uploadQuery: {
                orderId: "",
            },
            busTypes: [],
            multipleSelection: [],
            dialogTableVisible: false,
            formLoading: false,
            formVisible: false,
            deleteLoading: false,
            addDialogVisible: false,
            errDialogVisible: false,
        };
    },
    components: {
        draggable,
        codeDetail,
    },
    methods: {
        onReset() {
            this.$router.push({
                path: "",
            });
            this.filterQuery = {
                code: null,
                batchNo: null,
                productIdFk: null,
                customerId: null,
                page: 1,
                limit: 20,
                supId: null,
            };
            this.getList();
        },

        enterKey(event) {
            this.$refs.inputRef.select();
            this.onSubmit();
        },
        onSubmit() {
            this.getList();
        },
        handleSizeChange(val) {
            this.filterQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.filterQuery.page = val;
            this.getList();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        findMethod(query) {
            this.fromOptions = [];
            let cQuery = {
                key: query,
            };
            getBasicUnitMaintains(cQuery)
                .then((response) => {
                    this.loading = false;
                    this.fromOptions = response.data.page.list || [];
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //获取订单列表
        getList() {
            this.loading = true;
            this.filterQuery.customerId = store.getters.customerId;
            if (!this.$isBlank(this.filterQuery.code)) {
                let code = this.filterQuery.code;
                this.filterQuery.code = code.replace("\r", "")
            }
            filterOrderTrace(this.filterQuery)
                .then((response) => {
                    if (response.code == 20000) {
                        this.loading = false;
                        this.list = response.data.list || [];
                        this.detailList = [];
                        this.total = response.data.total || 0;
                    } else {
                        this.loading = false;
                        this.list = [];
                        this.detailList = [];
                        this.total = 0;
                        this.$message.error(response.message);
                    }


                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                    this.total = 0;
                });
        },
        //业务明细表
        getOrderDetail(row) {
            this.loading = true;
            this.detailQuery = {
                orderId: row.id,
            };
            this.refresgOrderDetail();
        },
        refresgOrderDetail() {
            orderDetail(this.detailQuery)
                .then((response) => {
                    this.loading = false;
                    this.detailList = response.data || [];
                })
                .catch(() => {
                    this.loading = false;
                    this.detailList = [];
                });
        },

        intentDetail(row) {
            // this.$router.push({
            //   path: "../inout/detail",
            //   query: { id: row.id },
            // });

            this.codeDetailVisible = true;
            this.idQuery.id = row.id;
        },
        closeDialog() {
            this.successOrderExportPDFSettingVisible = false;
            this.getList();
        },

        deleteOrders(data) {
            this.loading = true;
            this.deleteData.id = data;
            deleteByOrderId(this.deleteData)
                .then((response) => {
                    this.getList();
                    this.refresgOrderDetail();
                    this.$message({
                        type: "success",
                        message: "删除成功！",
                    });
                })
                .catch(() => {
                });
        },
        tableRowClassName({row, rowIndex}) {
            if (row.reCount === row.count) {
                return "success-row";
            } else {
                return "warning-row";
            }
        },


        uploadOrderDialog(value) {
            this.uploadQuery = {
                orderId: value.id,
            };
            uploadOrder(this.uploadQuery)
                .then((response) => {
                    if (response.code === 20000) {
                        this.$message.success(response.data);
                        this.getList();
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                });
        },

        deleteDialog(rowId) {
            this.$confirm("此操作将永久删除该订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.deleteOrders(rowId);
                })
                .catch(() => {
                });
        },
        closeDetailDialog(val) {
            this.codeDetailVisible = false;
        },
        closeManuDialog(val) {
            this.addDialogVisible = false;
            if (val) {
                this.$message.success("选入成功");
                this.refresgOrderDetail();
                this.getList();
            } else {
                this.$message.error("选入失败");
            }
        },
        cancelDialog() {
            this.addDialogVisible = false;
        },
        importOrder(row) {
            this.orderId = row.id;
            this.addDialogVisible = true;
        },
        getBusType() {
            let query = {
                enabled: true,
            };
            getBussinessType(query)
                .then((response) => {
                    this.busTypes = response.data.list || [];
                    this.filterQuery.billAction = this.busTypes[0].action;
                    // this.getList();
                })
                .catch(() => {
                });
        },
        getActionName(action) {
            for (let i = 0; i < this.busTypes.length; i++) {
                if (this.busTypes[i].action === action) {
                    return this.busTypes[i].name;
                }
            }
        },
    },
    filters: {
        statusFilterType(status) {
            const statusMap = {
                false: "success",
                true: "danger",
            };
            return statusMap[status];
        },
    },
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
        var that = this;
        var inputer = document.getElementById("inputer");
        window.sc = new A.KeyScaner(inputer);
        sc.onInput = function (text) {
            if (text.includes("delete")) {
                that.filterQuery.code = "";
                return;
            }
            if (that.sitcomScan) {
                that.filterQuery.code = that.filterQuery.code;
            } else {
                that.filterQuery.code = text;
            }
        };
        inputer.focus();//别忘了给要监听的节点放置焦点，如果是div一类默认不具备焦点的节点需要给它加上“tabindex”属性。不建议传入document、Body等全局节点，可能会影响其它输入控件的流畅性。

    },

    created() {
        if (this.$isNotBlank(this.udiCode)) {

            if (!this.diloadTrue) {
                this.searchVisible = false;
            }
            console.log(this.diloadTrue + "----" + this.searchVisible);

            this.filterQuery.code = this.udiCode;
            this.getList();
        }
        this.getBusType();
    },
};
</script>


<style scoped>

#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;

}

.el-table .warning-row {
    background: #ffb5b5;
}

.el-table .success-row {
    background: #ffffff;
}
</style>
