<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="mini">
            <el-form-item class="query-form-item">
                <el-input
                    id="qsearch"
                    v-model="query.nameCode"
                    placeholder="搜索"
                    @keyup.enter.native="keyup_submit()"
                    style="width: 550px"
                ></el-input>
            </el-form-item>

            <el-form-item style="display: flex">
                <el-button type="primary" icon="search" @click="getList"
                >查询
                </el-button
                >
            </el-form-item>
        </el-form>
        <div v-if="editQuery.nameCode != null && editQuery.nameCode != ''">

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

                <el-row :gutter="20" class="el-row" type="flex">
                    <el-col :span="8" class="el-col">
                        <div class="text item">
                            <div class="item_tag">
                                <span>批次号:&nbsp;&nbsp;</span>
                            </div>
                            <div class="item_desr">
                                <span>{{editQuery.batchNo}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="el-col">
                        <div class="text item">
                            <div class="item_tag">
                                <span>生产日期:&nbsp;</span>
                            </div>
                            <div class="item_desr">
                                <span>{{editQuery.produceDate}}</span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" class="el-col">
                        <div class="text item">
                            <div class="item_tag">
                                <span>失效日期:&nbsp;</span>
                            </div>
                            <div class="item_desr">
                                <span>{{editQuery.expireDate}}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>

            </el-card>

            <el-card class="el-card">
                <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="nameCode">
                                    <el-input
                                        style="width: 250px"
                                        :disabled="true"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.nameCode"
                                    ></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="zxxsbzbhsydysl">
                                    <el-input
                                        style="width: 250px"
                                        :disabled="!checked"
                                        size="small"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.zxxsbzbhsydysl"
                                    ></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: 250px"
                                        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: 250px"
                                        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: 250px"
                                        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: 250px"
                                        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: 250px"
                                        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: 250px"
                                        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="bhxjcpbm">
                                    <el-input
                                        style="width: 250px"
                                        size="small"
                                        :disabled="true"
                                        v-model="editQuery.ggxh"
                                        @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: 250px"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.qxlb"
                                    ></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: 250px"
                                        size="small"
                                        :disabled="true"
                                        v-model="editQuery.cphhhbh"
                                        @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: 250px"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.cpms"
                                    ></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: 250px"
                                        size="small"
                                        :disabled="true"
                                        v-model="editQuery.cplb"
                                        @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: 250px"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.flbm"
                                    ></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: 250px"
                                        size="small"
                                        :disabled="true"
                                        v-model="editQuery.tyshxydm"
                                        @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: 250px"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.ylqxzcrbarmc"
                                    ></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: 250px"
                                        size="small"
                                        :disabled="true"
                                        v-model="editQuery.zczbhhzbapzbh"
                                        @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: 250px"
                                        size="small"
                                        :disabled="true"
                                        splaceholder="请输入内容"
                                        v-model="editQuery.ybbm"
                                    ></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </div>
        <div
            v-if="editQuery.nameCode == null"
            style="text-align: center; padding-top: 10%"
        >
            <h3 class="text">未找到该条码信息</h3>
        </div>
    </div>
</template>
<script>
    import {searchBykey, findByDi} from "../../api/udid/udid";

    export default {
        data() {
            return {
                query: {
                    nameCode: "", //01069737151216331020191211200911172109102100001
                },

                editQuery: {
                    nameCode: null,
                },
                total: 0,
                loading: true,
                index: null,
            };
        },

        methods: {
            //获取订单列表
            getList() {
                this.loading = true;

                findByDi(this.query)
                    .then((response) => {
                        this.loading = false;
                        this.editQuery = response.data.productInfoEntity;
                        this.detailList = response.data.packages || [];
                        console.log(this.editQuery + this.editQuery.nameCode);
                        document.getElementById("qsearch").select();
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.total = 0;
                        document.getElementById("qsearch").select();
                    });
            },

            getDetailList(detailQuery) {
                this.loading = true;
                findByDi(detailQuery)
                    .then((response) => {
                        this.editQuery = response.data.productInfoEntity;
                        this.loading = false;
                        this.detailList = response.data.packages || [];
                        document.getElementById("qsearch").select();
                    })
                    .catch(() => {
                        this.loading = false;
                        this.detailList = [];
                    });
            },

            handleDetail(row) {
                this.editQuery = row;
                console.log(row);
            },

            keyup_submit() {
                console.log("全选----");
                this.getList();
            },
            intentBack() {
                //  this.$router.push({path:'../readme/detail',query:{id:row.corpOrderId}});
                this.$router.go(-1);
            },
        },
        filters: {},
        mounted() {
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            };
        },
        created() {
            // let query = this.$route.query;
            // this.getList();
        },
    };
</script>

<style>
    .all {
        margin-top: -30px;
        word-break: break-all;
        height: 100%;
    }

    .mid {
        margin-top: 25%;
        height: 50%;
    }

    .mid_item {
        justify-content: center;
        align-items: center;
    }

    .item {
        margin-bottom: 10px;
    }

    .item_tag {
        float: left;
        text-align: left;
    }

    .item_desr {
        min-height: 30px;
        text-align: left;
    }

    .text {
        width: 100%;
        font-size: 12px;
        font-family: "Microsoft YaHei";
        color: #909399;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both;
    }

    .el-card {
        margin-right: 20px;
        margin-top: 15px;
        /*transition: all .5s;*/
    }

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

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