<template>
  <view class="withdraw-page">
    <!-- 顶部导航栏 -->
    <custom-navbar 
      title="提现" 
      :show-back="true"
      backgroundColor="#fff"
    ></custom-navbar>
    
    <!-- 提现金额 -->
    <view class="amount-section">
      <view class="amount-header">
        <text class="amount-title">提现金额</text>
        <!-- <text class="account-bind" @click="goBindAccount">绑定提现账户</text> -->
      </view>
      <view class="input-box">
        <text class="currency">¥</text>
        <input 
          type="digit" 
          v-model="withdrawAmount" 
          :placeholder="'账户余额'+balance"
          placeholder-class="input-placeholder"
          @input="handleAmountInput"
		  class="money-inp"
        />
      </view>
	  <view class="tips-box">
        <text class="fee-tips">*当前最多每笔提现200元</text>
		<!-- <image src="/static/images/question.png"
			   mode="aspectFit"
			   class="tips-icon"
			   @click="showTipsPopup"></image> -->
	  </view>
    </view>
    
    <!-- 提现方式 -->
    <view class="method-section">
      <text class="method-title">请选择提现方式</text>
      <view class="method-list">
        <view 
          v-for="(item, index) in methodList"
          :key="item.id"
          @click="selectMethod(item)"
        >
		  <view class="method-item">
		  	<view class="method-info">
		  	  <image :src="item.icon" mode="aspectFit" class="method-icon"></image>
		  	  <text class="method-name">{{item.name}}</text>
		  	</view>
		  	<agree-radio :isAgree="item.selected"></agree-radio>
		  </view>
          <view class="ali-info" v-if="item.selected">
			<view class="info-item">
			  <text class="info-lable required">真实姓名</text>
			  <input
				class="info-inp"
				type="text"
				placeholder="请输入真实姓名"
				v-model="aliWallet.name"
				placeholder-class="info-placeholder"/>
			</view>
			<view class="info-item">
			  <text class="info-lable required">身份证号</text>
			  <input
				class="info-inp"
				type="text"
				placeholder="请输入身份证号"
				v-model="aliWallet.id"
				placeholder-class="info-placeholder"/>
			</view>
			<view class="info-item">
			  <text class="info-lable required">手机号/邮箱</text>
			  <input
				class="info-inp"
				type="text"
				placeholder="请输入手机号/邮箱"
				v-model="aliWallet.account"
				placeholder-class="info-placeholder"/>
			</view>
          </view>
        </view>
		
      </view>
    </view>
    
    
    
    <!-- 提现按钮 -->
    <view class="fixed-box">
	  <!-- 提现协议 -->
	  <view class="agreement">
	    <agree-radio :isAgree="isAgreeProtocol" @change-agree="changeAgree"></agree-radio>
	    <text class="agreement-text">提现即默认同意</text>
	    <text class="protocol-link" @click="viewProtocol(5)">《提现协议》</text>
	  </view>
      <view 
        class="fixed-btn"
        :class="{'submit-btn-disabled': !canSubmit}"
        @click="handleWithdraw"
      >
        <text class="fixed-text">提交</text>
      </view>
    </view>
	
	<!-- 提示弹框 -->
	<tips-popup :show="showTipsFlag"
				@close-popup="closePopup"></tips-popup>
  </view>

</template>

<script>
import AgreeRadio from '@/components/agree-radio/agree-radio.vue'
import TipsPopup from '@/components/tips-popup/tips-popup.vue'
import { debounce } from '@/utils/debounce.js'
import request from '../../utils/request'

export default {
  components: {
	AgreeRadio,
	TipsPopup
  },
  data() {
    return {
	  id: '',
      withdrawAmount: '',
	  artisanType: getApp().globalData.artisanType,
      isAgreeProtocol: false,
	  balance: '',
      showTipsFlag: false,
      isSubmitting: false,
	  withdrawalWay: '',
	  aliWallet: {
		name: '',
		id: '',
		account: ''
	  },
      methodList: [
        // {
        //   id: 1,
        //   name: '微信',
        //   icon: '/static/images/wechat.png',
        //   selected: true
        // },
        {
          id: 2,
          name: '支付宝',
          icon: '/static/images/alipay.png',
          selected: false
        },
        // {
        //   id: 3,
        //   name: '银行卡',
        //   icon: '/static/images/bankcard.png',
        //   selected: false
        // }
      ]
    }
  },
  computed: {
    canSubmit() {
      return this.withdrawAmount && this.isAgreeProtocol && !this.isSubmitting && this.aliWallet.name && this.aliWallet.id && this.aliWallet.account
    }
  },
  onLoad() {
	if(this.artisanType) {
	  // 创建防抖处理后的提交函数
	  this.debouncedSubmit = debounce(this.submit, 500);
	  this.getUserInfo();
	}
    
  },
  methods: {
	getUserInfo() {
	  const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : '';
	  request.post('/sj/user/getuser',{type}).then(result=>{
		this.balance = result.data.money;
		this.id = result.data.id;
	  })
	},
    // 显示提示弹框
    showTipsPopup() {
      this.showTipsFlag = true
    },
	// 关闭弹框
	closePopup(value) {
		this.showTipsFlag = false;
	},
    // 处理金额输入
    handleAmountInput(e) {
      const value = e.detail.value
      if (value.indexOf('.') > -1) {
        const decimal = value.split('.')[1]
        if (decimal.length > 2) {
          this.withdrawAmount = value.slice(0, value.indexOf('.') + 3)
        }
      }
    },
	// 去绑定提现状态
    goBindAccount() {
		uni.navigateTo({
			url: '/pages/wallet/bindaccount'
		})
	},
    // 选择提现方式
    selectMethod(item) {
      this.methodList.forEach(method => {
        method.selected = method.id === item.id
      })
	  this.withdrawalWay = item.id;
    },
    
    // 切换协议同意状态
    changeAgree(value) {
      this.isAgreeProtocol = value;
    },
    
    // 查看提现协议
    viewProtocol(type) {
      // TODO: 跳转到提现协议页面
	  uni.navigateTo({
	  	url: '/pages/xieyi/xieyi?type='+type
	  })
    },
    
    // 处理提现提交
    handleWithdraw() {
      if (!this.canSubmit) return
      this.debouncedSubmit()
    },

    // 实际的提交逻辑
    async submit() {
      if (this.isSubmitting) return
      
      if (!this.withdrawAmount) {
        uni.showToast({
          title: '请输入提现金额',
          icon: 'none'
        })
        return
      }
      
      const amount = parseFloat(this.withdrawAmount)
      if (amount <= 1) {
        uni.showToast({
          title: '提现金额必须大于1',
          icon: 'none'
        })
        return
      }
      
      if (amount > 200) {
        uni.showToast({
          title: '提现金额不能大于200元',
          icon: 'none'
        })
        return
      }
	  
      if (amount > this.balance) {
        uni.showToast({
          title: '提现金额不能大于账号余额',
          icon: 'none'
        })
        return
      }
	  
	  if(this.withdrawalWay == 2) {
		if(!this.aliWallet.name) {
		  uni.showToast({
		    title: '请输入真实姓名',
		    icon: 'none'
		  })
		  return
		}
		if(!this.aliWallet.id) {
		  uni.showToast({
		    title: '请输入身份证号',
		    icon: 'none'
		  })
		  return
		}
		if(!this.aliWallet.account) {
		  uni.showToast({
		    title: '请输入手机号',
		    icon: 'none'
		  })
		  return
		}
	  }
	  

      try {
        this.isSubmitting = true
        let data = {
		  cash_type: this.artisanType,
		  cash_money: this.withdrawAmount,
		  cash_user_id: this.id,
		  cash_name: this.aliWallet.name,
		  cash_identity: this.aliWallet.account,
		  cash_certno: this.aliWallet.id
		}
        // TODO: 调用提现接口
		await request.post('/user/alitransfor',data).then(res=>{
			console.log('提现结果',res)
			if(res.state == 1) {
			  uni.showToast({
			    title: '提现申请已提交，请等待审核',
				icon: 'none'
			  })
			  // 提交成功后返回上一页并传递选中的地址信息
			  const pages = getCurrentPages()
			  const prevPage = pages[pages.length - 2]
			  
			  if (prevPage) {
				prevPage.$vm.getUserInfo()
				uni.navigateBack()
			  }
			  return;
			}
			if(res.state == 2) {
			  uni.showToast({
			    title: '您有提现申请中，暂无法提现',
			    icon: 'none'
			  })
			  return;
			}
		})
      } catch (error) {
        uni.showToast({
          title: '提现失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style>
.withdraw-page {
  padding-bottom: env(safe-area-inset-bottom);
}

.amount-section,
.method-section{
	margin: 32rpx 24rpx;
	padding: 32rpx;
	border-radius: 12rpx;
	background-color: #FFFFFF;
}

.amount-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.amount-title,.method-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}
.method-title {
	display: block;
	padding-bottom: 32rpx;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.account-bind {
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
}

.input-box {
  display: flex;
  align-items: center;
  padding-bottom: 40rpx;
  margin-bottom: 24rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.currency {
  font-size: 60rpx;
  color: #333333;
  font-weight: 500;
  margin-right: 24rpx;
}

.money-inp {
  flex: 1;
  height: 60rpx;
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
}

.input-placeholder {
  color: #858585;
  font-size: 48rpx;
  font-weight: 400;
}

.tips-box {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	
}
.fee-tips {
  font-size: 20rpx;
  font-weight: 500;
  color: #858585;
}
.tips-icon {
	width: 24rpx;
	height: 24rpx;
	margin-left: 10rpx;
	padding: 8rpx;
}

.method-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.method-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.method-info {
  display: flex;
  align-items: center;
}

.method-icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 16rpx;
}

.method-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #333;
}

.agreement {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 26rpx;
}

.agreement-text {
  font-size: 20rpx;
  color: #858585;
  font-weight: 500;
  margin-left: 10rpx;
}

.protocol-link {
  font-size: 20rpx;
  color: #01A7F1;
}

.submit-section {
  padding: 32rpx 24rpx;
  background-color: #FFFFFF;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.submit-btn-disabled {
	opacity: 0.5;
}
.info-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}
.info-lable {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}
.info-inp {
  font-size: 28rpx;
  color: #333333;
  width: 460rpx;
}
.info-placeholder {
  font-size: 28rpx;
  color: #858585;
}
.required::before {
  content: '*';
  color: #FF0000;
  margin-right: 4rpx;
}
</style> 