<template>
    <div>
        <el-card style="margin: 25px">
            <el-form :inline="true" :model="unionQuery" size="mini" >
                <el-form-item class="query-form-item">
                    <el-input v-model="unionQuery.code"
                              style="width: 600px"
                              placeholder="请扫描或输入UDI码"
                              clearable="true"
                              @keyup.enter.native="keyup_submit($event)"></el-input>
                </el-form-item>
                <el-form-item class="query-form-item">
                    <el-button-group>
                        <el-button type="primary" icon="search" @click="vailUdi" size="mini"
                        >UDI校验
                        </el-button
                        >
                        <el-button type="primary" icon="search" @click="searchList" size="mini"
                        >查询
                        </el-button
                        >
                        <el-button type="primary" icon="search" @click="getSuperSeaech" size="mini"
                        >国家同步库查询
                        </el-button
                        >

                    </el-button-group>
                </el-form-item>
            </el-form>

            <el-form
                :model="editQuery"
                :rules="rules"
                ref="editQuery"
                label-width="100px"
                style="margin-top: 20px"
            >
                <el-collapse v-model="activeNames">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <p class="form-title">产品标识基本信息</p>
                        </template>
                        <el-row :gutter="20" class="el-row" type="flex">

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>产品标识:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.nameCode"
                                    ></el-input>
                                </div>
                            </el-col>

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>最小包装单元内包含使用单元数量:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.zxxsbzbhsydysl"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>包含下级产品编码:&nbsp;</span>
                                    </div>

                                    <el-input
                                        style="width: 65%"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.bhxjcpbm"

                                    ></el-input>
                                </div>
                            </el-col>

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>包含最小销售包装数量:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.bhzxxsbzsl"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                    </el-collapse-item>

                    <el-collapse-item name="2">
                        <template slot="title">
                            <p class="form-title">产品基本信息</p>
                        </template>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>产品名称:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        size="small"
                                        splaceholder="请输入内容"
                                        :disabled="true"
                                        v-model="editQuery.cpmctymc"
                                    ></el-input>
                                </div>
                            </el-col>

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>规格型号:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.ggxh"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>产品类别:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.cplb"
                                    ></el-input>
                                </div>
                            </el-col>
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>分类编码:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.flbm"
                                    ></el-input>
                                </div>
                            </el-col>

                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>医疗器械注册人:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="ylqxzcrbarmc"
                                        v-model="editQuery.ylqxzcrbarmc"
                                    ></el-input>
                                </div>
                            </el-col>
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>注册人英文名称:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.ylqxzcrbarywmc"
                                    ></el-input>
                                </div>
                            </el-col>

                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>器械类别:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.qxlb"
                                    ></el-input>
                                </div>
                            </el-col>

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>生产厂家:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>商品条码:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        size="small" :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.sptm"
                                    ></el-input>
                                </div>
                            </el-col>
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>医保编码:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%" :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.ybbm"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>统一社会信用号:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.tyshxydm"
                                    ></el-input>
                                </div>
                            </el-col>
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>注册证/备案号:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.zczbhhzbapzbh"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>产品描述:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="!checked"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.cpms"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>
                    </el-collapse-item>


                    <el-collapse-item name="3">
                        <template slot="title">
                            <p class="form-title">生产标识基本信息</p>
                        </template>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>是否包含批号:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.scbssfbhph"
                                    ></el-input>
                                </div>
                            </el-col>
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>是否包含序列号:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        v-model="editQuery.scbssfbhxlh"
                                        splaceholder="请输入内容"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>是否包含生产日期:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.scbssfbhscrq"
                                    ></el-input>
                                </div>
                            </el-col>
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>是否包含失效日期:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        v-model="editQuery.scbssfbhsxrq"
                                        size="small"
                                        splaceholder="请输入内容"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>


                    </el-collapse-item>

                    <el-collapse-item name="4">
                        <template slot="title">
                            <p class="form-title">包装标识信息</p>
                        </template>

                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>上级产品编码:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.sjcpbm"
                                    ></el-input>
                                </div>
                            </el-col>

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>包装级别:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        size="small"
                                        splaceholder="请输入内容"
                                        :disabled="true"
                                        v-model="editQuery.packLevel"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" class="el-row" type="flex">
                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>包装单位/包装级别:&nbsp;</span>
                                    </div>

                                    <el-input
                                        style="width: 65%"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.bzcj"
                                        :disabled="true"

                                    ></el-input>
                                </div>
                            </el-col>

                            <el-col :span="12" class="el-col">
                                <div class="text item">
                                    <div class="itemTag">
                                        <span>包含下级包装数量:&nbsp;</span>
                                    </div>
                                    <el-input
                                        style="width: 65%"
                                        size="small"
                                        splaceholder="请输入内容"
                                        :disabled="true"
                                        v-model="editQuery.bhxjsl"
                                    ></el-input>
                                </div>
                            </el-col>
                        </el-row>

                    </el-collapse-item>

                </el-collapse>

            </el-form>

        </el-card>

    </div>
</template>

<script>
import {getUdiInfos, superSearch, vailUdiCode} from "../../api/extenal/udiInfo";


export default {
    name: "UdiInfoSearch",
    data() {
        return {
            activeNames: ['1'],
            unionQuery: {
                page: 1,
                limit: 10,
                code: null,
            },
            udidlList: [],
            editQuery: {},
        }
    },
    methods: {
        searchList() {
            this.unionQuery.page = 1;
            this.getList();
        },

        keyup_submit(event) {
            this.unionQuery.page = 1;
            this.getList();
            event.target.select();
        },
        getList() {
            this.loading = true;
            getUdiInfos(this.unionQuery)
                .then((response) => {
                    this.loading = false;
                    if (response.code == 20000) {
                        this.udidlList = response.data.list || [];
                        if (this.udidlList == null || this.udidlList.length == 0) {
                            this.$message.error("未查询到DI信息！");
                        } else {
                            this.editQuery = this.udidlList[0];
                            this.$message.success("查询成功！");
                        }
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.udidlList = [];
                    this.total = 0;
                });
        },


        vailUdi() {
            this.loading = true;
            vailUdiCode(this.unionQuery)
                .then((response) => {
                    this.loading = false;
                    if (response.code == 20000) {
                        this.editQuery = response.data;
                        if (this.editQuery != null && this.editQuery.nameCode != null)
                            this.$message.success("校验成功！");
                    } else {
                        this.$message.error(response.message);
                    }
                })
                .catch(() => {
                    this.loading = false;
                    this.total = 0;
                });
        },


        getSuperSeaech() {

            this.$confirm("此操作将访问国家库查询DI数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.loading = true;
                    superSearch(this.unionQuery)
                        .then((response) => {
                            this.loading = false;
                            if (response.code == 20000) {
                                this.udidlList = response.data || [];
                                if (this.udidlList == null || this.udidlList.length == 0) {
                                    this.$message.error("未查询到DI信息！");
                                } else {
                                    this.editQuery = this.udidlList[0];
                                    this.$message.success("查询成功！");
                                }
                            } else {
                                this.$message.error(response.message);
                            }
                        })
                        .catch(() => {
                            this.loading = false;
                            this.udidlList = [];
                            this.total = 0;
                        });
                })
                .catch(() => {
                });


        },
    },
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
}
</script>

<style scoped>
.form-title {
    font-size: 16px;
    font-family: Noto Sans SC;
    font-weight: bold;
    color: #303133;
    padding-bottom: 17px;
    padding-top: 17px;
}
</style>
