<template>
  <div class="container temp-container">
    <div class="header">
      <tab-header :title="title" />
    </div>
    <div class="contener">
      <div class="header">
        <div class="header_box">
          <div class="title"></div>
          <div class="header_content">
            <div class="fund">
              <span>账户余额</span>
              <i>{{ summary.balance|moneyNum }}</i>
            </div>
            <div class="paid">
              <span>待付金额</span>
              <i class="paid_color">{{ summary.waitPay|moneyNum }}</i>
            </div>
          </div>
          <div class="header_info">
            <div class="left" @click="toPay()">
              <img src alt />
              <span>充值</span>
            </div>
            <div class="right" @click="toPage()">
              <img src alt />
              <span>资金记录</span>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="list_title" @click="toNextPage(index, item.productName)">
            <div class="title">{{ item.productName }}</div>
            <van-icon name="arrow" class="arrow_right" />
          </div>
          <p>
            <span>应付金额</span>
            <i>{{ item.totalAmount|moneyNum }}</i>
          </p>
          <p>
            <span>待付金额</span>
            <i>{{ item.waitPayAmount |moneyNum}}</i>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
import { TabHeader } from "@/components";
import { mapActions } from "vuex";
import setBarHeight from "../../assets/js/setBarHeight.js";
export default {
  components: {
    [Icon.name]: Icon,
    TabHeader
  },
  mixins: [setBarHeight],
  data() {
    return {
      title: "",
      list: [],
      payUrl: "",
      summary: {
        accountId: 0,
        balance: 0,
        waitPay: 0
      }
    };
  },
  methods: {
    ...mapActions(["loadMoreList", "loadMoreSummary", "loadPayUrl"]),
    toPay() {
      const failUrl=encodeURIComponent("https://pay.qinqinxiaobao.com/callback/fail");
      const successUrl=encodeURIComponent("https://pay.qinqinxiaobao.com/callback/success");
      let payUrl=`${this.payUrl}&accountType=19&selected=1&failUrl=${failUrl}&successUrl=${successUrl}`;
      console.log('payUrl=',payUrl);
      window.location.href=payUrl;
    },
    toPage() {
      this.$router.push({
        name: "billrecord",
        query: { accountId: this.summary.accountId,fromType:'more' }
      });
    },
    toNextPage(index, name) {
      this.$router.push({ name: "moredetail", query: { index, name } });
    },
    async getData() {
      console.log("more index getData");
      await this.loadMoreSummary().then(
        data => {
          this.summary = data;
          console.log("this.summary=", this.summary);
        },
        err => {
          console.log(err);
        }
      );
      await this.loadMoreList().then(
        data => {
          this.list = data;
        },
        err => {
          console.log(err);
        }
      );
    },
    navLeftArrowClick() {
      this.$router.go(-1);
    }
  },
  async mounted() {
    this.setPageNavState();
    this.globalNavLeftArrowClick(this.navLeftArrowClick);
    await this.getData();
    this.payUrl = await this.loadPayUrl();
  }
};
</script>

<style lang="less" scoped>
.contener {
  .header {
    height: 136px;
    padding: 0 16px;
    background: #0978e7;
    border-top: 1px solid #0978e7;
    .header_box {
      height: 174px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 0px 0px 4px 4px;
      margin-top: 20px;
      .title {
        height: 2px;
        box-shadow: 0px 1px 6px 0px rgba(6, 105, 204, 0.6);
      }
      .header_content {
        height: 122px;
        .fund {
          width: 50%;
          float: left;
        }
        .paid {
          width: 50%;
          float: left;
          .paid_color {
            color: #ff9100;
          }
        }
        span {
          height: 20px;
          font-size: 14px;
          color: rgba(149, 152, 158, 1);
          line-height: 20px;
          display: block;
          margin: 20px 0 0 20px;
        }
        i {
          height: 32px;
          font-size: 28px;
          font-weight: bold;
          color: rgba(61, 64, 71, 1);
          line-height: 32px;
          margin-top: 12px;
          display: block;
          margin-left: 20px;
        }
      }
      .header_info {
        height: 52px;
        background: rgba(245, 247, 250, 1);
        border-radius: 0px 0px 8px 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        .left {
          width: 50%;
        }
        .right {
          width: 50%;
        }
        span {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(7, 122, 236, 1);
          line-height: 20px;
          letter-spacing: 1px;
        }
      }
    }
  }
  .box {
    padding: 0 16px;
    .list {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      margin-top: 16px;
      padding: 16px;
      &:first-child {
        margin-top: 74px;
      }
      .list_title {
        display: flex;
        align-items: center;
        .title {
          height: 22px;
          font-size: 16px;
          font-weight: 500;
          color: rgba(61, 64, 71, 1);
          line-height: 22px;
        }
        .arrow_right {
          margin-left: auto;
          color: #e4e4e6;
        }
      }
      p {
        display: flex;
        align-items: center;
        margin-top: 6px;
        height: 18px;
        font-size: 13px;
        color: rgba(149, 152, 158, 1);
        line-height: 18px;
        i {
          font-style: normal;
          margin-left: auto;
        }
      }
    }
  }
}
</style>