<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 flex_column" 
        v-for="(opt,idx) in rechargeOptions" 
        :key="idx"
      >
        <view class="flex justify_between align_center">
			<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>
			<view class="recharge-btn flex align_center justify_center" @tap="handleRecharge(opt)">
				<text>去充值</text>
			</view>
		</view>
		<view class="gift-remark" v-if="opt.remarks">{{opt.remarks||''}}</view>
      </view>
    </view>
	
	<!-- 付款弹框 -->
	<payModal :showPopu="showPopu" :shelfInfo="shelfInfo" :payInfo="info" :dealerPhone="dealerPhone" :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
	},
	//是否开启线上支付,支付方式不是线下支付
	hasPay(){
		const shelfInfo = this.shelfInfo
		return shelfInfo&&shelfInfo.payOnlineFlag&&shelfInfo.payOnlineFlag=='1'
	},
  },
  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 = Number(res.data.rechargeBalance||0).toFixed(2)
			this.balanceList[1].value = Number(res.data.giveBalance||0).toFixed(2)
			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) {
	  if(!this.hasPay){
		  uni.showModal({
		  	okText:'去联系经销商',
		  	cancelText:'取消',
		  	title:'提示',
		  	content:'未开启线上支付，请联系经销商',
		  	success:(res)=>{
		  		if(res.confirm){
		  			uni.makePhoneCall({
		  				phoneNumber:this.dealerPhone
		  			})
		  		}
		  	}
		  })
		  return
	  }
      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 = ret.data?ret.data.payRequestRest:null
					}
					setTimeout(()=>{
						uni.hideLoading()
					},300)
					uni.showToast({
						title: ret.message,
						icon: 'none'
					})
				})
		  }else{
			  setTimeout(()=>{
				uni.hideLoading()
			  },300)
			  uni.showToast({
					title: res.message,
					icon: 'none'
			  })
		  }
	  })
    },
	payComplete(item,isOk){
		this.showPopu = false
		if(isOk){
			this.getStoreAccount()
			uni.showToast({
				title: '支付成功',
				icon: 'none'
			})
		}
	}
  }
}
</script>

<style lang="less">
.balance-container {
  padding: 0;
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .balance-info {
	background: #fff;
	box-shadow: 0 4rpx 12rpx rgba(30,144,255,0.1);
	padding: 20rpx;
	margin: 10px;
	border-radius: 10px;
    .balance-item {
      width: 50%;
	  color: #000;
      &:last-child {
        border: none;
      }
      
      .balance-amount {
        color: #333;
        font-weight: bold;
        font-size: 20px;
		margin-bottom: 2px;
      }
    }
  }
  
  .recharge-options {
    padding: 20rpx 24rpx 40rpx;
    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);
	  > view{
		  &:first-child{
			  min-height: 60px;
		  }
	  }
      .recharge-option-content{
		  padding: 20rpx;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
	  }
      .gift-text {
        color: #333;
        font-size: 26rpx;
      }
	  .recharge-val{
		  font-size: 16px;
		  color: red;
		  padding: 20rpx;
		  width: 180rpx;
		  border-right: 1px dashed #fbdbd1;
	  }
	  .recharge-btn{
		  font-size: 24rpx;
		  padding: 0 20rpx 0 0;
		  text{
			  display: block;
			  padding:5px 10px;
			  border-radius: 100px;
			  background-color: #ff5500;
			  color: #fff;
		  }
	  }
	  .gift-remark{
		  color: #999;
		  font-size: 24rpx;
		  padding: 10rpx 20rpx;
		  border-top: 1px dashed #fbdbd1;
		  line-height: 1.8;
	  }
    }
    
    .custom-recharge {
      padding: 28rpx;
      background: #fff;
      border-radius: 12rpx;
      color: #1e90ff;
    }
  }
}
</style>
