<template>
  <div class="div_page_bg">
    <div class="div_location">
      <img src="../../assets/images/icon_location.png" width="25px" height="25px"/>
      <div class="div_location_content">
        <div class="div_name">
          <span class="span_name">{{userName+phoneNumber}}</span>
          <!--<span class="span_value" style="margin-left: 5px"></span>-->
        </div>
        <span class="span_name">{{buildingName}}</span>
      </div>
    </div>
    <div class="div_location_detail" v-if="isPay === 1">
      <div class="div_location_detail_total">
        <div class="div_center">
          <span class="span_value">应缴合计</span>
        </div>
        <div class="div_center">
          <span class="span_price">{{payMoney.toFixed(2)}}</span>
        </div>
      </div>
      <div class="div_location_detail_item">
        <mobile-charge-item v-for="(data,index) in datas" :key="index" :data="data" @onClickChargeItem="onClickChargeItem"></mobile-charge-item>
      </div>
      <div class="div_pay_type_layout">
        <div class="div_pay_type">
          <img :src="imgCheckItem(selectTypeIndex === 1)" @click.stop="onClickItem(1)" width="20px" height="20px"/>
          <span class="span_pay_type">微信</span>
        </div>
        <div class="div_pay_type" style="margin-left: 20px">
          <img :src="imgCheckItem(selectTypeIndex === 2)" @click.stop="onClickItem(2)" width="20px" height="20px"/>
          <span class="span_pay_type">支付宝</span>
        </div>
        <div class="div_pay_type" style="margin-left: 20px">
          <img :src="imgCheckItem(selectTypeIndex === 3)" @click.stop="onClickItem(3)" width="20px" height="20px"/>
          <span class="span_pay_type">银联</span>
        </div>

      </div>
      <div class="div_submit">
        <span class="span_submit" @click="onShowModal">马上收费</span>
      </div>

    </div>
    <div class="div_location_detail" v-if="isPay === 2">
      <div class="div_location_detail_no_pay">
        <img src="../../assets/images/img_no_pay.png" width="150px" height="120px"/>
        <span style="margin-top: 10px;font-size: 14px;margin-bottom: 45px">当前房间费用已缴清～</span>
      </div>

    </div>
    <div class='popContainer' v-if="showModal">
      <img class="image_delete" src="../../assets/images/icon_delete.png" @click="onDismissModal"/>
      <!--<img :src="qrCode" width="196px" height="196px" class="img_qr_code"/>-->
      <div class="img_qr_code" width="216px" height="216px" ref="qrcodeContainer"></div>
    </div>
  </div>
</template>

<script>
  import MobileChargeItem from "../../components/mobileCharge/mobileChargeItem";
  import Scroller from "vux/src/components/scroller/index";
  import {dateFormat} from 'vux'
  import {getPay, getReceivableRecord, isPaySuccess, uploadOrderRecord} from "../../service/getData";
  import util from "../../util/util";
  import QRCode from 'qrcodejs2'
  export default {
    name: "mobileChargeDetail",
    components: {Scroller, MobileChargeItem},
    data(){
      return{
        userName:'',
        phoneNumber:'',
        buildingName:'',
        buildingId:localStorage.getItem("cBuildingId"),
        type:'0',
        isPay:0, //0默认状态 1未支付 2已支付
        datas:[],
        totalActualMoney:'',
        payMoney:'',
        showModal:false,
        qrCode:'',
        selectTypeIndex:1,
        ownerId:'',
        paymentType:1, //移动收费的支付type 缴费方式(1-微信,2-支付宝,3-银联支付,4-paypal支付,5-优惠结算)
        payType:1,     //社区的支付类型 支付类型  1：微信  2：支付宝 3：银联支付 4：paypal支付
        bePayedType:4, // 支付类型  1：微信  2：支付宝 3：银联支付 4:微信二维码（被扫） 5:微信二维码（主扫）6:支付宝二维码（被扫） 7:支付宝条码（主扫）8:银联二维码（被扫） 9:银联二维码（主扫） 10:微信公众号支付 11：微信小程序支付 12：paypal支付
        orderNo:'',
        paymentInfoList:[],
        paymentInfo:'',
        timer:'',
        userId:localStorage.getItem("memberId"),
      }
    },
    computed:{
      imgCheckItem(value){
        return function (value) {
          if (value){
            return require("../../assets/images/check_circle.png");
          }
          return require("../../assets/images/icon_uncheck_circle.png");
        }

      },
    },
    created(){
      setTimeout(() => {
        try {
          EbeiPlugins.setNavigationItemTitle("移动收费");
        }
        catch (e) {

        }
        this.getReceivableRecordJs();
      }, 200);
    },
    methods:{
      getReceivableRecordJs(){
        let that = this;
        let params = {
          buildingId:this.buildingId,
          type:this.type
        }
        this.$vux.loading.show({
          text: '加载中...'
        })
        getReceivableRecord(params).then(res => {
          that.$vux.loading.hide();
          console.log(res)
          if (res.status === 200){
            let data = res.data;
            that.totalActualMoney = data.totalActualMoney;
            that.payMoney = data.totalActualMoney;
            that.userName = data.ownerName;
            that.phoneNumber = data.ownerPhone;
            that.ownerId = data.ownerId;
            that.buildingName = data.location;
            if (that.totalActualMoney === 0 ){
              that.isPay = 2;
            } else {
              that.isPay = 1;
            }
            for (let i = 0; i < data.billGroupList.length; i++) {
              let billGroup = {};
              billGroup.billName = data.billGroupList[i].billName;
              billGroup.detailTotalMoney = data.billGroupList[i].detailTotalMoney;
              let billGroupList = data.billGroupList[i].billDetailList;
              for (let j = 0;j < billGroupList.length; j++) {
                billGroupList[j].value = true;
              }
              billGroup.billDetailList = billGroupList;
              that.datas.push(billGroup);
              that.onClickChargeItem();
            }
            console.log(that.datas)

          } else {
            that.showTips(res.message);
          }
        }).catch(error => {
          that.$vux.loading.hide();
        })
      },
      onClickChargeItem(){
        console.log(this.datas);
        this.payMoney = 0;
        this.paymentInfoList = [];
        this.paymentInfo = '';
        for (let i = 0; i < this.datas.length; i++) {
          let dataList = this.datas[i].billDetailList;
          for (let j = 0; j < dataList.length; j++) {
            let billDetail = dataList[j];
            if (billDetail.value){
              this.payMoney = util.floatAdd(this.payMoney,billDetail.actualMoney);
              this.paymentInfoList.push(billDetail.receivableIds);
            }
          }
        }
        for (let i = 0; i < this.paymentInfoList.length; i++) {
          if (i === this.paymentInfoList.length - 1) {
            this.paymentInfo += this.paymentInfoList[i];
          } else {
            this.paymentInfo += this.paymentInfoList[i]+",";
          }
        }
      },
      onClickItem(value){
        this.selectTypeIndex = value;
        switch (value) {
          case 1:
            this.paymentType = 1;
            this.payType = 1;
            this.bePayedType = 4;
            break;
          case 2:
            this.paymentType = 2;
            this.payType = 2;
            this.bePayedType = 6;
            break;
          case 3:
            this.paymentType = 3;
            this.payType = 3;
            this.bePayedType = 8;
            break;
        }
      },
      onShowModal(){
        // this.showModal = true;
        let that = this;
        this.orderNo = 'S'+this.getTime(new Date().getTime(),'YYYYMMDDHHmmssS')+0;
        let params = {
          buildingId:this.buildingId,
          paymentAmount:this.payMoney,
          ownerId:this.ownerId,
          paymentType:this.paymentType,
          orderNo:this.orderNo,
          paymentInfo:this.paymentInfo,
          userId:this.userId
        }
        this.$vux.loading.show({
          text: '加载中...'
        })
        uploadOrderRecord(params).then(res => {
          console.log(res)
          if (res.status === 200) {
            that.getPayJs();
          } else {
            that.$vux.loading.hide();
            that.showTips(res.message)
          }
        }).catch(error => {
          that.$vux.loading.hide();
        })

      },
      getPayJs(){
        let that = this;
        let other = {}
        switch (this.payType) {
          case 1:
            other = {
              "product_id":"1111"
            }
            break;
        }
        let params = {
          model:"jiaofei",
          orderNo:this.orderNo,
          payType:this.payType,
          totalAmount:this.payMoney,
          type:"3",
          other:other
        }
        getPay(params).then(res => {
          that.$vux.loading.hide();
          console.log(res)
          if (res.status == 200) {
            switch (this.payType) {
              case 1:
                that.qrCode = res.data.credential.wx_pub_qr
                break;
              case 2:
                that.qrCode = res.data.credential.alipay_qr
                break
              case 3:
                that.qrCode = res.data.credential.upacp_qr
                break;
            }
            this.showQRCode();
            that.performRepeatIsPaySuccess();
            that.showModal = true;
          } else {
            that.showTips(res.message)
          }
        }).catch(error => {
          that.$vux.loading.hide();
        })
      },
      performRepeatIsPaySuccess(){
        this.timer = setInterval(this.isPaySuccessJs, 3000);
      },
      isPaySuccessJs(){
        let that = this;
        let params = {
          model:'jiaofei',
          orderNo:this.orderNo,
          payType:this.bePayedType,
        }
        isPaySuccess(params).then(res => {
          console.log(res)
          if (res.data.state === 1){
            that.$router.push({
              path:'paySuccess',
            })
          }
        }).catch(error => {
          console.log(res)
        })
      },
      onDismissModal(){
        this.showModal = false;
      },
      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      },
      //时间格式化
      getTime(time,format){
        return dateFormat(time, format);
      },
      showQRCode(){
        this.$nextTick(()=> {
          let qrcode = new QRCode(this.$refs.qrcodeContainer, {
            text: this.qrCode,
            width: 150,
            height: 150,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
          });
        })
      }
    },
    beforeDestroy(){
      try {
        EbeiPlugins.setBackButtonAction('');
      }
      catch (e) {

      }
      clearInterval(this.timer);
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    background-color: #F9F9F9;
  }
  .div_name{
    display: flex;
  }
  .div_location{
    padding: 0 20px;
    background-color: white;
    display: flex;
    align-items: center;
    height: 80px;
  }
  .div_location_content{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  .span_name{
    font-size: 14px;
    color: #333333;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width: calc(100vw - 75px);
    flex: 1;
  }
  .span_value{
    font-size: 14px;
    color: #333333;
  }
  .span_price{
    display: flex;
    align-items: baseline;
    color: #E96565;
    font-size: 36px;
    font-weight: bold;
  }
  .span_price::before{
    content: "¥";
    font-size: 24px;
    margin-right: 2px;
    font-weight: bold;
  }
  .div_location_detail{
    background-color: white;
    margin-top: 10px;
  }
  .div_location_detail_total{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 110px;
  }
  .div_location_detail_item{
    background-color: white;
    height: calc(100vh - 340px);
    overflow-y: auto;
  }
  .div_location_detail_no_pay{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    height: calc(100vh - 90px);
    overflow-y: auto;
  }

  .div_center{
    display: flex;
    justify-content: center;
  }
  .div_pay_type_layout{
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background-color: white;
  }
  .div_pay_type{
    display: flex;
    align-items: center;
  }
  .span_pay_type{
    font-size: 14px;
    color: #333333;
    margin-left: 5px;
  }

  .div_submit{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
  }
  .span_submit{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 200px;
    border-radius: 22px;
    background-color: #72ADFF;
    color: white;
    font-size: 15px;
  }
  .popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image_delete{
    position: fixed;
    top: 30px;
    right: 20px;
  }
  .img_qr_code{
    background-color: white;
    padding: 10px;
  }
</style>
