<template>
  <view class="balance-container">
    <view class="balance-info flex align_center justify_between">
      <view class="balance-item flex flex_column align_center justify_center" 
	  v-for="(item,index) in balanceList" 
	  :key="index"
	  @tap="viewRecord(item)"
	  >
        <text class="balance-amount">{{ item.value }}</text>
		<text>{{ item.label }}</text>
      </view>
    </view>
    
    <view class="recharge-options">
      <view 
        class="recharge-option flex justify_between" 
        v-for="(opt,idx) in rechargeOptions" 
        :key="idx"
      >
        <view class="recharge-val flex align_center justify_center">
			<text>¥{{ opt.rechargeAmount }}</text>
		</view>
        <view class="recharge-option-content flex_1">
			<view><text class="gift-text">充值{{ opt.rechargeAmount }}元送{{ opt.giveAmount }}元抵扣</text></view>
			<view class="gift-remark">{{opt.remarks}}</view>
		</view>
		<view class="recharge-btn flex align_center justify_center" @tap="handleRecharge(opt)">
			<text>去充值</text>
			<uni-icons type="arrowright" size="16"></uni-icons>
		</view>
      </view>
    </view>
	
	<!-- 付款弹框 -->
	<payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :payData="payData" @close="showPopu=false" @payComplete="payComplete"></payModal> 
  </view>
</template>

<script>
import {rechargeDetail,rechargeList,createRechargeOrder} from '../../api/recharge.js'
import {storeAccount} from '@/api/user.js'
import { purchasePay } from '@/api/purchase.js'
import {
	    mapState,
	    mapMutations,
	} from 'vuex'
import payModal from '../components/czPayModal.vue'
export default {
  components:{ payModal },
  data() {
    return {
		  showPopu:false,
		  info: null,
		  payData: null,
		  balanceList: [
			{ id:0,label: '充值余额', value: '0' },
			{ id:1,label: '抵扣余额', value: '0' }
		  ],
		  rechargeOptions: [],
    }
  },
  computed: {
  	...mapState(['hasLogin']),
  	// 登录用户信息
  	userInfo(){
  		return this.$store.state.vuex_userInfo
  	},
  	// 货架经销商信息
  	shelfInfo(){
  		return this.$store.state.vuex_storeShelf
  	},
  	// 经销商电话
  	dealerPhone(){
  		const shelfInfo = this.shelfInfo
  		return shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
  	},
  	// 付款信息
  	payInfo(){
  		return this.$store.state.vuex_tempOrderData
  	},
	storeAccount(){
		return this.$store.state.vuex_storeAccount
	},
  },
  onShow() {
	  this.getStoreAccount()
	  this.getList()
  },
  methods: {
	  // 抵扣余额
	  getStoreAccount(){
		storeAccount({storeSn:this.shelfInfo.storeSn}).then(res => {
			this.$store.state.vuex_storeAccount = res.data
			this.balanceList[0].value = res.data.rechargeBalance
			this.balanceList[1].value = res.data.giveBalance
			this.balanceList.splice()
		})
	  },
	getList(){
		rechargeList({dealerSn:this.shelfInfo.dealerSn}).then(res => {
			this.rechargeOptions = res.data||[]
		})
	},
	// 消费记录
	viewRecord(item){
		uni.navigateTo({
			url:'/pagesB/transactionRecord/transactionRecord?type='+item.id
		})
	},
	// 充值
    handleRecharge(info) {
      this.info = info
	  uni.showLoading({
	  	title:'加载中...'
	  })
	  createRechargeOrder({
		  rechargeRuleSn: info.rechargeRuleSn,
		  rechargeAmount:info.rechargeAmount,
		  giftAmount:info.giveAmount,
		  dealerSn:this.shelfInfo.dealerSn,
		  shelfSn:this.shelfInfo.shelfSn,
		  customerSn:this.userInfo.userSn,
		  storeSn:this.shelfInfo.storeSn,
	  }).then(res =>{
		  if(res.status == 200){
			  purchasePay({
					bizSn:res.data.rechargeSn,
					bizNo:res.data.rechargeNo,
					bizType:'RECHARGE_BILL',
					payUserOpenId: this.$store.state.vuex_openid || uni.getStorageSync('openid')
				}).then(ret=>{
					if(ret.status == 200){
						this.showPopu = true
						this.payData = res.data?res.data.payRequestRest:null
					}
					setTimeout(()=>{
						uni.hideLoading()
					},300)
					uni.showToast(res.message)
				})
		  }else{
			  setTimeout(()=>{
				uni.hideLoading()
			  },300)
			  uni.showToast(res.message)
		  }
	  })
    },
	payComplete(item,isOk){
		this.showPopu = false
		if(isOk){
			this.getStoreAccount()
			this.message('支付成功')
		}
	}
  }
}
</script>

<style lang="less">
.balance-container {
  padding: 0;
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .balance-info {
	background: linear-gradient(to bottom, #03A9F4, #2196F3);
	padding: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(30, 144, 255, 0.5);
	margin: 10px;
	border-radius: 10px;
    
    .balance-item {
      width: 50%;
	  color: #fff;
      &:last-child {
        border: none;
      }
      
      .balance-amount {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
		margin-bottom: 2px;
      }
    }
  }
  
  .recharge-options {
    padding: 24rpx;
    flex-grow: 1;
	overflow-y: auto;
    .recharge-option {
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
      .recharge-option-content{
		  padding: 20rpx;
		  line-height: 1.8;
	  }
      .gift-text {
        color: #333;
        font-size: 28rpx;
      }
	  .recharge-val{
		  font-size: 16px;
		  color: whitesmoke;
		  background: #ff5722;
		  padding: 20rpx;
		  width: 150rpx;
	  }
	  .recharge-btn{
		  color: #1e90ff;
		  font-size: 24rpx;
		  padding: 0 20rpx 0 0;
	  }
	  .gift-remark{
		  color: #999;
		  font-size: 24rpx;
	  }
    }
    
    .custom-recharge {
      padding: 28rpx;
      background: #fff;
      border-radius: 12rpx;
      color: #1e90ff;
    }
  }
}
</style>
