<template>
  <div class="home">
    <nav-bar url="/"></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>
    <!--van-dropdown-menu>
      <van-dropdown-item
        v-model="querytype"
        @change="changeCate"
        :options="option1"
      />
    </van-dropdown-menu-->
    <van-tabs @click="onClick" line-height="0px" title-active-color="#2e82ef">
      <van-tab title="待缴费" querytype="0"></van-tab>
      <van-tab title="已缴费" querytype="1"></van-tab>
    </van-tabs>
    <div class="gao"></div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" >
      <van-cell v-for="item in list" :key="item.SerialFlowNo"  :title="item.BillName || '检查单'"  :value="'¥' + item.BillMoney"
        :label="item.SetDepartName + '  ' + item.BillTime">
        <div v-if="querytype == 0" class="celllabel">
          <div>¥{{  parseFloat(item.BillMoney).toFixed(2)}}</div>
          <van-tag class="jiaofei" @click="gotomoney(item)">去缴费</van-tag>
          <van-tag class="jiaofei" @click="getDetails(item)">查看详情</van-tag>
        </div>
        <div v-if="querytype == 1" class="celllabel">
          <div>¥{{  parseFloat(item.BillMoney).toFixed(2) }}</div>
          <van-tag class="jiaofei" @click="checklist(item)">去查看</van-tag>
          <van-tag class="jiaofei" @click="getDetails(item)">查看详情</van-tag>
        </div>

      </van-cell>
    </van-list>

    <van-popup v-model="show" @click="show = false" class="wrapper">

      <div class="block" @click.stop>
        <div class="ghbt">缴费信息</div>
        <div class="ghxzbody">
          <div class="barcode">
            <barcode :value="card.cardNo"></barcode>
          </div>
          <van-cell-group>
            <van-cell title="就诊医院" value="武警宁夏总队医院" />
            <van-cell title="缴费单据" :value="FlowNo" />
            <van-cell title="执行科室" :value="DoDepartName" />
            <van-cell title="开单时间" :value="BillTime" />
            <van-cell title="预约时间" :value="AppointmentTime" />
            <van-cell title="就诊人" :value="card.name" />
            <van-cell title="费用" :value="BillMoney" />
          </van-cell-group>
          <div class="qrcode">
            <vue-qr :logo-src="logoSrc" v-if="card.healthcode != null" :size="150" :margin="0" :auto-color="true"
              :dot-scale="1" :text="card.healthcode + ':1'" />
          </div>
        </div>
      </div>
    </van-popup>
    <van-overlay :show="overshow" z-index="999" />
  </div>
</template>


<script>
// @ is an alias to /src
import { apiGetbill, apiopDjcx, apiUserCardList } from "@/request/api.js";
import VueQr from 'vue-qr';
import VueBarcode from 'vue-barcode';
import Vue from 'vue';
import { Popup, overlay, Toast } from 'vant';

Vue.use(Popup);
export default {
  components: {
    VueQr,
    VueBarcode,
  },

  data() {
    return {
      title: "",
      show: false,
      overshow: false,
      // 查询类型（0 查询未缴费单据 1 查询已缴费单据）
      option1: [
        { text: "已缴费", value: 1 },
        { text: "待缴费", value: 0 },
      ],
      paramsData: {
        page: 1,
        pagesize: 10,
        time: 0,
      },
      loading: false,
      finished: false,
      list: [],
      card: {},
      querytype: 0,
      FlowNo: '',
      DoDepartName: '',
      BillTime: '',
      BillMoney: '',
      AppointmentTime: '',
    };
  },
  mounted() {
    this.title = this.$route.meta.title;
    let that = this;
    if (!sessionStorage.getItem("card")) {
      apiUserCardList().then((aa) => {
        if(aa.data.length==0){
          Toast("请先绑定就诊人")
          this.$router.push({ path: "/Member_jzr", query: { f: 1 } });
          return;
        }
        for (var i = 0; i < aa.data.length; i++) {
          if (aa.data[i].isYes == "0") {
            sessionStorage.setItem("card", JSON.stringify(aa.data[i]));
          }
        }
        that.card = JSON.parse(sessionStorage.getItem("card"));
        that.list = [];
        that.getListData();

      });
    } else {
      that.card = JSON.parse(sessionStorage.getItem("card"));
      that.list = [];
      that.getListData();

    }
  },
  methods: {
    getDetails(item) {
      this.$router.push({
        path: "/Prescription_details" +
          "?PatientId=" +
          this.card.cardNo +
          "&FlowNo=" +
          item.SerialFlowNo
      });
    },
    gotomoney(item) {
     this.$router.push({
    name: "JiaoFei_detail", // 需要在路由中定义name
    params: {
      PatientId: this.card.cardNo,
      SerialFlowNo: item.SerialFlowNo,
    }
  });
      /*window.location.href =
        "http://wx.btdbyy.cn:9081/jojugongzhonghao/index.html#/Member_wdzd_detail" +
        "?PatientId=" +
        this.card.cardNo +
        "&SerialFlowNo=" +
        item.SerialFlowNo;*/

    },
    checklist(item) {

      //alert(this.card.healthcode)
      this.FlowNo = item.FlowNo,
        this.DoDepartName = item.DoDepartName,
        this.BillTime = item.BillTime,
        this.BillMoney = item.BillMoney,
        this.AppointmentTime = (item.AppointmentTime == null ? '' : item.AppointmentTime),
        this.show = true;

    },
    onClick(querytype, title) {
      this.querytype = querytype;
      this.list = [];
      this.finished = false;
      this.getListData();

    },
    changeCate() {
      //this.querytype=querytype;
      this.list = [];
      this.finished = false;
      this.getListData();
    },
    // 获取列表
    getListData() {
      let _this = this;
      let formdata = {
        PatientId: _this.card.cardNo,
        QueryType: _this.querytype,
        OrderNo: "",
      };
      console.log(formdata);

      // var fyxx="<response> <returnresult> <returncode>1</returncode> <errormsg>查询成功</errormsg> </returnresult> <data> <data_row> <FlowNo>20210000414458</FlowNo> <SetDepartCode>10010009</SetDepartCode> <SetDepartName>乳腺外科</SetDepartName> <DoDepartCode>20010031</DoDepartCode> <DoDepartName>医学检验科</DoDepartName> <BillType>21</BillType> <BillName>检验申请单</BillName> <BillDes /> <BillTime>2021/8/31 15:26:40</BillTime> <BillMoney>80.00</BillMoney> <DoctorCode>999999</DoctorCode> <DoctorName>1管理员</DoctorName> <SinceMoney /> <FairMoney /> <SerialNo /> <AppointNo>0000228472</AppointNo> <SerialFlowNo>2021083130258</SerialFlowNo> <JZLB>11</JZLB> <BZDM /> </data_row> </data> </response>";
      // let jsonObj2 = this.$x2js.xml2js(fyxx);
      //  _this.list.push(jsonObj2.response.data.data_row);
      //  this.finished = true;
      //  return;

      if (_this.card.cardNo != "") {
        _this.overshow = true;
        apiopDjcx(formdata).then((res) => {
          if(res.code != 200){
            Toast("当前无缴费单据")
              _this.loading = false;
             _this.overshow = false;
            this.finished = true;
            return;
          }
          _this.overshow = false;
          console.log(res.data);
          _this.loading = false;
          let jsonObj = this.$x2js.xml2js(res.data);
          console.log(jsonObj);
          // let jsonObj2 = this.$x2js.xml2js(
          //     jsonObj.Envelope.Body.MOP_OutpBillstoPayQueryResponse
          //         .request
          // );
          let jsonObj2 = jsonObj.Envelope.Body.MOP_OutpBillstoPayQueryResponse.request;
          console.log(jsonObj2);
          if (jsonObj2.request.returnresult.returncode == "1") {
            console.log(jsonObj2.request.data);
            _this.list = [];
            // 判断data是数组还是单个对象
            if (Array.isArray(jsonObj2.request.data)) {
              _this.list = jsonObj2.request.data;
            } else {
              _this.list.push(jsonObj2.request.data);
            }
          }
        });
      }
      this.finished = true;
    },
  
    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: 0;
  left: 0;
  z-index: -2;
}

.gao {
  height: 0.25rem;
}

.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;
    }
  }
}

.jiaofei {
  margin-top: 0.125rem;
  background-color: transparent;
  border-style: solid;
  border-radius: 0.25rem;
  border-width: 1px;
  border-color: #166bcc;
  color: #166bcc;
}

.celllabel {
  //margin-left:200px;
  width: 2.5rem;
  float: right;
  //background-color: #ccc;

}

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

.block {
  width: 90%;
  height: 90%;
  background-color: #fff;
}

.qrcode {
  padding: 1rem 0;
  display: flex;
  justify-content: center;
}

.barcode {
  height: 2rem;
  display: flex;
  justify-content: center;
}

.ghbt {
  font-size: 0.5rem;
  font-family: PingFang SC;
  font-weight: 800;
  color: #333333;
  text-align: center;
}

.ghxzbody {
  margin-top: 0.25rem;
  width: 100%;
  font-size: 0.375rem;
  font-family: PingFang SC;
  background-color: #fff;

  .van-cell__value {
    min-width: 70%;

    span {
      display: inline-block;
      text-align: left;
      word-break: break-all;
    }
  }
}
</style>
