<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color: #1989fa"
    >
      <template #title>
        <van-col style="color: #ffffff">微信二维码缴费</van-col>
      </template>
      <template #left>
        <i
          class="fa fa-arrow-circle-left"
          aria-hidden="true"
          style="color: #ffffff; font-size: 18px"
        ></i>
      </template>
      <template #right>
        <van-icon name="replay" size="18" color="#ffffff" />
      </template>
    </van-nav-bar>

      <van-cell

          border
        >
          <template #default>

            <van-row class="borderTop">
              <van-col span="24">
                <van-row>
                  <van-col span="5" class="title1">租户</van-col>
                  <van-col span="19">{{ info.ownername }}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">房屋</van-col>
                  <van-col span="19">{{ info.hname }}</van-col>
                </van-row>
               <van-row>
                  <van-col span="5" class="title1">费用类型</van-col>
                  <van-col span="19" >{{info.billitemname}}</van-col>
                </van-row>
                 <van-row>
                  <van-col span="5" class="title1">欠费金额</van-col>
                  <van-col span="19" >{{info.nneedpaymny}}元</van-col>
                </van-row>

                <van-row>
                  <van-col span="24">
                         <div class="qrcode" id="qrcode"></div>
                  </van-col>
                </van-row>
              </van-col>

            </van-row>
          </template>
        </van-cell>

  </div>
</template>

<script>
import { MakePayQrCode } from '@/common/api/loginApi.js'
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
  name: 'login',
  data () {
    return {
      info: {}, // 欠费信息
      payUrl: ''

    }
  },
  created: function () {
    console.info('created')
    // console.info(this.$util);
    this.$util.persistLogin(this)
    this.GetJiaofeiInfo()
    this.MakePayQrCode()
  },
  methods: {
    GetJiaofeiInfo: function () {
      var that = this
      let info = JSON.parse(that.$cookie.get('jiaofei'))
      this.info = info
    },
    MakePayQrCode: function () {
      let that = this
      let data = {
        farwarid: this.info.farerowid,
        money: this.info.nneedpaymny + '',
        ownername: this.info.ownername,
        hname: this.info.hname
      }
      console.info('MakePayQrCode data', data)
      MakePayQrCode(data).then(res => {
        console.info('data', res)
        if (!res.isSuccess) {
          that.$toast(res.errMsg)
        } else {
          if (!that.$util.isEmpty(res.data)) {
            that.payUrl = res.data
            that.qrcode()
            console.info('payUrl', that.payUrl)
          } else {
            that.payUrl = 'http://www.baidu.com'
            console.info('payUrl', that.payUrl)
            that.qrcode()

            that.$toast('未获取到支付二维码')
          }
        }
      })
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.go(0)
    },
    qrcode () {
      let url = this.payUrl
      // eslint-disable-next-line no-unused-vars
      let qrcode = new QRCode('qrcode', {
        width: 132,
        height: 132,
        text: url // 二维码地址
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title1 {
  color: #999;
}
.value1 {
  color: #999;
  font-size: 18px;
}
</style>
