<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.cpmctymc" placeholder="产品通用名"></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-input v-model="filterQuery.ylqxzcrbarmc" placeholder="生产企业"></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-input
                        v-model="filterQuery.nameCode"
                        placeholder="最小销售产品标识"
                    ></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-input v-model="filterQuery.thirdId" placeholder="ERP产品ID"></el-input>
                </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="intentDetail"
                        >选入器械信息
                        </el-button
                        >
                        <el-button type="primary" icon="search" @click="intentImportErp"
                        >选入ERP产品
                        </el-button
                        >
                        <el-button type="primary" icon="search" @click="uploadSMP"   v-if="isUploadSmp"
                        >上传供应商平台
                        </el-button
                        >

                        <!-- <el-button type="primary" icon="search" @click="uploadErpProduct"
                          >更新下载ERP存货产品</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 type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column
                label="最小销售产品标识"
                prop="nameCode"
                width="140"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="生产企业"
                prop="ylqxzcrbarmc"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="产品通用名"
                prop="cpmctymc"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="ERP产品ID"
                prop="thirdId"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="ERP产品名称"
                prop="thirdName"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column
                label="产品类型"
                prop="cplb"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="规格型号"
                prop="ggxh"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="分类编码"
                prop="flbm"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="器械类别"
                prop="qxlb"
                show-overflow-tooltip
            ></el-table-column>

            <el-table-column width="200" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        :disabled="scope.row.thirdId == null || scope.row.thirdId == ''"
                        @click.native.stop="intentSelectUdi(scope.row)"
                    >对照UDI
                    </el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        :disabled="scope.row.tyshxydm == null"
                        @click.native.stop="intentSelectErp(scope.row)"
                    >对照ERP
                    </el-button
                    >
                    <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)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="产品信息编辑"
            :visible.sync="editDialogVisible"
            width="70%"
            v-if="editDialogVisible"
        >
            <el-table
                v-loading="loading"
                :data="detailList"
                style="width: 100%"
                @current-change="handleDetail"
            >
                <el-table-column
                    label="产品标识"
                    prop="nameCode"
                    show-overflow-tooltip
                ></el-table-column>

                <el-table-column
                    label="产品通用名"
                    prop="cpmctymc"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="包装级别"
                    prop="packLevel"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="包装层级"
                    prop="bzcj"
                    show-overflow-tooltip
                ></el-table-column>
            </el-table>

            <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"
                                    :disabled="true"
                                    splaceholder="请输入内容"
                                    v-model="relevanceEdit.thirdId"
                                    @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"
                                    :disabled="true"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.nameCode"
                                ></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="请输入内容"
                                    :disabled="true"
                                    v-model="editQuery.sjcpbm"
                                    @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="请输入内容"
                                    :disabled="true"
                                    v-model="editQuery.packLevel"
                                ></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="bzcj">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.bzcj"
                                    :disabled="true"
                                    @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="bhxjsl">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    splaceholder="请输入内容"
                                    :disabled="true"
                                    v-model="editQuery.bhxjsl"
                                ></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="bhxjcpbm">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    :disabled="true"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.bhxjcpbm"
                                    @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="bhzxxsbzsl">
                                <el-input
                                    style="width: 200px"
                                    size="small"
                                    :disabled="true"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.bhzxxsbzsl"
                                ></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="zxxsbzbhsydysl">
                                <el-input
                                    style="width: 200px"
                                    :disabled="!checked"
                                    size="small"
                                    splaceholder="请输入内容"
                                    v-model="editQuery.zxxsbzbhsydysl"
                                ></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10" class="el-col">
                        <el-form-item prop="name">
                            <el-checkbox v-model="checked" class="text item itemTag"
                            >以使用单元数量入库
                            </el-checkbox
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div style="text-align: center">
                <el-button type="primary" size="small" icon="search" @click="onAddSubmit"
                >提交
                </el-button
                >
                <el-button type="primary" size="small" icon="search" @click="cancelDialog"
                >取消
                </el-button
                >
            </div>
        </el-dialog>
        <el-dialog
            title="选入器械信息"
            :visible.sync="selectUdiDialogVisible"
            width="85%"
            v-if="selectUdiDialogVisible"
        >
            <selectUdi @closeUdi="closeUdi"></selectUdi>
        </el-dialog>

        <el-dialog
            title="选入ERP产品信息"
            :visible.sync="selectErpDialogVisible"
            width="85%"
            v-if="selectErpDialogVisible"
        >
            <selectErp
                :closeDialog="closeDialog"
                :uuid="uuid"
                :relId="relId"
                :isImport="isImport"
                @closeUdi="closeUdi"
            ></selectErp>
        </el-dialog>

        <el-dialog
            title="选入UDI产品信息"
            :visible.sync="selectLocalVisible"
            width="85%"
            v-if="selectLocalVisible"
        >
            <selectLocalUdi
                :closeDialog="closeDialog"
                :relId="relId"
                @closeUdi="closeUdi"
            ></selectLocalUdi>
        </el-dialog>

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

<script>
    import {
        getUdiInfos,
        deletetUdiInfos,
        updatetUdiInfos,
        updateErpProduct, uploadSmp
    } from "../../api/basic/udiRelevance";
    import {selectSysParamByKey} from "../../api/param/systemParamConfig"
    import {filterByUuid} from "../../api/basic/udiInfo";

    import selectUdi from "./UdiInfoRelevance.vue";
    import selectErp from "./UdiInfoselectErpUdi";
    import selectLocalUdi from "./UdiInfoSelectLocalUdi";

    export default {
        data() {
            return {
                filterQuery: {
                    ylqxzcrbarmc: "",
                    cpmctymc: "",
                    nameCode: "",
                    page: 1,
                    limit: 20,
                    addType: 1,
                },

                editQuery: null,
                relevanceEdit: {
                    id: null,
                    thirdId: "",
                    isUseDy: false,
                },
                isImport: false,
                isUploadSmp: false,
                checked: false,
                list: [],
                detailList: [],
                total: 0,
                thirdNo: "",
                uuid: "111",
                thirdId: null,
                relId: "",
                multipleSelection: [],
                editDialogVisible: false,
                selectUdiDialogVisible: false,
                selectErpDialogVisible: false,
                selectLocalVisible: false,
            };
        },

        methods: {
            onReset() {
                this.$router.push({
                    path: "",
                });
                this.filterQuery = {
                    ylqxzcrbarmc: "",
                    cpmctymc: "",
                    nameCode: "",
                    page: 1,
                    limit: 20,
                    addType: 1,
                };
                this.getList();
            },
            getList() {
                this.loading = true;
                getUdiInfos(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;
                    });
            },

            getDetailList(detailQuery) {
                this.loading = true;
                filterByUuid(detailQuery)
                    .then((response) => {
                        this.loading = false;
                        this.detailList = response.data || [];
                    })
                    .catch(() => {
                        this.loading = false;
                        this.detailList = [];
                    });
            },

            handleDetail(row) {
                this.editQuery = row;
                console.log(row);
            },
            deleteOrders(data) {
                this.loading = true;
                let tquery = {
                    id: data.id + "",
                };

                deletetUdiInfos(tquery)
                    .then((response) => {
                        if (response.code == 20000) {
                            this.getList();
                            this.$message({
                                type: "success",
                                message: "删除成功！",
                            });
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                    });
            },

            deleteDialog(rowId) {
                this.$confirm("此操作将永久删除该产品信息, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        this.deleteOrders(rowId);
                    })
                    .catch(() => {
                    });
            },

            exportTxt() {
            },

            intentDetail() {
                // this.$router.push({ path: "../product/udirevance" });
                this.selectUdiDialogVisible = true;
                //  this.$router.push({name:'home',query: {id:'1'}})
            },
            intentSelectErp(val) {
                this.uuid = val.uuid;
                this.relId = val.id;
                this.isImport = false;
                console.log("-----" + this.uuid);
                this.selectErpDialogVisible = true;
            },

            intentImportErp(val) {
                this.uuid = val.uuid;
                this.relId = val.id;
                this.isImport = true;
                console.log("-----" + this.uuid);
                this.selectErpDialogVisible = true;
            },
            uploadSMP() {
                var selectData = this.multipleSelection;
                var keys = [];
                selectData.forEach((obj) => {
                    keys.push(obj.id);
                });
                var tquery = {
                    keys: keys,
                };
                uploadSmp(tquery).then((response) => {
                    if (response.code == 20000) {
                        this.$message({
                            type: "success",
                            message: "上传成功！",
                        });
                    } else {
                        this.$message({
                            type: "error",
                            message: response.message,
                        });
                    }

                }).catch(
                    () => {
                        this.$message({
                            type: "error",
                            message: "上传失败",
                        });
                    }
                );
            },
            intentSelectUdi(val) {
                this.relId = val.id;
                console.log("-----" + this.uuid);
                this.selectLocalVisible = true;
            },
            handleSelectionChange(val) {
                console.log("----" + val);
                this.multipleSelection = val;
            },

            cancelDialog() {
                this.editDialogVisible = false;
            },
            handleCurrentChange(val) {
                this.filterQuery.page = val;
                this.getList();
            },
            handleModifyClick(row) {
                this.editDialogVisible = true;
                this.editQuery = row;
                this.relevanceEdit = {
                    id: row.id,
                    thirdId: row.thirdId,
                    isUseDy: row.isUseDy,
                };
                this.checked = row.isUseDy == 1;

                let ttquery = {
                    uuid: row.uuid,
                    page: 1,
                    limit: 10,
                };
                console.log("this.editQuery.isUseDy = " + this.editQuery.isUseDy);

                this.getDetailList(ttquery);
            },
            closeUdi(val) {
                this.selectUdiDialogVisible = false;
                this.selectErpDialogVisible = false;
                this.selectLocalVisible = false;
                if (val) {
                    this.$message.success("添加成功！");
                    this.getList();
                } else {
                    this.$message.error("添加失败！");
                }
            },

            uploadErpProduct() {
                updateErpProduct()
                    .then((response) => {
                        if (response.code == 20000) {
                            this.$message({
                                type: "success",
                                message: response.data,
                            });
                        } else {
                            this.$message.error(response.message);
                        }
                    })
                    .catch(() => {
                    });
            },

            closeDialog() {
                this.selectErpDialogVisible = false;
                this.selectLocalVisible = false;
            },
            onAddSubmit() {
                if (this.checked == true) {
                    this.relevanceEdit.isUseDy = 1;
                } else {
                    this.relevanceEdit.isUseDy = 0;
                }
                console.log(this.relevanceEdit.isUseDy);
                updatetUdiInfos(this.relevanceEdit)
                    .then((response) => {
                        this.loading = false;
                        this.getList();
                        this.cancelDialog();
                    })
                    .catch(() => {
                        this.loading = false;
                        this.cancelDialog();
                    });
            },
            selectSysParam() {
                let query={
                    paramKey:"smp_isUploadProuct"
                };
                selectSysParamByKey(query)
                    .then((response) => {
                        if (response.code == 20000) {
                            if (response.data.paramValue == '1') {
                                this.isUploadSmp = true;
                            }
                        }

                    })
                    .catch(() => {

                    });
            }

        },
        mounted() {
        },
        components: {
            selectUdi,
            selectErp,
            selectLocalUdi,
        },
        created() {
            this.getList();
            this.selectSysParam();
        },
    };
</script>
