<template>
  <div class="pay-wrap">
    <tabs class="wrap-relative">
      <tab-content>
        <div class="wrap-relative">
          <div class="top-user__wrap">
            <div class="chapter-cost" if="fee">
              <text>当前需要消耗：</text>
              <text class="cost">{{ fee }}</text>
              <text>书币</text>
            </div>
            <div class="user-balance">
              <text>您的余额：</text>
              <text class="balance">{{ balance }}</text>
              <text>书币</text>
            </div>
          </div>
          <div class="charge-wrap">
            <div class="title">
              <text class="border"></text>
              <text>支付方式</text>
            </div>
            <div class="pay-type">
              <block for="item in payType">
                <div
                  class="pay-type__item {{curPayType === item.value ? 'pay-type__item--cur' : ''}}"
                  @click="changePayType(item)"
                >
                  <image src="{{item.icon}}"></image>
                  <text>{{ item.name }}</text>
                </div>
              </block>
            </div>
            <div class="recharge-list">
              <block for="charge in rechargeList">
                <stack class="stack-wrap" @click="changeCharge($idx)">
                  <div
                    class="recharge-item {{curSelect === $idx ? 'recharge-item__select' : ''}}"
                  >
                    <text
                      class="price {{curSelect === $idx ? 'price__select' : ''}}"
                      >{{ charge.price }}</text
                    >
                    <text
                      class="send {{curSelect === $idx ? 'send__select' : ''}}"
                      >{{ charge.text }}</text
                    >
                    <div
                      class="discount {{curSelect === $idx ? 'discount__select' : ''}}"
                      if="charge.save_text"
                    >
                      <block if="!charge.is_year_order">
                        <text>送</text>
                      </block>
                      <block else>
                        <image src="../../assets/imgs/year_pay.png"></image>
                      </block>
                      <text
                        class="discount-num {{curSelect === $idx ? 'discount-num__select' : ''}}"
                        >{{ charge.save_text }}</text
                      >
                    </div>
                  </div>
                  <image
                    if="charge.today_special"
                    class="recharge-recommend"
                    src="../../assets/imgs/jinri.png"
                  ></image>
                </stack>
              </block>
            </div>
          </div>
          <div class="notice-wrap">
            <text class="title">提示：</text>
            <text class="notice-item">1.充值后书币到账可能有延迟，1小时内未到账请到个人中心联系客服</text>
            <text class="notice-item"
              >2.未满18周岁的未成年人应在法定监护人同意后进行充值。</text
            >
            <text class="notice-item"
              >3.充值书币，鉴于网络服务性质特殊属于不宜退货商品,不适用无理由退换规定。</text
            >
          </div>
        </div>
      </tab-content>
    </tabs>
    <div class="wrap-fixed">
      <image src="../../assets/imgs/shadow.png" class="shadow"></image>
      <div class="total-wrap">
        <text class="go-to-pay" @click="toPay">立即充值</text>
      </div>
    </div>
    <div class="loading-wrap" if="showLoading">
      <div class="loading-content">
        <progress type="circular"></progress>
        <text class="loading-text">{{ loadingText }}</text>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@system.router'
import prompt from '@system.prompt'
import storage from '@system.storage'

import { getChargeList, getUserInfo, checkWxOrder,advertOrders,getBannerData } from '../../api'
import { configWxPay, configAliPay } from '../../helper'
import { getAppConfig } from '../../api/utils.js'
let getConfig

export default {
  public: {
    push_id: ''
  },
  protected: {
    bid: '',
    code: '',
    fee: ''
  },
  private: {
    pay_back: 0,
    curPayType: 2,
    curSelect: 0,
    balance: 0,
    send_order_id: 0,
    total: '0元',
    loadingText: '订单查询中...',
    isInPay: false,
    showLoading: false,
    checked: false,
    loginPhone: '',
    need_check_order:false,
    haslogin: '',
    isVip: '',
    pay_order_id:"",
    trade_no:"",
    pay_success:false,
    last: null,
    payType: [
      {
        name: '支付宝',
        icon:
          'http://newycsd.oss-cn-hangzhou.aliyuncs.com/images/base/logo/zhifubao.jpg',
        value: 1
      },
      {
        name: '微信',
        icon:
          'http://newycsd.oss-cn-hangzhou.aliyuncs.com/images/base/logo/weixin.jpg',
        value: 2
      }
    ],
    rechargeList: []
  },
  //函数节流
  throttle(fun, delay) {
    let last = this.last
    const now = +new Date()
    if (now - last > delay) {
      fun()
      this.last = now
    } else {
      console.log('间隔太短了')
    }
  },
  changePayType(type) {
    this.curPayType = type.value
  },
  changeCharge(key) {
    this.curSelect = key
    this.total = this.rechargeList[key].price
  },
  async getUserInfo() {
    let userinfo = await getUserInfo()
    this.balance = userinfo.balance
    this.send_order_id = userinfo.send_order_id
    this.checked = userinfo.is_check
    this.loginPhone = (await storage.get({ key: 'loginPhone' })).data
    this.haslogin = (await storage.get({ key: 'hasLogin' })).data
    this.isVip = userinfo.is_vip
    if (userinfo.pay_mode_default == 'weixin') {
      this.curPayType = 2
    } else {
      this.curPayType = 1
    }
  },
  async initChargeList() {
    this.rechargeList = await getChargeList()
    this.rechargeList.forEach((p, k) => {
      if (p.today_special) {
        this.curSelect = k
        this.total = this.rechargeList[k].price
      }
    })
  },
  async onInit() {
    if (this.push_id) {
      await storage.set({ key: 'push_id', value: this.push_id })
    }
    getConfig = getAppConfig(this)
    let { pay_back_alert_show } = await getConfig('task_center')
    this.pay_back = pay_back_alert_show
    this.initChargeList()
  },
  toPay() {
    if (!(this.send_order_id || (this.haslogin && this.loginPhone))) {
      prompt.showDialog({
        title: '友情提示',
        message: '您还未绑定手机号，请绑定手机号后在进行相关操作',
        buttons: [
          {
            text: '前往绑定',
            color: '#33dd44'
          }
        ],
        success: function(data) {
          router.push({
            uri: '/views/Phone'
          })
        },
        cancel: function() {
          console.log('取消绑定')
        }
      })
    } else {
      this.throttle(() => {
        this.payFunc()
      }, 1000)
    }
  },
  async payFunc() {
    let cur_pay_type = this.curPayType
    let product_id = this.rechargeList[this.curSelect].product_id
    let ret = null
    this.need_check_order = false;
    this.pay_order_id = "";
    this.trade_no = "";
    if (cur_pay_type === 1) {
      ret = await configAliPay({
        product_id: product_id,
        bid: this.bid,
        send_order_id: this.send_order_id
      })
      // console.log('al111111111111111111111111',res);
      this.trade_no = ret.order;
      this.showToastByCode(ret.code);
    } else {
      ret = await configWxPay({
        product_id: product_id,
        bid: this.bid,
        send_order_id: this.send_order_id
      })
      this.trade_no = ret.order;
      this.pay_order_id =ret.order;
      this.need_check_order = true;
      // this.back_click = 0;
      //  console.log('wx111111111111111111111',res);
      // if (fb && typeof fb === 'object')
    }
    
    // this.pay_order_id =ret.order;
    // console.log('00000000000000000',ret,"paytype d",cur_pay_type);
    return false;
    // 成功支付后的回调操作
    if (ret.code === '9000') this.showWaitingWrap(ret)
    else this.showToastByCode(ret.code)
  },
  checkOrder(order_info) {
    this.showLoading = true
    let { data, order } = order_info
    let times = 10
    this.loadingText = `订单查询中...${times}s`
    this.timer = setInterval(async () => {
      if (times === 0) clearInterval(this.timer), this.showToastByCode('6004')
      else {
        times--
        this.loadingText = `订单查询中...${times}s`
        let fb = await checkWxOrder(order)
        if (fb && typeof fb === 'object')
          clearInterval(this.timer), this.showToastByCode('9000')
      }
    }, 1000)
  },
  showWaitingWrap(order) {
    prompt.showDialog({
      title: '支付结果',
      message: '请确认支付结果',
      buttons: [
        {
          text: '已支付',
          color: '#EF5952'
        },
        {
          text: '重新选择金额',
          color: '#999'
        }
      ],
      success: data => {
        if (data.index === 0) this.checkOrder(order)
      },
      cancel: () => {
       
        console.log('cancel')
      }
    })
  
    return false;
  },
  showToastByCode(code) {
    this.showLoading = false
    this.pay_success = false;
    let msg = '支付成功！'
  
    switch (code) {
      case '9000':
        this.pay_success = true;
          try{
            advertOrders(this.trade_no);
          }catch(e){
            console.log(e);
          }
        ;(msg = '支付成功！'), router.back()
        break
      case '8000':
        msg = '订单已提交，请等待结果'
        break
      case '4000':
        msg = '订单支付失败！'
        break
      case '5000':
        msg = '订单重复！'
        break
      case '6001':
        msg = '您已取消支付'
        break
      case '6002':
        msg = '网络错误！'
        break
      case '6004':
        msg = '请联系客服查询订单'
        break
      default:
        msg = '请联系客服' + code
    }
    prompt.showToast({ message: msg })
  },
  onShow() {
    this.getUserInfo();
    if(this.need_check_order && this.pay_order_id){
        this.checkOrderNew(this.pay_order_id);
    }
  },async checkOrderNew(order){
      console.log("需要查询订单",order);
      // this.showLoading = true;
      let fb = await checkWxOrder(order);
      console.log('查询结果：',fb);
      if (fb && typeof fb === 'object'){
        this.showToastByCode('9000')
      }else{
        this.showToastByCode('6001')
      }
  },
  onHide() {
    //this.$app.$def.createShortcut(true);
  },onBackPress(){
    if (this.pay_back && !this.pay_success) {
        this.getActivity();
        return true;
    }else{
      this.getLastpage();  
    }
    return true;
  },async getActivity(){
      // let back = await getBannerData(5);
      // console.log(back,JSON.stringify(back) === "{}",JSON.stringify(back));
      let back = [];
      if(JSON.stringify(back) === "{}" || JSON.stringify(back) === "[]"){
        console.log('000000000000000000000');
        let taht = this;
        prompt.showDialog({
          title: '温馨提示',
          message: '每日完成任务，可以免费获取书币~',
          buttons: [
            {
              text: '去做任务',
              color: '#EF5952'
            },
            {
              text: '我知道了',
              color: '#999'
            }
          ],
          success: function(data) {
            if (data.index === 1) {
              taht.getLastpage();
            } else {
              router.push({
                uri: '/views/Task'
              })
            }
          },
          cancel: function() {
            console.log('取消前往')
          }
        })
      }else{
        router.push({
          uri: back.redirect_url,
          params:back.param
        })
      }
      return true;
  },getLastpage(){
    let backPage = {};
      try{
        let page = router.getState();
        let allPage = router.getPages();
     
        console.log('page = ',page,'all pages',allPage,'length',allPage.length);
        for(var k = allPage.length -1; k >=  0;k--){
          if(allPage[k].name != page.name && allPage[k].name != "views/Phone"){
            backPage = allPage[k];
            break;
          }
        }
      } catch(e){
        backPage = {};
        // console.log('back err',e);
      }
      console.log(backPage,backPage.length,typeof backPage);
      if(JSON.stringify(backPage) === '{}'){
         router.replace({ uri: "/views/Index" });
      }else{
        router.back(backPage);
      }
    return true;
  },
  onBackPressOld() {
    if (this.pay_back) {
      prompt.showDialog({
        title: '温馨提示',
        message: '每日完成任务，可以免费获取书币~',
        buttons: [
          {
            text: '去做任务',
            color: '#EF5952'
          },
          {
            text: '我知道了',
            color: '#999'
          }
        ],
        success: function(data) {
          if (data.index === 1) {
            router.back()
          } else {
            router.push({
              uri: '/views/Task'
            })
          }
        },
        cancel: function() {
          console.log('取消前往')
        }
      })
      return true
    }
  }
}
</script>

<style lang="less">
@import '../../assets/less/pay.less';
</style>
