<template>
  <view class="page-container">
    <view class="recharge-header-bg">
      
    </view>
    <view class="status-bar"></view>
    <view class="page-header">元宝充值</view>
    <view class="recharge-header-content justify-between">
      <view>
		  <view class="text">元宝套餐充值</view>
		  <view class="sub-text">购买元宝 畅享极品AV</view>
	  </view>
	  <image src="/static/images/recharge.png" mode="widthFix">
    </view>
    <view class="recharge-box">
      <view class="package justify-around">
        <view v-for="(item, index) in data.list" :key="index" class="package-item" @click="onSelect(item.recharge_id)">
          <view class="packages-box" :class="item.recharge_id == id && 'selected'">
            <view class="package-title">{{item.recharge_name}}</view>
            <view class="package-price">
              <text>¥</text>{{item.recharge_price}}
            </view>
            <text v-if="item.recharge_selected === 1" class="package-recommend">推荐</text>
          </view>
        </view>
      </view>
    </view>
    <view class="recharge-payway">
      <view class="payway-title justify-between">
        <text class="title">支付方式</text>
        <navigator url="/pages/user/pay-help" hover-class="none" class="align-center">
          <uni-icons type="help" color="#9999a2" size="20"></uni-icons>
          <text>充值帮助</text>
        </navigator>
      </view>
      <radio-group v-if="data.paylist" @change="paySelect">
        <view v-if="data.paylist.length <= 1" class="payway-item flex-row">
          <image src="/static/images/online-payment.png" mode="widthFix" class="payway-icon" />
          <view class="payway-content">
            <view class="payway-name">在线支付</view>
            <view class="payway-extend">暂无可用支付方式，请选择客服支付！</view>
          </view>
          <view class="line"><u-line /></view>
        </view>
        <view v-for="(item, index) in data.paylist" :key="index" class="payway-item flex-row">
          <image :src="item.id === 'manual' ? '/static/images/customer-service.png' : '/static/images/online-payment.png'" mode="widthFix" class="payway-icon" />
          <view class="payway-content">
            <view class="payway-name">{{item.name}}</view>
            <view v-if="item.remarks" class="payway-extend">
              <text>
                {{item.remarks}}
              </text>
            </view>
          </view>
          <label>
            <radio :value="item.id" color="#DA2538" :checked="payid === item.id" />
          </label>
          <view class="line"><u-line /></view>
        </view>
      </radio-group>
    </view>
    <u-button shape="circle" :disabled="loading" :loading="loading" color="linear-gradient(90deg, #DA2538 0%, #F75F68 100%)" text="确认充值" class="pay-button" @click="pay"></u-button>
    <navigator url="/pages/user/pay-record" hover-class="none" class="record-button">订单查询</navigator>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      data: {},
      id: 0,
      payid: '',
      payShow: false,
      loading: false
    }
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    getData() {
      user.Bullion().then(res => {
        if (res.code == 1) {
          this.data = res.data
          this.id = res.data.selected
          this.payid = res.data.pay_id
        }
      })
    },
    async pay() {
      if (this.id === 0) {
        uni.showToast({
          icon: 'none',
          title: '请选择要支付的类型~!',
          duration: 3000
        })
        return
      }
      if (this.payid === '') {
        uni.showToast({
          icon: 'none',
          title: '请选择要支付的方式~!',
          duration: 3000
        })
        return
      }
      this.loading = true
      await user.payOrder(this.id, this.payid, 'bullion').then(res => {
        if (res.code === 1) {
          uni.showModal({
            title: '支付提示',
            confirmText: '已支付',
            confirmColor: '#fd6202',
            content: '支付成功后，VIP会在5分钟内生效。如遇服务器拥堵，VIP生效可能会有延迟，请耐心等待，可退出APP重新进入查看VIP生效情况。若超过30分钟仍未到账，请及时联系小编进行处理！',
            success: (res) => {
              if (res.confirm) {
                this.back()
              }
            }
          })
          if (res.data.url) {
            this.openApp(res.data.url)
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg,
            duration: 3000
          })
        }
      }).catch(e => {})
      this.loading = false
    },
    onSelect(id) {
      this.id = id
    },
    paySelect(e) {
      this.payid = e.detail.value
    }
  }
}
</script>
<style lang="scss">
.page-container {
  padding-bottom: 20px;
  background-color: $uni-bg-color;
  position: relative;
  .recharge-header-bg {
    width: 100%;
	height: 247px;
    text-align: right;
    background-color: #1F2126;
    position: absolute;
    left: 0;
    top: 0;
    uni-image {
      width: 113px;
      height: 184px;
	  position: absolute;
	  right: 0;
	  top: 150px;
    }
    .header-bg-upper {
      position: absolute;
      bottom: -30px;
	  z-index: 99;
      width: 100%;
	  border-top-right-radius: 10px;
	  border-top-left-radius: 10px;
      height: 30%;
	  margin-top: 30%;
      background: linear-gradient(180deg, $uni-bg-color 0%,$uni-bg-color 100%);
    }
  }
  .page-header {
    height: 44px;
    line-height: 44px;
	// margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .recharge-header-content {
    padding: 0px 10px 0px 30px;
    z-index: 1;
	position: relative;
    align-items: center;
	uni-image {
		width: 175px;
		height: 176px;
	}
    .text {
      font-size: 24px;
      font-weight: 700;
      color: #F5E5CD;
    }
    .sub-text {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #F5E5CD;
    }
  }
  .recharge-box {
    width: 100%;
    min-height: 170px;
    padding: 15px;
    z-index: 99;
    .package {
      flex-wrap: wrap;
      .package-item {
        width: 33%;
        max-width: 150px;
        padding: 10px;
        .packages-box {
          padding: 20px 10px 10px;
          border-radius: 10px;
          border: 1px solid #e3cbbd;
          position: relative;
		  background-color: #f1f1f1;
          &.selected {
            // background: url('/static/images/package-bg.png') right bottom no-repeat #fff9e7;
            background-size: 150px auto;
			background-color: #EEDABC;
          }
          .package-title {
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            color: #1a1a2a;
          }
          .package-price {
            width: 100%;
            text-align: center;
            margin-top: 5px;
            font-size: 26px;
            font-weight: 500;
            color: #714415;
            uni-text {
              font-size: 14px;
            }
          }
          .package-recommend {
			  
			  width: 49px;
			  height: 22px;
			  background: #56585A;
			  border-radius: 11px 0px 11px 0px;
			  
			  
            line-height: 22px;
            font-size: 12px;
            color: #FFE8CE;
            text-align: center;
            position: absolute;
            top: -1px;
			left: 0;
          }
        }
      }
    }
  }
  .recharge-payway {
    padding: 0 15px;
    .payway-title {
      align-items: center;
      .title {
        font-size: 18px;
        font-weight: 500;
        color: #fff;
      }
      uni-navigator {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #9999a2;
      }
    }
    .payway-item {
      margin-top: 20px;
      flex-wrap: wrap;
      .payway-icon {
        width: 40px;
        height: 40px;
      }
      .payway-content {
        flex: 1 1 0%;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .payway-name {
          font-size: 15px;
          font-weight: 700;
          color: #fff;
        }
        .payway-extend {
          margin-top: 5px;
          font-size: 12px;
          line-height: 20px;
          font-weight: 400;
          color: #91919b;
        }
      }
      .line {
        width: 100%;
        margin-top: 15px;
        padding-left: 50px;
      }
      &:last-child .line {
        display: none;
      }
    }
  }
  .pay-button {
    width: auto;
    margin: 30px 15px 0;
  }
  .record-button {
    margin: 10px 15px 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #ebedf0;
	color: #fff;
    border-radius: 20px;
  }
}
</style>
