<template>
  <div>
    <div class="homeTop">
      <span>hi! {{ telephone }}，</span>
      <i :class="status ? 'active' : ''"
        >当前状态：{{ status ? "读写器已就绪" : "读写器未就绪" }}，</i
      >
      <span @click="logout">退出</span>
    </div>
    <div class="homediv">
      <h1>邦德威桌面端</h1>
    </div>
    <div class="result">
      <div>
        <!-- //src需要展示的PDF地址 -->
        <!-- <pdf :src="pdfSrc"></pdf> -->
        <div class="pdf_con" v-if="Object.keys(chipData).length!=0">
        <!-- <div class="pdf_con"> -->
          <div class="rp_con_1">
            <div class="rp_top">
              <div class="rp_top_tit">产品追溯报告</div>
            </div>
            <div class="rp_top_txt">
              <div>报告编号 {{ chipData.code }}</div>
              <div>报告日期 {{ chipData.datetime }}</div>
            </div>
            <div class="rp_mid">
              <div class="rp_mid_tit">产品详情</div>
              <div class="rp_mid_con">
                <div class="rp_mid_lab1">药品商品名称：</div>
                <div class="rp_mid_val1">
                  {{ chipData.vaccineName || "N/A" }}
                </div>
                <div class="rp_mid_lab2">规格：</div>
                <div class="rp_mid_val2">
                  {{ chipData.vaccineCategory || "N/A" }}
                </div>
                <div class="rp_mid_lab1">药品通用名称：</div>
                <div class="rp_mid_val1">
                  {{ chipData.vaccineCommonName || "N/A" }}
                </div>
                <div class="rp_mid_lab2">药品本位码：</div>
                <div class="rp_mid_val2">
                  {{ chipData.standardCode || "N/A" }}
                </div>
                <div class="rp_mid_lab1">生产企业名称：</div>
                <div class="rp_mid_val1">
                  {{ chipData.factoryName || "N/A" }}
                </div>
                <div class="rp_mid_lab2">药品批准文号：</div>
                <div class="rp_mid_val2">
                  {{ chipData.approvalNumber || "N/A" }}
                </div>
                <div class="rp_mid_lab1">有效期：</div>
                <div class="rp_mid_val1">
                  {{chipData.vaccineExpiryDate ? chipData.vaccineExpiryDate + "个月" : "N/A"}}
                </div>
                <div class="rp_mid_lab2">国家药品标识码：</div>
                <div class="rp_mid_val2">
                  {{ chipData.identificationCode || "N/A" }}
                </div>
              </div>
            </div>
          </div>
          <div class="pdf_res">
            <div class="pdf_res_txt">
              <div class="pdf_rt1">
                追溯结果: <span class="pdf_rt1_g">未见异常</span>
              </div>
              <div class="pdf_rt2">发未发现异常, 请核对内外包装与本报告</div>
              <div class="pdf_rt2">所载数据是否一致, 并按相关规定使用</div>
            </div>
            <div class="pdf_res_img">
              <img src="../assets/zy_icon1.png" alt="" />
            </div>
          </div>
          <div class="pdf_btm">
            <img src="../assets/wechart_img1.png" />
            <div class="pdf_btm_txt">
              <div class="pdf_btm_tit">免责声明:</div>
              <div>
                本报告基于多重加密全程追溯数据得出。报告中所提供的信息仅供参考，可作为判定产品质量、产品真伪的佐证。本报告不是产品质量好坏或真伪的结论性报告，不能以此报告所载内容作为判定产品质量好坏或真伪的唯一依据。本报告最终解释权归产品生产企业所有，未经书面许可，任何机构和个人不得以任何形式翻版、复制或发布本报告，不得对本报告进行有悖原意的引用、删除和修改。发布者将通过法律途径维护其一切权利。
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-table :data="tableData" height="250" style="width: 100%">
          <el-table-column prop="code" label="编号"></el-table-column>
          <el-table-column prop="date" label="日期"></el-table-column>
          <!-- <el-table-column prop="down" label="">
              <template slot-scope="scope">
                <a :href="scope.down">查看报告</a>
              </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
// import pdf from "vue-pdf";
import { chip } from "../api/api";
// import { Message } from "element-ui";
import qs from "qs";
export default {
  name: "Home",
  // components: { pdf },
  data() {
    return {
      ruleForm: {
        keyA: "",
        keyB: "",
      },
      statusText: "读写器未就绪",
      status: false,
      chipData: {},
      telephone: "",
      code: "",
      result: "",
      // pdfSrc:'',
      pdfSrc: "http://121.229.41.37:8091/file/pdf/04ADB549100269_.pdf",
      rules: {},
      tableData: [],
    };
  },
  created() {
    const userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    this.tableData = JSON.parse(localStorage.getItem('tableData')) || [];
    this.telephone = userinfo.telephone;
    this.recursiveFun();
  },
  methods: {
    logout() {
      localStorage.removeItem("token");
      localStorage.removeItem("userinfo");
      this.$router.push({ path: "/" });
    },
    recursiveFun(){
      var that = this;
      this.timeout = null;
      this.timeout=setTimeout(() => {
        this.getCodeInfo();
        clearTimeout(that.timeout);
      }, 500);
    },
    getCodeInfo() {
      var that = this;
      that.result = "";
      that.pdfSrc = "";
      // eslint-disable-next-line no-undef
      pywebview.api.read_uid() //A9554912
        .then(res => {
          res = res.replace(/\s/g, "");
          that.result = res;
          chip(
            qs.stringify({
              chipNumber: res,
              longitude: 0,
              latitude: 0,
              inoculators: "",
              incs: "",
              agin: true,
              vaccinationCipher: "",
            })
          ).catch(err=>{
            // alert('请求失败，请重试',err);
            that.$message({
              message: "请求失败，请重试！",
              type: "success",
            });
            that.recursiveFun();
          }).then(response => {
            that.chipData = response.data;
            that.$message({
              message: "请求成功",
              type: "success",
            });
            that.setTableData({code:response.data.chipNumber,date:new Date().toLocaleString(),down:'http://121.229.41.37:8091/file/pdf/'+response.data.chipNumber+'_.pdf'});
            that.recursiveFun();
          })
        })
        .catch(() => {
          that.recursiveFun();
        });
    },
    setTableData(params={}){
      this.tableData.push(params);
      localStorage.setItem('tableData',JSON.stringify(this.tableData));
    }
  },
  mounted() {
    var that = this;
    that.status = this.isStatus; //04ADB549100269
    // that.chipData = {
    //   approvalNumber: "202301017",
    //   batch: "123321",
    //   batchCertificate: null,
    //   beginDate: "2021-07-28",
    //   chatImageUrl: null,
    //   chipNumber: "04ADB549100269",
    //   code: "00860102021",
    //   datetime: "2021-12-08 14:57:32",
    //   doctorEmail: null,
    //   doctorId: null,
    //   doctorName: "医生(别改)",
    //   doctorTelephone: "13000000002",
    //   factoryEmail: null,
    //   factoryId: 167,
    //   factoryName: "中义商务展示",
    //   gmpName: null,
    //   gmpPath: null,
    //   hospitalId: null,
    //   hospitalName: "来广营社区卫生服务中心-预防接种门诊",
    //   identificationCode: "国药10000011",
    //   standardCode: "769000001112",
    //   status: 6,
    //   type: 0,
    //   vaccinationCipher: null,
    //   vaccinationSite: "推荐的接种途径是肌肉注射。最佳部位为上臂三角肌。",
    //   vaccineCategory: "1",
    //   vaccineCommonName: "中义科技守护健康",
    //   vaccineExpiryDate: "123",
    //   vaccineName: "中义科技疫苗展示",
    //   vaccineNumber: null,
    // };
    // chip(
    //   qs.stringify({
    //     chipNumber: 'A9554912',
    //     longitude: 0,
    //     latitude: 0,
    //     inoculators: "",
    //     incs: "",
    //     agin: true,
    //     vaccinationCipher: "",
    //   })
    // ).then((res) => {
    //   that.chipData = res.data;
    //   that.setTableData({code:res.data.chipNumber,date:new Date().toLocaleString(),down:'http://121.229.41.37:8091/file/pdf/'+res.data.chipNumber+'_.pdf'});
    //   // that.recursiveFun();
    // }).catch(()=>{
    //   // that.recursiveFun();
    //   // alert('请求失败，请重试');
    // })
  },
  beforeDestroy() {
    this.removeEvent();
    this.timeout = null;
    this.status = false;
  },
};
</script>
<style lang="less">
h1 {
  text-align: center;
  font-size: 25px;
}
.homediv {
  padding: 30px;
}
.homeTop {
  text-align: right;
  padding: 20px 20px 0 0;
  span {
    color: #606266;
    cursor: pointer;
  }
  i {
    font-style: normal;
    color: red;
  }
  .active {
    color: green !important;
  }
}
.result {
  padding: 30px;
  height: 950px;
  display: flex;
  & > div {
    width: 50%;
    border: 1px solid #e8e8e8;
    min-height: 400px;
    text-align: center;
  }
  .el-table {
    height: 100% !important;
  }
  .el-table::before {
    display: none;
  }
}
.but {
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.pdf_con {
  background: #ffffff;
  padding: 15px 30px 50px 30px;
  border-top: 20px solid #f6f6f6;
  border-bottom: 20px solid #f6f6f6;
}
.pdf_res {
  padding: 34px 18px 50px;
  border-bottom: 1px dashed #979797;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdf_res_txt {
  width: 354px;
  flex: none;
}
.pdf_res_img {
  width: 140px;
  flex: none;
}
.pdf_res_img image {
  width: 140px;
  height: 140px;
}
.rp_top {
  padding: 15px 0;
  margin: auto;
  border-bottom: 2px solid #0e7ff2;
}
.rp_top_tit {
  text-align: center;
  font-size: 30px;
  color: #333333;
}
.rp_top_txt {
  margin: 2px auto;
  justify-content: space-between;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333333;
  padding: 15px 68px;
  border-top: 1px solid #0e7ff2;
}
.rp_mid {
  padding: 0 0 40px 0;
  margin: 0 auto auto auto;
  border-bottom: 1px dashed #979797;
}
.rp_mid_tit {
  font-size: 24px;
  color: #000000;
  line-height: 40px;
  text-align: left;
}
.rp_mid_con {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  color: #666666;
}
.rp_mid_item {
  display: flex;
  width: 50%;
  flex: auto;
}
.pdf_rt1 {
  font-size: 28px;
  color: #333333;
  line-height: 50px;
}
.pdf_rt1_o {
  font-size: 34px;
  color: #ff702f;
}
.pdf_rt1_g {
  font-size: 34px;
  color: #2b9f2c;
}
.rp_mid_con > div {
  text-align: left;
  width: 25%;
  line-height: 22px;
  padding: 6px 0;
}
.pdf_rt2 {
  font-size: 20px;
  color: #666666;
  line-height: 35px;
}
.rp_mid_lab1,
.rp_mid_lab2 {
  color: #222;
}
.rp_mid_lab1 {
  width: 20% !important;
}
.rp_mid_val1 {
  width: 30% !important;
}
div.rp_mid_val2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf_btm {
  margin: 45px auto auto auto;
  padding: 15px;
  background: #f3f3f3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Microsoft YaHei";
}
.pdf_btm image {
  height: 172px;
  width: 172px;
  flex: none;
  margin-right: 14px;
}
.pdf_btm_txt {
  width: 100%;
  flex: auto;
  font-size: 14px;
  color: #666666;
  line-height: 26px;
  text-align: left;
  padding-left: 15px;
}
.pdf_btm_tit {
  font-size: 20px;
  color: #222222;
}
</style>