<template>
  <div class="payrecord">
    <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>
    <div class="title" v-if="this.form">燃气缴费查询</div>
    <div class="card" v-if="this.form">
      <van-field
        v-model="form.gasPaymentNo"
        center
        clearable
        readonly
        label-width="35%"
        input-align="right"
        label="燃气缴费编号："
      />
      <van-field
        v-model="form.totalGasAmount"
        center
        clearable
        readonly
        label-width="65%"
        input-align="right"
        label="燃气费应交金额(气费+违约金)："
      />
      <van-field
        v-model="form.totalGasBalance"
        center
        clearable
        readonly
        label-width="40%"
        input-align="right"
        label="燃气费当前余额："
      />
      <van-field
        v-model="form.gmApplyType"
        center
        clearable
        readonly
        label-width="25%"
        input-align="right"
        label="表具类型："
      />
      <van-field
        v-model="form.lastMrDate"
        center
        clearable
        readonly
        label-width="35%"
        input-align="right"
        label="最后抄表时间："
      />
    </div>
    <div class="title" v-if="this.form">业务缴费查询</div>
    <div class="card" v-if="this.form">
      <van-field
        v-model="form.busiPaymentNo"
        center
        clearable
        readonly
        label-width="35%"
        input-align="right"
        label="业务缴费编号："
      />
      <van-field
        v-model="form.totalBusiReceivableAmount"
        center
        clearable
        readonly
        label-width="40%"
        input-align="right"
        label="业务费应收金额："
      />
      <van-field
        v-model="form.totalBusiBalance"
        center
        clearable
        readonly
        label-width="40%"
        input-align="right"
        label="业务费当前余额："
      />
      <van-field
        v-model="form.gmApplyType"
        center
        clearable
        readonly
        label-width="25%"
        input-align="right"
        label="表具类型："
      />
      <van-field
        v-model="form.lastMrDate"
        center
        clearable
        readonly
        label-width="35%"
        input-align="right"
        label="最后抄表时间："
      />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Field } from "vant";
import {queryArrears,queryListUser} from '@/api/rqfy.js';
Vue.use(Button).use(Field);
export default {
  name: "payrecord",
  data() {
    return {
      detail: {},
      userInfo: {},
      form: '',
    };
  },
  created() {
    if (this.$route.query.type == 1) {
      this.detail = this.$route.query.data;
      this.init(this.$route.query.data);
    } 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();
    },
    init(val) {
      queryArrears({consNo: val.consNo}).then((res) => {
        this.form = res
      })
    },
    initData() {
      let params = {
        uid: this.userInfo.userId,
        appId: 1234,
      };
      queryListUser(params).then((res) => {
        if (res && res.length > 0) {
          this.detail = res[0];
          this.init(res[0]);
        } else {
          this.$router.replace({ name: "RqfyIndex",query: {type: 1} });
        }
      });
    },
    jump() {
      this.$router.replace({ name: "Usermanage",query: {type: 1} });
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
};
</script>

<style lang="stylus" scoped>
.payrecord {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: 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;
      }
    }
  }

  .title {
    margin: 40px 0;
    width: 248px;
    height: 80px;
    background: #FFF6E5;
    border-radius: 4px;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FF8900;
    line-height: 80px;
    text-align: center;
  }

  .card {
    margin: 0 30px;
    background: #fff;
  }
}
</style>