<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.key"
          placeholder="搜索"
          @keyup.enter.native="keyup_submit()"
          style="width: 550px"
          onblur="this.select()"
          onfocus="this.select()"
          autofocus
        ></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="productDetail.zxxsdycpbs != null && productDetail.zxxsdycpbs != ''">
      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>产品标识基本信息</span>
        </div>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.zxxsdycpbs }}</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>{{ productDetail.cpbsbmtxmc }}</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>{{ productDetail.zxxsdyzsydydsl }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.sydycpbs }}</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>{{ productDetail.cpbsfbrq }}</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>{{ productDetail.sfybtzjbs }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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>本体产品标识:</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.btcpbs }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>产品基本信息</span>
        </div>

        <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>产品名称/通用名称:</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.cpmctymc }}</span>
              </div>
            </div>
          </el-col>

          <el-col :span="8" class="el-col">
            <div class="text item">
              <div class="item_tag">
                <span>商品名称:</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.spmc }}</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>{{ productDetail.tsrq }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.devicerecordkey }}</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>{{ productDetail.ggxh }}</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>{{ productDetail.sfwblztlcp }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.cphhhbh }}</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>{{ productDetail.qxlb }}</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>{{ productDetail.yflbm }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.flbm }}</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>{{ productDetail.ylqxzcrbarmc }}</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>{{ productDetail.ylqxzcrbarywmc }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.zczbhhzbapzbh }}</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>{{ productDetail.cplb }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="el-col">
            <div class="text item">
              <div class="item_tag">
                <span>磁共振（MR）安全相关信息:&nbsp;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.cgzmraqxgxx }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.sfbjwycxsy }}</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>{{ productDetail.zdcfsycs }}</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>{{ productDetail.sfwwjbz }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.mjfs }}</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>{{ productDetail.qtxxdwzlj }}</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>{{ productDetail.ybbm }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>生产标识信息</span>
        </div>

        <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>{{ productDetail.cpms }}</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>{{ productDetail.scbssfbhph }}</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>{{ productDetail.scbssfbhxlh }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.scbssfbhscrq }}</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>{{ productDetail.tscchcztj }}</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>{{ productDetail.tsccsm }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <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;</span>
              </div>
              <div class="item_desr">
                <span>{{ productDetail.versionnumber }}</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>{{ productDetail.versiontime }}</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>{{ productDetail.versionstatus }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>包装标识详情</span>
        </div>

        <el-table :data="productDetail.devicepackages" style="width: 100%">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            prop="devicerecordkey"
            label="主键编号"
          ></el-table-column>
          <el-table-column prop="bzcpbs" label="包装产品标识"></el-table-column>
          <el-table-column
            prop="bznhxyjbzcpbs"
            label="产品包装级别"
          ></el-table-column>
          <el-table-column
            prop="cpbzjb"
            label="本级包装内包含小一级相同产品标识的包装数量"
          ></el-table-column>
          <el-table-column
            prop="bznhxyjcpbssl"
            label="包装内含小一级包装产品标识"
          ></el-table-column>
        </el-table>
      </el-card>

      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>存储或操作信息</span>
        </div>
        <el-table :data="productDetail.devicestorages" style="width: 100%">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            prop="devicerecordkey"
            label="主键编号"
          ></el-table-column>
          <el-table-column
            prop="cchcztj"
            label="储存或操作条件"
          ></el-table-column>
          <el-table-column prop="jldw" label="最低值"></el-table-column>
          <el-table-column prop="zdz" label="最高值"></el-table-column>
          <el-table-column prop="zgz" label="计量单位"></el-table-column>
        </el-table>
      </el-card>

      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>临床使用尺寸信息</span>
        </div>
        <el-table :data="productDetail.deviceclinicals" style="width: 100%">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            prop="devicerecordkey"
            label="主键编号"
          ></el-table-column>
          <el-table-column
            prop="lcsycclx"
            label="临床使用尺寸类型"
          ></el-table-column>
          <el-table-column prop="ccz" label="尺寸值"></el-table-column>
          <el-table-column prop="ccdw" label="尺寸单位"></el-table-column>
        </el-table>
      </el-card>

      <el-card class="el-card" v-if="false">
        <div slot="header" style="font-weight: bold">
          <span>企业联系信息</span>
        </div>

        <el-table :data="productDetail.contactlistList" style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="qylxrcz"
            label="企业联系人传真"
          ></el-table-column>
          <el-table-column
            prop="qylxrdh"
            label="企业联系人电话"
          ></el-table-column>
          <el-table-column
            prop="qylxryx"
            label="企业联系人邮箱"
          ></el-table-column>
        </el-table>
      </el-card>

      <el-card class="el-card">
        <div slot="header" style="font-weight: bold">
          <span>历史记录</span>
        </div>

        <el-table :data="productDetail.deviceHistories" style="width: 100%">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            prop="cpbs"
            label="最小销售单元产品标识"
          ></el-table-column>
          <el-table-column
            prop="deviceRecordKey"
            label="主键编号"
          ></el-table-column>
          <el-table-column
            prop="deviceHistoryRecordKey"
            label="历史主键编号"
          ></el-table-column>
        </el-table>
      </el-card>
    </div>
    <div
      v-if="productDetail.zxxsdycpbs == null"
      style="text-align: center; padding-top: 10%"
    >
      <h3 class="text">未找到该条码信息</h3>
    </div>
  </div>
</template>
<script>
import { searchBykey } from "../../api/udid/udid";

export default {
  data() {
    return {
      query: {
        key: "", //01069737151216331020191211200911172109102100001
        page: 1,
        limit: 20,
      },

      productDetail: {
        zxxsdycpbs: null,
      },
      total: 0,
      loading: true,
      index: null,
    };
  },

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

      searchBykey(this.query)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
          this.productDetail = this.list[0];
          // if (this.productDetail.zxxsdycpbs == null) {
          //   document.getElementById("vvdetail").style.visibility = "hidden";
          // } else {
          //   document.getElementById("vvdetail").style.visibility = "none";
          // }
          console.log(this.list+this.productDetail.zxxsdycpbs);
          document.getElementById("qsearch").select();
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
          document.getElementById("qsearch").select();
        });
    },
    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>
