<template>
  <div class="home">
    <nav-bar/>
    <div class="bj"></div>
    <div class="lxr" @click="handleCardSelect">
      <div class="lxrr" v-if="card && card.id">
        <h2>
          {{ card.name }}
          <p>卡号：{{ card.cardNo }}</p>
        </h2>
        <h3>
          <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
        </h3>
      </div>
      <van-contact-card type="add" add-text="请选择就诊人" v-else/>
    </div>
    <div class="time_box">
      <!--      <van-cell title="报告单类型" class="bgcell">-->
      <!--        <van-radio-group v-model="radio" direction="horizontal" disabled>-->
      <!--          <van-radio name="2" icon-size="20px">检验单</van-radio>-->
      <!--          &lt;!&ndash;          <van-radio name="1" icon-size="20px">检验单</van-radio>&ndash;&gt;-->
      <!--        </van-radio-group>-->
      <!--      </van-cell>-->
      <van-cell title="开始时间" :value="startdate" @click="startshow = true"/>
      <van-cell title="结束时间" :value="enddate" @click="endshow = true"/>
      <van-calendar
          v-model="startshow"
          :min-date="new Date(2020, 0, 1)"
          @confirm="onstartConfirm"
          :show-confirm="false"
          color="#2e82ef"
      />
      <van-calendar
          v-model="endshow"
          :min-date="new Date(2020, 0, 1)"
          @confirm="onendConfirm"
          :show-confirm="false"
          color="#2e82ef"
      />
    </div>
    <van-button
        class="btn"
        color="#166bcc"
        :loading="loading"
        type="primary"
        loading-text="加载中..."
        @click="onConfirm"
    >查询
    </van-button
    >
    <!--   处方主信息列表 -->
    <div class="listbox">
      <van-cell
          v-for="item in list"
          :key="item.regno"
          :title="item.ordername.substr(0, 20)"
          :value="item.times"
          :label="'报告ID：' + item.regno"
          @click="querylistmx(item)"
      />
      <van-cell
          v-for="item in pacslist"
          :key="item.reportId"
          :title="item.reportName"
          :value="item.reportPdfFilePath.split('/')[2]"
          :label="item.reportName"
          @click="querypacsmx(item)"
      />
    </div>
    <van-popup
        id="pdf"
        v-model="resultshow"
        @click="resultshow = false"
        :class="popupclass"
    ></van-popup>
  </div>
</template>

<script>
import {
  apiUserCardList,
  apiopLMQuery,
  apiopLDQuery,
  apiopPacscx,
  apiopLiscx,
} from "@/request/api.js";
import axios from "axios";
import Vue from "vue";
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
import pdf from "vue-pdf";
import {Toast, Empty, Calendar, RadioGroup, Radio, Slider} from "vant";

Vue.use(Calendar);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Slider);
export default {
  mounted() {
    this.title = this.$route.meta.title;
  },
  // components: {
  //   pdf,
  // },
  data() {
    return {
      title: "",
      card: {},
      activeSelect: 0,
      list: [],
      pacslist: [],
      date: "",
      startshow: false,
      endshow: false,
      startdate: "",
      enddate: "",
      radio: "2",
      loading: false,
      src: "", // pdf文件地址
      resultshow: false,
      scale: 0, //放大系数
      idx: -1,
      pdfh5: null,
      popupclass: "wrapper0",
    };
  },
  created() {
    this.card = JSON.parse(sessionStorage.getItem("card"));
    if (this.card) {
      return;
    }
    /*apiUserCardList({ isYes: 0 }).then(res => {
      this.card = res.data[0];
    });*/
  },
  methods: {
    onChange(scale) {
      this.$refs.pdf.$el.style.width = parseInt(100 + scale) + "%";
    },

    formatDate(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month > 9 ? month : "0" + month;
      let day = date.getDate();
      day = day > 9 ? day : "0" + day;
      return year + "-" + month + "-" + day;
    },
    onstartConfirm(date) {
      this.startshow = false;
      this.startdate = this.formatDate(date);
    },
    onendConfirm(date) {
      this.endshow = false;
      this.enddate = this.formatDate(date);
    },
    onConfirm() {
      this.loading = true;
      if (this.startdate == "" || this.enddate == "") {
        Toast("请选择起止时间");
        this.loading = false;
      } else {
        this.resultshow = true; //先刷新一下弹窗，加载pdfbox，避免查看报告刷不出来
        this.popupclass = "wrapper0";
        if (this.radio == "1") {
          this.getList();
        } else {
          this.getPacs();
        }
      }
    },
    // querypacsmx(item) {
    //   //this.src="http://wx.btdbyy.cn:9081/storage/"+item.pdfurl;
    //   $("#pdfbox").remove();
    //   this.popupclass = "wrapper";
    //   this.resultshow = true;
    //   //实例化
    //   //  console.log("@@@"+"http://153.0.195.114:8855"+(item.reportPdfFilePath))
    //   setTimeout(() => {
    //     var $div = '<div id="pdfbox"></div>';
    //     $("#pdf").append($div); //将新创建的div节点插入到nav容器的内容底部
    //     this.pdfh5 = new Pdfh5("#pdfbox", {
    //       pdfurl: "http://101.132.179.117/gzhsvr" + item.reportPdfFilePath,
    //       // pdfurl: "http://153.0.195.114:8855/storage/2023-01-27/2023-01-27_15_1_1001.PDF"
    //     });
    //   }, 200);
    // },
    // querylistmx(item) {
    //   $("#pdfbox").remove();
    //   this.popupclass = "wrapper";
    //   this.resultshow = true;
    //   var $div = '<div id="pdfbox"></div>';
    //   $("#pdf").append($div); //将新创建的div节点插入到nav容器的内容底部
    //   this.src = "http://wx.btdbyy.cn:9082/" + item.pdfurl;
    //   //this.src="http://wx.btdbyy.cn:9082/assets/LIS_PDF/20211129/738994.PDF"
    //   //实例化
    //   /*this.pdfh5 = new Pdfh5("#pdfbox", {
    //     pdfurl: this.src,
    //     });*/
    //   $.ajax({
    //     url: this.src, //假设这是pdf文件流的请求接口
    //     type: "get",
    //     cache: false,
    //     mimeType: "text/plain; charset=x-user-defined", //jq ajax请求文件流的方式
    //     //dataType:"jsonp",
    //     crossDomain: true, //设置跨域为true
    //     success: function (data) {
    //       this.pdfh5 = new Pdfh5("#pdfbox", {
    //         data: data,
    //       });
    //     },
    //   });
    // },
    getList() {
      let that = this;
      that.list = [];
      that.pacslist = [];
      let formData = {
        //QueryCode: that.card.cardNo,
        QueryCode: "0001359819",
        StartTime: that.startdate + " 00:00:00",
        EndTime: that.enddate + " 23:59:59",
      };
      if (that.card.cardNo == null) {
        Toast("请选择就诊人");
        this.loading = false;
        return;
      }
      console.log(formData);
      that.resultshow = false; //先刷新一下弹窗，加载pdfbox，避免查看报告刷不出来
      apiopLiscx(formData).then((res) => {
        console.log(res);
        this.loading = false;
        if (res.code == "0000" && res.message != 0) {
          for (var i = 0; i < res.message.length; i++) {
            that.list.push(res.message[i]);
          }
        } else {
          Toast("暂无检验报告");
        }
      });
    },
    getPacs() {
      let that = this;
      that.list = [];
      that.pacslist = [];
      let formData = {
        QueryCode: that.card.cardNo,
        //QueryCode:"0001238384",
        QueryType: 1,
        StartTime: that.startdate + " 00:00:00",
        EndTime: that.enddate + " 23:59:59",
      };
      if (that.card.cardNo == null) {
        Toast("请选择就诊人");
        return;
      }
      that.resultshow = false; //先刷新一下弹窗，加载pdfbox，避免查看报告刷不出来
      apiopPacscx(formData)
          .then((res) => {
            this.loading = false;
            if (res.code == 200 && res.data.response != undefined) {
              for (var i = 0; i < res.data.response.length; i++) {
                that.pacslist.push(res.data.response[i]);
              }
            } else {
              Toast("暂无检查报告");
            }
          })
          .catch((err) => {
            Toast("网络异常，请稍后重试");
            this.loading = false;
          });
    },

    handleCardSelect() {
      this.$router.push({path: "/Member_jzr", query: {f: 1}});
    },
  },
};
</script>

<style scoped lang="scss">
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0rem;
  left: 0rem;
  z-index: -2;
}

.lxr {
  .van-cell--center {
    border-radius: 0.25rem;
    padding: 0.25rem;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;

    .van-cell__value--alone {
      color: #fff;
    }

    .van-cell__right-icon {
      color: #fff;
    }
  }

  .van-contact-card::before {
    background: none;
  }

  ::v-deep .van-contact-card--add .van-cell__left-icon {
    color: #fff;
    opacity: 0.6;
  }

  .lxrr {
    border-radius: 0.25rem;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;
    padding: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h2 {
      font-size: 0.5rem;

      p {
        font-size: 0.4rem;
        padding-top: 0.15rem;
      }
    }

    h3 .van-cell__right-icon {
      color: #fff;
    }
  }
}

::v-deep .van-tabs__content {
  margin-top: 0.25rem;
}

.time_box {
  background-color: #fff;
  margin: 0.25rem;
  padding: 0.25rem;
  height: 3.65rem;
  border-radius: 0.375rem;
  box-shadow: 0 0 0.25rem #ccc;
}

.btn {
  width: 90%;
  position: relative;
  margin: 5%;
  border-radius: 0.375rem;
}

.bgcell {
  .van-cell__value {
    min-width: 70%; //可根据自己需求设定值
    text-align: left;
  }

  .van-radio {
    padding-right: 0.25rem;
  }
}

.listbox {
  .van-cell__title {
    min-width: 70%; //可根据自己需求设定值
    text-align: left;
  }

  .van-cell__value {
    font-size: 0.375rem;
    text-align: right;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95%;
  height: 80%;
  border-radius: 0.25rem;
}

.wrapper0 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0%;
  height: 0%;
  border-radius: 0.25rem;
}
</style>
