<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>
      <button v-if="showpay" @click="pay">立即支付</button>
      <button v-if="showSelect" @click="searchResult">查询支付结果</button>
      <button v-if="isGo" @click="goMyInfo">返回个人中心</button>

    </h-content>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      name: '',
      url: '',
      info: {
        order_number: '',
        pay_amount_name: '',
        order_date: '',
        orderamount: '',
        order_id: '',
      },
      showSelect: false,
      showpay: true,
      isSuccess: false,
      isFaild: false,
      isGo: false,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      console.log(1111111)
      vm.showSelect = false
      vm.showpay = true
      vm.isSuccess = false
      vm.isFaild = false
      vm.isGo = false
      vm.name = from.name
      vm.url = vm.$route.params.url
    })
  },
  methods: {
    changePage () {
      this.$router.push({
        name: 'MyInfo',
      })
    },
    pay () {
      let vm = this
      cordova.InAppBrowser.open(this.url, '_blank', 'location=yes')
      // window.open(this.url)
      setTimeout(() => {
        vm.showSelect = true
        vm.showpay = false
      }, 3000)
    },
    goMyInfo () {
      this.$router.push({
        name: 'MyInfo',
      })
    },
    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.isGo = true
          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 {
            vm.isSuccess = true
            vm.isFaild = false
            hlsPopup.showLongCenter('交易成功')
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less">
#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;
    align-items: center;
    flex-wrap: wrap;
  }
  button {
    color: #fff;
    background-color: @headerColor;
    width: 50%;
    height: 40px;
    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;
      }
    }
  }
  .content {
    background-color: #fff;
  }
}
</style>
