<template>
  <div class="home">
    <nav-bar></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-group>
        <van-cell title="报告单类型" value="核酸检测报告" />
      </van-cell-group>

      <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>
    <div :class="btnclass">
      <div @click="onConfirm">查询</div>
    </div>
    <van-cell
      v-for="item in list"
      :key="item.ReportId"
      :title="item.Note"
      :value="item.Source"
      :label="item.SamplingTtime"
      @click="querymx(item)"
    />
    <van-popup v-model="resultshow" @click="resultshow = false" class="wrapper">
      <div class="block" @click.stop>
        <div class="hsbt">检验报告</div>
        <div class="hsxzbody">
          <van-row
            ><van-col span="6" class="colgray">姓名：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.PatientName
            }}</van-col
            ><van-col span="6" class="colgray">科室：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.GiveInspectionDepartment
            }}</van-col></van-row
          >
          <van-row
            ><van-col span="6" class="colgray">性别：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.PatientSex == 1 ? "男" : "女"
            }}</van-col
            ><van-col span="6" class="colgray">病区：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.Wing
            }}</van-col></van-row
          >
          <van-row
            ><van-col span="6" class="colgray">年龄：</van-col
            ><van-col span="6" class="colblack">{{ showresult.Age }}</van-col
            ><van-col span="6" class="colgray">送检医生：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.GiveInspectionDoctor
            }}</van-col></van-row
          >
          <van-row
            ><van-col span="6" class="colgray">标本类型：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.SampleClassName
            }}</van-col
            ><van-col span="6" class="colgray">检验医生：</van-col
            ><van-col span="6" class="colblack">{{
              showresult.CheckPerson
            }}</van-col></van-row
          >
          <van-row
            ><van-col span="12" class="colgray">检验样本号：</van-col
            ><van-col span="12" class="colgray">审核医生：</van-col></van-row
          >
          <van-row
            ><van-col span="6" class="colgray">送检日期：</van-col
            ><van-col span="18" class="colblack">{{
              showresult.GiveInspectionTime
            }}</van-col></van-row
          >
          <van-row
            ><van-col span="6" class="colgray">检验日期：</van-col
            ><van-col span="18" class="colblack">{{
              showresult.InceptTime
            }}</van-col></van-row
          >
          <van-row class="colgray">检测机构：武警宁夏总队医院</van-row>
          <van-row class="colgray">具体报告信息请以医院纸质报告为准！</van-row>
        </div>
        <div class="hsxzresult">
          <van-row class="resultrow1"
            ><van-col span="16">项目名称</van-col
            ><van-col span="8">结果/参考值</van-col></van-row
          >
          <van-row
            ><van-col span="16">{{ result.ChineseName }}</van-col
            ><van-col span="8" class="colresult">{{
              result.Result
            }}</van-col></van-row
          >
          <van-row
            ><van-col span="7" offset="17" class="colgresultray"
              >(参考值：{{ result.TestItemReference }})</van-col
            ></van-row
          >
        </div>
        <img class="logopic" src="../assets/LOGO.png" />
      </div>
    </van-popup>
    <!-- <van-tabs class="order_tab" color="#46C3B0" line-height="2px" title-active-color="#46C3B0">
      <van-tab v-for="item in list" :key="item.tit">
        <template #title>{{item.tit}}</template>
        <ul>
          <li v-for="(xzks) in item.list" :key="xzks.index">
            <van-cell :title="xzks.bt" is-link :to="xzks.url" :value="xzks.time" />
          </li>
        </ul>
      </van-tab>
    </van-tabs>-->

    <!--van-collapse  v-model="activeSelect" accordion v-if="list.length>0">
      <van-collapse-item
        :title="item.DIAGNOSIS_NAME"
        :name="index"
        v-for="(item,index) in list"
        :key="index"
      >
        <ul>
          <li>
            <span>诊断名称：</span>{{item.DIAGNOSIS_NAME}}
          </li>
          <li>
            <span>诊断日期：</span>{{item.VISIT_DATE}}
          </li>
          <li>
            <span>诊断类型：</span>{{item.DIAGNOSIS_TYPE}}
          </li>
          <li>
            <span>诊断序号：</span>{{item.DIAGNOSIS_NO}}
          </li>
          <li>
            <span>票据号：</span>{{item.DIAGNOSIS_NO}}
          </li>
          <li>
            <span>电话号码：</span>{{item.PHONE_NUMBER}}
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
    <van-empty description="暂无信息" v-else style="padding-top:90px"/-->
  </div>
</template>

<script>
import { apiUserCardList, apiopLMQuery, apiopLDQuery } from "@/request/api.js";
import Vue from "vue";
import { Toast, Empty, Calendar, RadioGroup, Radio, Popup } from "vant";
Vue.use(Popup);
Vue.use(Calendar);
Vue.use(Radio);
Vue.use(RadioGroup);
export default {
  mounted() {
    this.title = this.$route.meta.title;
  },
  data() {
    return {
      title: "",
      card: {},
      activeSelect: 0,
      list: [],
      date: "",
      startshow: false,
      endshow: false,
      startdate: "",
      enddate: "",
      radio: "1",
      result: {},
      resultshow: false,
      showresult: {},
      btnclass: "btn",
    };
  },
  created() {
    this.card = JSON.parse(sessionStorage.getItem("card"));
    if (this.card) {
      //this.getList();
      return;
    }
    apiUserCardList({ isYes: 0 }).then((res) => {
      this.card = res.data[0];
      //this.getList();
    });
  },
  methods: {
    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() {
      if (this.startdate == "" || this.enddate == "") {
        Toast("请选择起止时间");
      } else this.getList();
    },
    querymx(item) {
      //alert(item.ReportId)
      this.showresult = item;

      apiopLDQuery({ ReportId: item.ReportId }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          let jsonObj = this.$x2js.xml2js(res.data);
          // console.log(jsonObj);
          let jsonObj2 = this.$x2js.xml2js(
            jsonObj.Envelope.Body.MOP_OutpLisReptDetailQueryResponse
              .MOP_OutpLisReptDetailQueryResult
          );
          // console.log(jsonObj2);
          if (jsonObj2.response.returnresult.returncode == "1") {
            this.result = jsonObj2.response.data.data_row;
            this.resultshow = true;

            // console.log(that.list);
            return;
          }
          Toast(jsonObj2.response.returnresult.errormsg);
        }
      });
    },
    getList() {
      let that = this;
      that.list = [];
      let formData = {
        QueryCode: that.card.cardNo,
        //QueryCode:"0001120806",
        QueryType: 1,
        StartTime: that.startdate + " 00:00:00",
        EndTime: that.enddate + " 23:59:59",
      };
      if (that.card.cardNo == null) {
        Toast("请选择就诊人");
        return;
      }
      if (that.btnclass == "btn") {
        that.btnclass = "btn1";
        apiopLMQuery(formData)
          .then((res) => {
            that.btnclass = "btn";
            // console.log(res);
            if (res.code == 200) {
              let jsonObj = this.$x2js.xml2js(res.data);
              // console.log(jsonObj);
              let jsonObj2 = this.$x2js.xml2js(
                jsonObj.Envelope.Body.MOP_OutpLisReptMasterQueryResponse
                  .MOP_OutpLisReptMasterQueryResult
              );
              // console.log(jsonObj2);
              if (jsonObj2.response.returnresult.returncode == "1") {
                let arr = jsonObj2.response.data;
                console.log("获取的数据是：" + arr);
                console.log(arr);
                if (arr.data_row.length > 1) {
                  for (var i = 0; i < arr.data_row.length; i++) {
                    console.log("解析数据" + arr.data_row[i]);
                    console.log(arr.data_row[i]);
                    if (
                      arr.data_row[i].Note.indexOf("新型冠状病毒核酸检测") != -1
                    ) {
                      that.list.push(arr.data_row[i]);
                    }
                  }
                } else {
                  if (arr.data_row.Note.indexOf("新型冠状病毒核酸检测") != -1) {
                    that.list.push(arr.data_row);
                  }
                }
                if ((that.list == null) & (that.list == "")) {
                  Toast("暂无核酸检测结果");
                }
                // console.log(that.list);
                return;
              }
              Toast(jsonObj2.response.returnresult.errormsg);
            }
            // Toast(res.message);
          })
          .catch(() => {
            that.btnclass = "btn";
            Toast("暂无核酸检测报告");
          });
      }
    },
    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: 0px;
  left: 0px;
  z-index: -2;
}

.lxr {
  .van-cell--center {
    border-radius: 15px;
    padding: 20px;
    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: 15px;
    padding: 20px;
    background: url(../assets/lxrbj.png) no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2 {
      font-size: 32px;
      p {
        font-size: 28px;
        padding-top: 10px;
      }
    }
    h3 .van-cell__right-icon {
      color: #fff;
    }
  }
}

::v-deep .van-tabs__content {
  margin-top: 20px;
}

.time_box {
  margin: 10px;
  padding: 10px;
  height: 265px;
  border-radius: 14px;
  background-color: #fff;
}

.btn {
  //position: fixed;
  padding: 100px 30px;
  bottom: 0px;
  div {
    width: 690px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    background: #166bcc;
    border-radius: 14px;
    display: block;
    margin: 0px auto;
    font-size: 32px;
    color: #ffffff;
  }
}
.btn1 {
  //position: fixed;
  padding: 100px 30px;
  bottom: 0px;
  div {
    width: 690px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    background: #c4c4c4;
    border-radius: 14px;
    display: block;
    margin: 0px auto;
    font-size: 32px;
    color: #ffffff;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80%;
  border-radius: 12px;
}

.block {
  width: 90%;
  height: 80%;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
}
.hsbt {
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #333333;
  text-align: center;
}
.hsxzbody {
  margin-top: 50px;
  width: 100%;
  font-size: 30px;
  font-family: PingFang SC;
  background-color: #fff;
  border-radius: 15px;
}

.hsxzresult {
  background-color: #fff;
  margin-top: 80px;
  font-size: 30px;
  font-family: PingFang SC;
  border-radius: 15px;
  .resultrow1 {
    font-weight: 800;
  }
}

.van-row {
  margin-top: 20px;
}

.colblack {
  color: #000;
  font-weight: 600;
}
.colresult {
  color: #000;
  font-weight: 600;
  padding-left: 50px;
}
.colgray {
  color: #aaa;
}
.colgresultray {
  font-size: 20px;
  color: #aaa;
}
.logopic {
  width: 500px;
  height: 100px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>
