<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-row>
                <el-form-item class="query-form-item">
                    <el-input v-model="filterQuery.udiCode" placeholder="货位码"></el-input>
                </el-form-item>

                <el-form-item class="query-form-item">
                    <el-input v-model="filterQuery.thirdId" placeholder="存货编码"></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-select v-model="filterQuery.printStatus" placeholder="打印状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="未打印" value="0"></el-option>
                        <el-option label="已打印" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item class="query-form-item">-->
                    <!--<el-select v-model="filterQuery.thirdSysFk" placeholder="请选择第三方系统" @change="thirdSysChange">-->
                        <!--<el-option-->
                            <!--v-for="item in thirdSys"-->
                            <!--:key="item.value"-->
                            <!--:label="item.thirdName"-->
                            <!--:value="item.thirdId">-->
                            <!--<span style="float: left">{{ item.thirdName }}</span>-->
                            <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.thirdId }}</span>-->
                        <!--</el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item>
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-refresh" @click="onReset"></el-button>
                        <el-button type="primary" icon="search" @click="getList">查询</el-button>

                        <!--<el-button type="primary" icon="search" @click="updateStockPrint"-->
                        <!--&gt;更新下载内部码-->
                        <!--</el-button-->
                        >
                        <!--<el-button-->
                        <!--type="primary"-->
                        <!--icon="search"-->
                        <!--@click="selectErpDialog"-->
                        <!--:loading="mipsLoading"-->
                        <!--&gt;更新生产信息</el-button-->
                        <!--&gt;-->

                        <!-- <el-button
                          type="primary"
                          icon="search"
                          @click="downloadErp"
                          :loading="mipsLoading"
                          >更新库存</el-button
                        > -->
                    </el-button-group>
                </el-form-item>
            </el-row>
        </el-form>

        <el-table
            v-loading="loading"
            :data="list"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column
                label="货位码"
                prop="udiCode"
                width="150"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                label="存货编码"
                width="120"
                prop="thirdId"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="存货名称"
                width="230"
                prop="thirdName"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="批次号"
                prop="batchNo"
                width="100"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="生产日期"
                width="100"
                prop="produceDate"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="失效日期"
                width="100"
                prop="expireDate"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="产品标识"
                width="120"
                prop="nameCode"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="产品通用名称"
                width="200"
                prop="cpmctymc"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="规格型号"
                width="200"
                prop="ggxh"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="仓位"
                width="100"
                prop="warehouseName"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="货位"
                width="100"
                prop="spaceName"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="生产企业"
                width="230"
                prop="ylqxzcrbarmc"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="打印状态"
                width="230"
                prop="printStatus"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span>{{ printStatus[scope.row.printStatus] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click.native.stop="handleModifyClick(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-dialog
            title="内部码信息编辑"
            :visible.sync="editDialogVisible"
            width="70%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="editDialogVisible"
        >
            <el-form
                :model="editQuery"
                :rules="rules"
                ref="editQuery"
                label-width="100px"
                style="margin-top: 20px"
            >
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>生产日期:&nbsp;</span>
                            </div>

                            <el-form-item prop="thirdId">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.produceDate"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>失效日期:&nbsp;</span>
                            </div>
                            <el-form-item prop="nameCode">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.expireDate"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>批次号:&nbsp;</span>
                            </div>

                            <el-form-item prop="packRatio">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.batchNo"
                                    @input="change()"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="10" class="el-col">
                        <div class="text item">
                            <div class="itemTag">
                                <span>生产企业:&nbsp;</span>
                            </div>
                            <el-form-item prop="packLevel">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.ylqxzcrbarmc"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>

            <div style="text-align: center">
                <el-button type="primary" size="small" icon="search" @click="postModify"
                >提交
                </el-button
                >
                <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                >取消
                </el-button
                >
            </div>
        </el-dialog>

        <el-dialog
            title="导入ERP生产信息"
            :visible.sync="importDialogVisible"
            width="80%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            v-if="importDialogVisible"
        >
            <importErpOrder
                v-on:closeImportDialog="closeImportDialog"
                :orderId="orderId"
            ></importErpOrder>
        </el-dialog>

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

<script>
    import {
        getStockPrint,
        updateStockPrint,
        modifyStockPrint,
        deleteStockPrint,
        dlErpStock,
    } from "../../api/inventory/stockPrint.js";
    import {getBasicThirdSys} from "../../api/basic/basicThirdSys";
    import importErpOrder from "../inout/DialogImportErpOrder";

    export default {
        data() {
            return {
                filterQuery: {
                    udiCode: null,
                    thirdId: null,
                    printStatus: null,
                    page: 1,
                    limit: 20,
                    thirdSysFk: null,
                },
                editDialogVisible: false,
                importDialogVisible: false,
                checked: false,
                list: [],
                detailList: [],
                thirdSys: [],
                thirdSysDetail: null,
                total: 0,
                editQuery: null,
                printStatus: {
                    0: "未打印",
                    1: "已打印",
                },
            };
        },

        methods: {
            onReset() {
                this.$router.push({
                    path: "",
                });
                this.filterQuery = {
                    udiCode: null,
                    thirdId: null,
                    printStatus: null,
                    thirdSysFk:null,
                    page: 1,
                    limit: 20,
                };
                this.getList();
            },
            getList() {
                this.loading = true;
                getStockPrint(this.filterQuery)
                    .then((response) => {
                        this.loading = false;
                        this.list = response.data.list || [];
                        this.total = response.data.total || 0;
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },

            updateStockPrint() {
                if(this.filterQuery.thirdSysFk == null || this.filterQuery.thirdSysFk==""){
                    this.$message.warning("请选择需要更新的信息来源系统!");
                    return;
                }
                this.loading = true;
                let  query={
                    thirdSysFk:this.filterQuery.thirdSysFk
                };
                updateStockPrint(query)
                    .then((response) => {
                        this.loading = false;
                        if (response.code == 20000) {
                            this.$message.success(response.data);
                        } else {
                            this.$message.success(response.message);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            closeImportDialog(val) {
                this.importDialogVisible = false;
                if (val) {
                    this.$message.success("导入成功");

                    this.getList();
                } else {
                    this.$message.error("导入失败");
                }
            },

            cancelDialog() {
                this.editDialogVisible = false;
            },
            handleCurrentChange(val) {
                this.filterQuery.page = val;
                this.getList();
            },
            handleModifyClick(row) {
                this.editDialogVisible = true;
                this.editQuery = row;
            },
            postModify() {
                modifyStockPrint(this.editQuery)
                    .then((response) => {
                        this.loading = false;
                        if (response.code == 20000) {
                            this.$message.success("修改成功");
                            this.cancelDialog();
                            this.getList();
                        } else {
                            this.$message.success(response.message);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            },
            deleteDialog(rowId) {
                this.$confirm("此操作将删除该内部码信息, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        let dQuery = {
                            id: rowId,
                        };
                        deleteStockPrint(dQuery)
                            .then((response) => {
                                this.loading = false;
                                if (response.code == 20000) {
                                    this.$message.success("删除成功");
                                    this.getList();
                                } else {
                                    this.$message.success(response.message);
                                }
                            })
                            .catch(() => {
                                this.loading = false;
                            });
                    })
                    .catch(() => {
                    });
            },
            selectErpDialog() {
                this.importDialogVisible = true;
            },

            downloadErp() {
                dlErpStock()
                    .then((response) => {
                        this.loading = false;
                        if (response.code == 20000) {
                            this.$message.success(response.data);
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                    });
            },
            getBasicThirdSys() {
                let query = {
                    enabled: true,
                };
                getBasicThirdSys(query)
                    .then((response) => {
                        this.thirdSys = response.data.list || [];
                        this.filterQuery.thirdSysFk = this.thirdSys[0].thirdId;
                        this.getList();
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                    });
            },
        },
        mounted() {
        },
        components: {importErpOrder},
        created() {
            this.getBasicThirdSys();
            // this.getList();
        },
    };
</script>
<style>
    .itemTag {
        float: left;
        text-align: left;
        margin-top: 10px;
        width: 100px;
    }

    .text {
        font-size: 13px;
        font-family: "Microsoft YaHei";
    }

    .el-row {
        display: flex;
        flex-wrap: wrap;

    }

    .el-col {
        border-radius: 4px;
        flex-wrap: wrap;
    }
</style>
