<template>
  <view class="centenr">
    <view class="vip-top">
      <view class="t-right">储值卡 <u-icon name="arrow-down-fill" color="#fff" size="12"></u-icon> </view>
      <view class="t-title">当前余额（元）</view>
      <view class="t-num">{{cardBalance.cardBalance || 0}}</view>
    </view>
    <view class="vip-title">
      <view class="">{{storeName || "--"}}</view>
      <!-- <image src="../../static/new/qh.png" style="width: 18px; height: 18px;" @click="show = true"></image> -->
    </view>
    <view class="input-box">
      <view class="i-title">充值金额</view>
      <view class="n_input">
        <input type="text" v-model="rechargeOrder.balance" :disabled="isEdit">
        <view class="r-title">
          {{staff.realName || "--"}}
        </view>
      </view>
    </view>
    <view class="wrap_box">
      <view class="w_box" v-for="(item,index) in rechargeList" :key="index" @click="setIndex(index,item)"
            :class="{ 'acvit' :windex  == index}">
        <view class="">充{{item.rechargeBalance}}元</view>
        <view class="">赠{{item.giftBalance}}元</view>
      </view>
      <view class="w_box" @click="setIndex(rechargeList.length)"
            :class="{ 'acvit' :windex  == rechargeList.length}">
        <view class="" style="line-height: 40px;">自定义金额</view>
      </view>
    </view>
    <view class="input-box">
      <view class="i-title">赠送金额</view>
      <view class="n_input">
        <input type="text" v-model="rechargeOrder.giftBalance" disabled>
      </view>
    </view>
    <view class="input-box">
      <view class="i-title">充值备注</view>
      <view class="b_input">
        <input type="text" v-model="rechargeOrder.remark">
      </view>
    </view>
    <view class="title-box">
      <view class="i-title">充值有礼</view>
      <view class="i-text" v-for="(item,index) in describe" :key="index">{{item.discountActiveDescribe}}</view>
    </view>
    <view class="k-box">
      <view class="i-title">充值规则</view>
      <view class="i-text" v-if="describe.length>0">活动时间：{{describe[0].time}}</view>
      <view class="i-text" v-else>暂无规则</view>
    </view>

    <view style="width: 100%; height: 88px; "></view>
    <view class="bottom_">
      <view class="anniu_" @click="goRecharge()">
        立即充值{{rechargeOrder.balance}}元
      </view>
    </view>
    <u-popup :show="show" :closeable="true" :round="10" mode="bottom" @close="close">
      <view class="_tbox">
        <view class="_btop">选择油站</view>
        <view class="input_sou">
          <input type="text" placeholder="请输入油站" />
          <u-icon name="search" size="18px"></u-icon>
        </view>
        <view class="h_box" v-for="(item,index) in 4" :key="index">
          <view class="">测试A店</view>
          <view class="">129.9km</view>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
import request from '../../utils/request'
export default {
  data() {
    return {
      show: false,
      windex: 0,
      storeId: uni.getStorageSync("storeId"),
      storeName: "",
      // 充值信息列表
      rechargeList: [],
      // 员工列表
      staffList: [],
      staff: {},
      query: {
        chainStoreId: uni.getStorageSync("chainStoreId"),
        couponType: '',
        useStatus: 0,
        pageNo: 1,
        pageSize: 10
      },
      cardBalance: {},
      rechargeOrder: {
        payType: uni.getStorageSync("appltType"),
        mtStaffId: '',
        id: '',
        storeId: uni.getStorageSync("storeId"),
        chainStoreId: uni.getStorageSync("chainStoreId"),
        cardRecordId: '',
        balance: 0,
        types: 0
      },
      isEdit: true,
      describe: [],
      // 小程序类型 微信 WECHAT 支付宝 ALIPAY
      appltType: uni.getStorageSync("appltType"),
    }
  },
  onShow() {
    this.getList()
    this.getUserBalance()
    this.getDescribe()
  },
  methods: {
    // 调用充值接口
    goRecharge() {
      let _this = this
      request({
        url: 'business/marketingActivity/cardValueRecord',
        method: 'post',
        data: this.rechargeOrder,
      }).then(res => {
        if (res.code === 200) {
          if (_this.appltType == "WECHAT") {
            if (!res.data.reservedPayInfo) {
              uni.showToast({
                title: '支付失败，请联系商家',
                icon: "none"
              })
              return;
            }
            let payProvider = "wxpay"
            _this.orderInfo = JSON.parse(res.data.reservedPayInfo);
            uni.requestPayment({
              // 微信支付provider: 'wxpay' 支付宝支付 'alipay'
              provider: payProvider,
              timeStamp: _this.orderInfo.timeStamp,
              nonceStr: _this.orderInfo.nonceStr,
              package: _this.orderInfo.package,
              signType: 'MD5',
              paySign: _this.orderInfo.paySign,
              success: function(res) {
                console.log('success:', res);
                uni.reLaunch({
                  url: '/pagesRefuel/orderSuccess/index'
                })
              },
              fail: function(err) {
                request({
                  url: "business/marketingActivity/cardValueRecord/changeOrderPayStatus",
                  method: 'post',
                  data: {
                    "orderNo": res.data.orderNo,
                    "status": "payFail"
                  },
                }).then((res) => {})
                uni.showToast({
                  title: "支付失败!",
                  icon: "error"
                })
                // console.log('fail:', err);
              }
            });
          }
        }
        if (_this.appltType == "ALIPAY") {
          if (!res.data.reservedTransactionId) {
            uni.showToast({
              title: '支付失败，请联系商家',
              icon: "none"
            })
            return;
          }
          my.tradePay({
            tradeNO: res.data.reservedTransactionId
          }, function(resp) {
            if (resp.resultCode == '9000') {
              console.log("支付成功")
              uni.reLaunch({
                url: '/pagesRefuel/orderSuccess/index'
              })
            } else {
              request({
                url: "/business/marketingActivity/cardValueRecord/changeOrderPayStatus",
                method: 'post',
                data: {
                  "orderNo": res.data.orderNo,
                  "status": "payFail"
                },
              }).then((res) => {})
              uni.showToast({
                title: "支付失败!",
                icon: "error"
              })
              console.log('支付失败，' + resp.resultCode);
            }
          });
        }
      })
    },
    // 获取充值活动描述信息
    getDescribe() {
      request({
        url: "/business/marketingActivity/cardValue/appletList",
        method: 'get',
        params: {
          storeId: this.storeId,
          isonline: '0',
          activeStatus: "1"
        },
      }).then((res) => {
        this.describe = res.data
      })
    },
    // 获取列表信息
    getList() {
      request({
        url: "/business/marketingActivity/cardValue/appletL",
        method: 'get',
        params: {
          storeId: this.storeId
        },
      }).then((res) => {
        this.storeName = res.data.storeName
        this.rechargeList = res.data.cardValueList
        if (res.data.cardValueList && res.data.cardValueList.length > 0) {
          this.rechargeOrder.balance = res.data.cardValueList[0].rechargeBalance
          this.rechargeOrder.payAmount = res.data.cardValueList[0].rechargeBalance
          this.rechargeOrder.bidBalance = res.data.cardValueList[0].bidBalance
          this.rechargeOrder.rechargeBalance = res.data.cardValueList[0].rechargeBalance
          this.rechargeOrder.giftBalance = res.data.cardValueList[0].giftBalance
          this.rechargeOrder.id = res.data.cardValueList[0].id
        }
        this.staffList = res.data.staffList
        this.staff = res.data.staff
      })
    },
    getUserBalance() {
      request({
        url: '/business/userManager/user/getUserBalanceApplet',
        method: 'get',
        params: this.query
      }).then(res => {
        if (res.code == 200) {
          this.cardBalance = res.data
        }
      })
    },
    close() {
      this.show = false
    },
    setIndex(index, data) {
      this.windex = index
      if (index != this.rechargeList.length) {
        this.rechargeOrder.balance = data.rechargeBalance
        this.rechargeOrder.payAmount = data.rechargeBalance
        this.rechargeOrder.bidBalance = data.bidBalance
        this.rechargeOrder.rechargeBalance = data.rechargeBalance
        this.rechargeOrder.giftBalance = data.giftBalance
        this.rechargeOrder.id = data.id
      } else {
        this.rechargeOrder.balance = 0
        this.rechargeOrder.payAmount = 0
        this.rechargeOrder.bidBalance = 0
        this.rechargeOrder.rechargeBalance = 0
        this.rechargeOrder.giftBalance = 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
.centenr {}

.vip-top {
  width: 95%;
  height: 90px;
  background: url('../../static/imgs/topback.png') no-repeat;
  background-size: 100% 100%;
  margin: 15px auto;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  box-sizing: border-box;
  padding: 10px;
}

.t-right {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
}

.t-title {
  font-size: 14px;
  color: #FFFFFF;
  margin-bottom: 5px;
}

.t-num {
  font-size: 20px;
  color: #FFFFFF;
}

.vip-title {
  width: 95%;
  margin: 15px auto;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #333333;
}

.n_input {
  width: 95%;
  height: 40px;
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 10px;
}

.b_input {
  width: 95%;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #EEEEEE;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-box {
  width: 95%;
  margin: 15px auto;
}

.title-box {
  border-top: 1px solid #EEEEEE;
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  padding: 15px 10px;
}

.bottom_ {
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #fff;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap_box {
  width: 95%;
  margin: 15px auto;
  display: flex;
  flex-wrap: wrap;

}

.w_box {
  width: 31%;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
  text-align: center;
  color: #333333;
  box-sizing: border-box;
  padding: 5px;
  font-size: 14px;
  margin-bottom: 15px;
  margin-right: 1%;
}

.anniu_ {
  width: 80%;
  height: 35px;
  background: #FF9655;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50px;
  color: #fff;
}

.i-title {
  font-weight: 600;
  font-size: 14px;
  color: #333333;
  margin-bottom: 15px;
}

.k-box {
  width: 100%;
  box-sizing: border-box;
  padding: 15px 10px;
}

.acvit {
  background: #FF9655 !important;
  color: #fff !important;
}

.r-title {
  border-left: 1px solid #eee;
  width: 60px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333333;

}

._tbox {
  border-radius: 10px;
  background: #fff;
  width: 100%;


}

._btop {
  box-sizing: border-box;
  padding: 15px;
  border-bottom: 1px solid #EEEEEE;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: #333333;
}

.input_sou {
  width: 95%;
  border: 1px solid #EEEEEE;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 15px auto;
}

.h_box {
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  padding: 5px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>