<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>

    <div class="app-container">
      <div class="btn">
        <el-button type="primary" @click="to_print">打印</el-button>
      </div>
      <div id="dialysis-print-box">
        <div class="dialysis-print-order">
          <div class="print">
            <h2>收据凭证</h2>
            <p>收款日期： {{ time }}</p>
            <div class="content">
              <div style="display: flex; padding: 0 30px">
                <div style="display: flex">
                  <div>收款单位：</div>
                  <div style="min-width: 224px; border-bottom: 1px solid #000">
                    <span>{{name}}</span>
                  </div>
                </div>
                <div style="display: flex">
                  <div>收款方式：</div>
                  <div
                    style="min-width: 224px; border-bottom: 1px solid #000"
                  ><span>现金</span>
                  </div>
                </div>
              </div>
              <div style="display: flex; padding: 0 30px">
                <div>人民币：</div>
                <div
                  style="min-width: 225px; border-bottom: 1px solid #000"
                >￥{{money}}</div>
              </div>
              <div style="display: flex; padding: 0 30px">
                <div>收款事由：</div>
                <div style="width: 86%; border-bottom: 1px solid #000"><span>预交押金</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import print from "print-js";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  getorgname
}from "@/api/deposit";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "打印凭证" },
      ],
      name:"",//机构名称
      time:"",//日期
      money:"",//金额
    };
  },
  created(){
    this.init();
    this.getname();
  },
  methods: {
    //获取机构名称
    getname(){
      var params = {};
      getorgname(params).then((res) =>{
        if (res.data.state == 1){
          this.name = res.data.data.list;
        }
      })
    },
    init(){
      this.money = this.$route.query.key.deposit
      var tmp = this.$route.query.key.starttime
      this.time = tmp.slice(0,4)+"年"+tmp.slice(5,7)+"月"+tmp.slice(8,10)+"日"
      // this.li = this.time.slice(0,4)
      // alert(this.time.slice(0,4))
      // alert(this.time.slice(5,7))
      // alert(this.time.slice(8,10))
    },
    to_print() {
      const style =
        '@media print {.dialysis-print-order{width:960px;margin:0 auto} .print h2{text-align: center;} .print p{width: 85%;text-align: right;} .content{width: 70%;height: 250px;border: 1px solid #000;margin: 20px auto;display: flex;flex-direction: column;justify-content: space-evenly;white-space: nowrap;}';
      printJS({
        printable: "dialysis-print-box",
        type: "html",
        style: style,
        scanStyles: false,
      });
    },
  },
};
</script>

<style scoped>
.btn {
  position: absolute;
  top: 60px;
  right: 40px;
}

.print h2 {
  text-align: center;
}

.print p {
  width: 85%;
  text-align: right;
}
.content {
  width: 70%;
  height: 250px;
  border: 1px solid #000;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  white-space: nowrap;
}
</style>
