<template>
  <h-view id="pay-page" class="public-style">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="changePage" >
        <span>支付详情</span>
      </div>
    </h-header>
    <h-content class="box">
      <div v-if="isSuccess" class="my-content">
        <img class="flag" src="@/assets/payment/success.png" >
        <h3>支付成功</h3>
        <p>感谢您的还款，我们将尽快为您结清金额</p>
        <div class="info">
          <div class="left">
            <list-item :item-height="30">
              <item>
                <div slot="name" class="name">时间</div>
                <div slot="content">{{ info.order_date }}</div>
              </item>
              <item>
                <div slot="name" class="name">姓名</div>
                <div slot="content">{{ info.pay_amount_name }}</div>
              </item>
              <item>
                <div slot="name" class="name">订单号</div>
                <div slot="content">{{ info.order_number }}</div>
              </item>
              <item>
                <div slot="name" class="name">还款金额</div>
                <div slot="content">{{ info.orderamount|currency }}</div>
              </item>
            </list-item>
          </div>
        </div>
      </div>
      <div v-if="isFaild" class="my-content">
        <img class="flag" src="@/assets/payment/faild.png" >
        <h3>支付失败</h3>
        <p>对不起，支付失败，请您重新尝试！</p>
        <div class="info">
          <div class="left">
            <list-item :item-height="30">
              <item>
                <div slot="name" class="name">时间</div>
                <div slot="content">{{ info.order_date }}</div>
              </item>
              <item>
                <div slot="name" class="name">姓名</div>
                <div slot="content">{{ info.pay_amount_name }}</div>
              </item>
              <item>
                <div slot="name" class="name">订单号</div>
                <div slot="content">{{ info.order_number }}</div>
              </item>
              <item>
                <div slot="name" class="name">还款金额</div>
                <div slot="content">{{ info.orderamount|currency }}</div>
              </item>
            </list-item>
          </div>
        </div>
      </div>
      <div v-if="isShowpayInfo" class="box-wrap">
        <!-- <div class="box-top">
          <img src="@/assets/payment/bank-title.png" >
        </div>-->
        <div class="box-center">
          <list-item :item-height="44">
            <item>
              <div slot="name" class="name">订单编号</div>
              <div slot="content">{{ info.order_number }}</div>
            </item>
            <!-- <item>
              <div slot="name" class="name">付款人</div>
              <div slot="content">{{ info.pay_amount_name }}</div>
            </item>
            <item>
              <div slot="name" class="name">付款账号</div>
              <div slot="content">{{ info.pay_amount }}</div>
            </item>-->
            <!--  <item>
              <div slot="name" class="name">交易金额</div>
              <div slot="content">{{ info.orderamount|currency }}</div>
            </item>-->
            <div class="orderamount-wrap">
              <span class="orderamount-item">交易金额</span>
              <span class="orderamount-item font-color">￥ {{ info.orderamount|currency }}</span>
            </div>
            <item>
              <div slot="name" class="name">支付方式</div>
              <div slot="content">{{ text }}</div>
            </item>
          </list-item>
        </div>
        <div class="pay-btn">
          <div v-if="showpay" class="pay-btn-foot" @click="pay('')">立即支付</div>
          <div v-if="nextPay" class="pay-btn-foot" @click="pay('continue')">继续支付</div>
          <div v-if="showSelect" class="pay-btn-foot" @click="searchResult">查询支付结果</div>
          <div v-if="isGo" class="pay-btn-foot" @click="goMyInfo">返回个人中心</div>
        </div>
        <div class="description">
          <p>- 说明 -</p>
          <p>上述两种支付方式均支持借记卡和信用卡;</p>
          <p>手机K码支付需要您开通我行消息服务。</p>
          <p>掌上银行支付需要您首先开通我行掌上银行,</p>
          <p>且支付账户已添加到掌上银行;</p>
          <!-- <p>www.abchina. com</p>
          <p>全国24小时服务热线:95599</p>
          <p>中国农业银行版权所有</p>-->
        </div>
      </div>
    </h-content>
    <!-- <bottom-tab>
      <tab-button v-if="showpay" class="foot" @click.native="pay">立即支付</tab-button>
      <tab-button v-if="nextPay" class="foot" @click.native="pay">继续支付</tab-button>
      <tab-button v-if="showSelect" class="foot" @click.native="searchResult">查询支付结果</tab-button>
      <tab-button v-if="isGo" class="foot" @click.native="goMyInfo">返回个人中心</tab-button>
    </bottom-tab>-->
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      name: '',
      url: '',
      showInfo: true, // 展示支付信息
      text: this.$route.params.text,
      info: {
        order_number: '',
        pay_amount_name: '',
        order_date: '',
        orderamount: '',
        order_id: '',
        pay_amount: '',
      },
      showSelect: false,
      showpay: true,
      isSuccess: false,
      isFaild: false,
      isGo: false,
      nextPay: false,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.showSelect = false
      vm.nextPay = false
      vm.showpay = true
      vm.isSuccess = false
      vm.isFaild = false
      vm.isGo = false
      vm.name = from.name
      vm.url = vm.$route.params.url
      vm.text = vm.$route.params.text
      vm.payType = vm.$route.params.payType
      vm.getInfo()
    })
  },
  computed: {
    isShowpayInfo () {
      if (this.isSuccess ^ this.isFaild == 0) {
        return true
      } else if (this.isSuccess ^ this.isFaild == 1) {
        return false
      }
    },
  },
  methods: {
    changePage () {
      this.$router.push({
        name: 'MyInfo',
      })
    },
    pay (status) {
      let vm = this
      vm.nextPay = false
      if (status === 'continue' && vm.payType === 'ABC_UNION') { // 在银联模式下继续支付重新获取支付url,因为银联页面只能打开一次
        hlsPopup.showConfirm({
          title: '提示',
          content: '银联不支持二次支付，请重新发起支付订单',
          onConfirm: function (index) {
            if (index === 1) {
              vm.changePage()
            } else {
              vm.changePage()
            }
          },
        })
      } else {
        cordova.InAppBrowser.open(this.url, '_blank', 'location=yes')
        // window.open(this.url)
      }
      setTimeout(() => {
        vm.showSelect = true
        vm.showpay = false
      }, 3000)
    },
    getPayUrl () {
      let vm = this
      let url = process.env.basePath + 'merchant_payment'
      let param = {
        order_id: vm.$route.params.order_id,
      }
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          if (res.return_code !== '0000') {
            hlsPopup.showLongCenter(res.error_message)
          } else {
            cordova.InAppBrowser.open(res.paymentURL, '_blank', 'location=yes')
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goMyInfo () {
      this.$router.push({
        name: 'MyInfo',
      })
    },
    getInfo () {
      let vm = this
      let url = process.env.basePath + 'order_info_query'
      let param = {
        order_id: vm.$route.params.order_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.info, res.info)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getDetail () {
      let vm = this
      let url = process.env.basePath + 'order_info_query'
      let param = {
        order_id: vm.$route.params.order_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          Object.assign(vm.info, res.info)
          vm.showSelect = false
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    searchResult () {
      let vm = this
      let url = process.env.basePath + 'merchant_query_order'
      let param = {
        order_id: vm.$route.params.order_id,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.getDetail()
          if (res.return_code !== '0000') {
            vm.isFaild = true
            vm.isSuccess = false
            hlsPopup.showLongCenter(res.error_message)
          } else {
            if (res.status === '01') {
              vm.nextPay = true
              vm.isSuccess = false
              vm.isFaild = false
              hlsPopup.showLongCenter('支付未完成')
            } else if (res.status === '02') {
              vm.nextPay = true
              vm.isSuccess = false
              vm.isFaild = false
              hlsPopup.showLongCenter('支付未完成')
            } else if (res.status === '03') {
              vm.isGo = true
              vm.isSuccess = true
              vm.isFaild = false
              hlsPopup.showLongCenter('交易成功')
            } else if (res.status === '04') {
              vm.isGo = true
              vm.isSuccess = true
              vm.isFaild = false
              hlsPopup.showLongCenter('交易完成')
            } else {
              vm.isGo = true

              vm.isSuccess = false
              vm.isFaild = true
              hlsPopup.showLongCenter('交易失败')
            }
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less">
  @import "../../styles/mixin";
#pay-page {
  .payBtn {
    width: 200px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: @headerColor;
    color: #fff;
    border-radius: 6px;
  }
  .box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fafafa;
   /* .box-top {
      img {
        height: 72px;
      }
    }*/
    .box-wrap{
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .box-center{
        width: 100%;
        .orderamount-wrap{
          width: 100%;
          padding: 10px 20px 10px 0;
          margin-left: 15px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .border-bottom();
          .orderamount-item{
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
          }
          .font-color{
            color: #666;
          }
        }
      }
    }
    .description {
      width: 100%;
      height: 141px;
     /* margin: 0 auto;
      margin-top:145px;*/
     // margin-bottom: 30px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #d5d5d5;
      letter-spacing: 0;
      text-align: center;
      line-height: 18px;
      flex-flow: row wrap;
    }
    .pay-btn{
      width: 90%;
      background: @headerColor;
      height: 36px;
      font-size: 14px;
      line-height: 36px;
      text-align: center;
      color: #FFF;
      border-radius: 6px;
    }
  }
  .foot {
    color: #fff;
    background-color: #009983;
    border-radius: 5px;
  }
  .my-content {
    height: 400px;
    .flag {
      display: block;
      margin: 0 auto;
      width: 72px;
      padding-top: 48px;
    }
    h3 {
      margin: 0 auto;
      margin-top: 32px;
      width: 83px;
      font-weight: 600;
      font-family: PingFangSC-Semibold;
      font-size: 20px;
      color: #383f45;
      letter-spacing: 0.71px;
    }
    p {
      margin: 0 auto;
      margin-top: 10px;
      width: 234px;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: rgba(56, 63, 69, 0.6);
      letter-spacing: 0;
      display: flex;
      justify-content: center;
    }
    .info {
      width: 343px;
      margin: 0 auto;
      border-top: 1px solid #d9dbdf;
      margin-top: 48px;
      .name {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0.5px;
      }
      .left {
        padding-top: 10px;
      }
    }
  }
}
</style>
