<template>
  <div class="home">
    <nav-bar></nav-bar>
    <!--van-collapse v-model="list" v-for="item in list" :key="item">
      <van-collapse-item :title="item.REPTNUM" :name="item">
        {{item.TRANAMOUNT}}}元
      </van-collapse-item>
    </van-collapse-->
    <van-cell-group v-for="item in list" :key="item">
      <van-cell center :title="'单据' + item.REPTNUM" :value="item.TRANAMOUNT + '元'" :label="'充值时间:' + item.TRANDATE"
        @click="checklist(item)" />
    </van-cell-group>
    <van-popup v-model="show" @click="show = false" class="wrapper">
      <div class="block" @click.stop>
        <div class="listbt">充值信息</div>
        <div class="listbody">
          <barcode :value="fyinfo.REPTNUM" class="barcode"></barcode>
          <van-cell-group>
            <van-cell title="医院" value="武警宁夏总队医院" />
            <van-cell title="缴费单据" :value="fyinfo.REPTNUM" />
            <van-cell title="住院号" :value="INHOSNUM" />
            <van-cell title="充值时间" :value="fyinfo.TRANDATE" />
            <van-cell title="充值姓名" :value="fyinfo.PATIENTNAME" />
            <van-cell title="充值金额" :value="fyinfo.TRANAMOUNT" />
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>


<script>
import {
  apiInHosChargeRecordQuery
} from "@/request/api.js";
import Vue from 'vue';
import { Toast, Empty, collapse, popup } from "vant";
import VueBarcode from 'vue-barcode';
export default {
  mounted() {
    this.title = this.$route.meta.title;
    this.INHOSNUM = this.$route.query.INHOSNUM;
    if (this.$route.query.HOSDATE != undefined) {
      this.starttime = this.$route.query.HOSDATE;
    } else {
      //设置日期，当前日期的前180天
      this.starttime = this.setForwardDay(90);
    }
    this.getList();
  },
  components: {
    VueBarcode,
  },

  data() {
    return {
      title: "",
      list: [],
      INHOSNUM: '',
      starttime: '',
      activeNames: ['1'],
      show: false,
      fyinfo: {},
    };
  },
  methods: {
    setForwardDay(Day) {
      var now = new Date();
      var d = new Date();
      d.setDate(now.getDate() - Day);
      var month = d.getMonth() + 1;
      var day = d.getDate();
      var clock = d.getFullYear() + '-';
      if (month < 10)
        clock += "0";
      clock += month + "-";
      if (day < 10)
        clock += "0";
      clock += day;
      clock += " 00:00:00";
      return (clock);
    },
    checklist(item) {
      //alert(this.card.healthcode)
      this.fyinfo = item
      this.show = true;

    },
    pad2(n) {
      return n < 10 ? "0" + n : n;
    },
    getList() {
      let date = new Date();
      let locationtime =
        date.getFullYear().toString() +
        "-" +
        this.pad2(date.getMonth() + 1) +
        "-" +
        this.pad2(date.getDate()) +
        " 23:59:59";

      let _this = this;
      let formData = {
        QueryCode: _this.INHOSNUM,
        QueryType: 1,
        StartTime: _this.starttime,
        EndTime: locationtime,
      }

      apiInHosChargeRecordQuery(formData).then((res) => {
        let jsonObj = this.$x2js.xml2js(res.data);
        console.log(jsonObj);
        let jsonObj2 = this.$x2js.xml2js(
          jsonObj.Envelope.Body.MOP_InHosChargeRecordQueryResponse
            .MOP_InHosChargeRecordQueryResult
        );
        console.log(jsonObj2);
        if (jsonObj2.response.returnresult.returncode == "1") {
          console.log(jsonObj2.response.data);
          _this.list = [];
          if (jsonObj2.response.data.data_row.length > 1) {
            // 将数据转换为数组（如果还不是数组的话）
            let dataArray = Array.isArray(jsonObj2.response.data.data_row)
              ? jsonObj2.response.data.data_row
              : [jsonObj2.response.data.data_row];

            // 按 REPTNUM 倒序排列
            _this.list = dataArray.sort((a, b) => {
              return b.REPTNUM.localeCompare(a.REPTNUM);
            });
          } else {
            _this.list.push(jsonObj2.response.data.data_row);
          }
        }
      });

    },

  }
};
</script>


<style scoped lang="scss">
.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;
}

.barcode {
  margin-left: 5%;
  margin-right: 5%;
  align-items: center;
}

.listbt {
  font-size: 36px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #333333;
  text-align: center;
}

.listbody {
  margin-top: 50px;
  width: 100%;
  font-size: 30px;
  font-family: PingFang SC;
  background-color: #fff;
  border-radius: 15px;
}
</style>
