<template>
  <div class="recharge">
    <div class="safe">
      <div class="content">
        <div class="top">
          <div class="name">{{ detail.name }}</div>
          <van-button
            icon="arrow"
            color="#f77c72"
            round
            icon-position="right"
            size="small"
            @click="jump"
          >
            用户管理
          </van-button>
        </div>
        <div class="user">
          <img class="icon" src="./images/home_icon1.png" alt="" />
          <div class="num">用户号：{{ detail.consNo }}</div>
        </div>
        <div class="add">
          <img class="icon" src="./images/address_icon1.png" alt="" />
          <div class="address">{{ detail.address }}</div>
        </div>
      </div>
      <van-tabs v-model="active" style="width: 100%; margin-top: 10px">
        <van-tab title="燃气费"></van-tab>
        <van-tab title="服务费"></van-tab>
      </van-tabs>
      <div class="card">
        <div class="balance">
          <div class="num">{{ num1 }}</div>
          <div class="name">账户余额(元)</div>
        </div>
        <div class="balance">
          <div class="num">{{ num2 }}</div>
          <div class="name">应缴余额(元)</div>
        </div>
      </div>
      <div class="payment">
        <div class="top">
          <div class="name">缴费金额(元)</div>
          <van-field
            class="money"
            v-model="num3"
            type="number"
            placeholder="0.00"
          />
          <div class="subName">
            转预存金额<span class="subMoney"> {{ num3 ? num3 : 0.0 }} </span
            >(元)
          </div>
        </div>
        <div class="center">
          <div
            :class="['card', act == index + 1 ? 'card1' : 'card']"
            v-for="(item, index) in list"
            :key="index"
            @click="select(item, index)"
          >
            <div class="num">{{ item.num }}元</div>
          </div>
        </div>
        <div class="bottom">
          <div class="left">支付方式</div>
          <div class="right">
            <img src="./images/payweb.png" alt="" />微信支付
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <van-button @click="zhifu" class="operation" size="large" color="#EB4E3F"
        >提交预约</van-button
      >
      <div class="safe-area"></div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, Button, Tab, Tabs,Toast } from "vant";
import { payWeb, queryListUser, queryArrears } from "@/api/rqfy.js";

Vue.use(Field).use(Button).use(Tab).use(Tabs).use(Toast);
export default {
  name: "recharge",
  data() {
    return {
      active: 0,
      detail: {},
      detail1: {},
      num1: "",
      num2: "",
      userInfo: {},
      form: "",
      list: [
        { num: 50 },
        { num: 100 },
        { num: 150 },
        { num: 200 },
        { num: 500 },
        { num: 1000 },
      ],
      act: 0,
      num3: "",
    };
  },
  watch: {
    active(val) {
      this.num3 = '';
      if (val == 0) {
        this.num1 = this.detail1.totalGasBalance;
        this.num2 = this.detail1.totalGasAmount;
      } else {
        this.num1 = this.detail1.totalBusiBalance;
        this.num2 = this.detail1.totalBusiReceivableAmount;
      }
    },
    num3() {
      this.num3 = this.num3.replace(/[^\d.]/g, ""); //仅保留数字和"."
      this.num3 = this.num3.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
      this.num3 = this.num3
        .replace(".", "$#*")
        .replace(/\./g, "")
        .replace("$#*", "."); //去除其他"."
      this.num3 = this.num3.replace(/^(\d+)\.(\d\d).*$/, "$1.$2"); //限制只能输入两个小数
      if (this.num3.indexOf(".") < 0 && this.num3 != "") {
        //首位是0的话去掉
        this.num3 = parseFloat(this.num3);
      }
      if (this.num3 == 50) {
        this.act = 1;
      } else if (this.num3 == 100) {
        this.act = 2;
      } else if (this.num3 == 150) {
        this.act = 3;
      } else if (this.num3 == 200) {
        this.act = 4;
      } else if (this.num3 == 500) {
        this.act = 5;
      } else if (this.num3 == 1000) {
        this.act = 6;
      } else {
        this.act = 0;
      }
    },
  },
  created() {
    // alert(JSON.stringify(this.$route.query));
    if (this.$route.query.type == 2) {
      this.detail = this.$route.query.data;
      this.initNum()
    } else {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo(); // 这是一个json字符串
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录镇合意app");
      }
      let res = sessionStorage.getItem("ZJCD-UserInfo");
      this.userInfo = JSON.parse(res);
      this.initData();
    }
  },
  methods: {
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      this.initData();
    },
    initData() {
      let params = {
        uid: this.userInfo.userId,
        appId: 1234,
      };
      queryListUser(params).then((res) => {
        if (res && res.length > 0) {
          this.detail = res[0];
          this.initNum();
        } else {
          this.$router.replace({ name: "RqfyIndex", query: { type: 2 } });
        }
      });
    },
    initNum() {
      queryArrears({ consNo: this.detail.consNo }).then((res) => {
        this.detail1 = res;
        this.num1 = this.detail1.totalGasBalance;
        this.num2 = this.detail1.totalGasAmount;
      });
    },
    select(item, index) {
      this.act = index + 1;
      this.num3 = item.num;
    },
    jump() {
      this.$router.replace({ name: "Usermanage", query: { type: 2 } });
    },
    zhifu() {
      let params = {
        consNo: this.detail.consNo,
        payAmount: this.num3,
        // redirectUrl: 'http://192.168.3.113:8080/#/rqfy/recharge', // 本地
        redirectUrl: 'http://81.69.44.115/zjh/html/pages/#/rqfy/recharge', // 测试
        // redirectUrl: 'http://www.smart-zj.cn:55902/zjh/html/pages/#/rqfy/recharge', // 生产
      };
      if (this.active == 0) {
        params.bizType = 'gasFee'
      } else {
        params.bizType = 'bizFee'
      }
      console.log(params);
      if (this.active == 0) {
        if (this.num3 != 0 || this.num3 != '') {
          payWeb(params).then((res) => {
            // alert(res);
            // let a = res;
            // let a =
            //   res + "&redirectUrl=http%3A%2F%2F192.168.3.113%3A8080%2F%23%2Frqfy"; // 本地
            // let a = res + '&redirectUrl=http%3A%2F%2F81.69.44.115%2Fzjh%2Fhtml%2Fpages%2F%23%2Frqfy'  //测试
            // alert(JSON.stringify(a));
            if (window.android !== undefined) {
              window.android.payByWechat("https://mbhuatapp.crcgas.com/pay-web");
              window.location.href = res;
            } else {
              window.webkit &&
                window.webkit.messageHandlers.payByWechat.postMessage(
                  "payByWechat"
                );
              window.location.href = res;
            }
          });  
        } else {
          Toast('请选择或输入缴费金额')
        }  
      } else {
        Toast('服务费不允许预存!')
      }
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
};
</script>

<style lang="stylus" scoped>
.recharge {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: auto;

  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .content {
    background: #f04c3f;
    width: 100%;
    height: 260px;
    padding: 40px;
    box-sizing: border-box;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40px;

      .name {
        width: 140px;
        font-size: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
      }
    }

    .user {
      display: flex;
      align-items: center;

      img {
        width: 32px;
        height: 32px;
        margin-right: 15px;
      }

      .num {
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
      }
    }

    .add {
      display: flex;
      align-items: center;
      margin-top: 20px;

      img {
        width: 32px;
        height: 32px;
        margin-right: 15px;
      }

      .address {
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
      }
    }
  }

  .card {
    background: #fff;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;

    .balance {
      width: 50%;
      height: 160px;
      background: #F3F6F9;
      color: #666666;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;

      .num {
        font-size: 48px;
        line-height: 1.5;
      }

      .name {
        font-size: 24px;
        line-height: 2;
      }
    }
  }

  .payment {
    background: #fff;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;

    .top {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;

      .name {
        font-size: 28px;
        color: #666666;
      }

      .money {
        font-size: 40px;
        line-height: 2;
      }

      .subName {
        font-size: 24px;
        margin: 10px 0;

        .subMoney {
          color: #EB4E3F;
        }
      }
    }

    .center {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .card {
        width: 208px;
        height: 120px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 2px solid #DDDDDD;
        margin: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .num {
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }

      .card1 {
        border: 2px solid #EB4E3F;

        .num {
          color: #EB4E3F;
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;

      .right {
        color: #333;
        display: flex;
        align-items: center;

        img {
          width: 45px;
          height: 45px;
        }
      }
    }
  }

  .button {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0px;
    box-sizing: border-box;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>