<template>
  <view class="page">
    <u-navbar title="添加收款账户" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' 
      title-size='36' height='36' id="navbar"></u-navbar>

    <view class="container">
      <!-- 账户类型选择 -->
      <view class="account-type">
        <view class="type-title">选择收款方式</view>
        <view class="type-options">
          <view 
            class="type-option" 
            :class="{active: activeType === 'bank'}"
            @click="activeType = 'bank'">
            <u-icon name="account-fill" size="40" color="#4C97E7"></u-icon>
            <text>银行卡</text>
          </view>
          <view 
            class="type-option" 
            :class="{active: activeType === 'qrcode'}"
            @click="activeType = 'qrcode'">
            <u-icon name="scan" size="40" color="#4C97E7"></u-icon>
            <text>收款二维码</text>
          </view>
        </view>
      </view>

      <!-- 银行卡绑定表单 -->
      <view class="form-container" v-if="activeType === 'bank'">
        <view class="form-title">绑定银行卡信息</view>
        
        <!-- 银行卡类型选择 -->
        <view class="form-item">
          <view class="item-label">银行卡类型</view>
          <view class="bank-type-options">
            <view 
              class="bank-type-option" 
              :class="{active: bankForm.type === 'BANK'}"
              @click="bankForm.type = 'BANK'">
              <text>个人银行卡</text>
            </view>
            <view 
              class="bank-type-option" 
              :class="{active: bankForm.type === 'PUBLIC_BANK'}"
              @click="bankForm.type = 'PUBLIC_BANK'">
              <text>对公银行卡</text>
            </view>
          </view>
        </view>
        
        <!-- 开户行输入（仅对公银行卡显示） -->
        <view class="form-item" v-if="bankForm.type === 'PUBLIC_BANK'">
          <view class="item-label">开户行</view>
          <u-input v-model="bankForm.bankName" placeholder="请输入开户行名称" border="none"></u-input>
        </view>
        
        <view class="form-item">
          <view class="item-label">持卡人</view>
          <u-input v-model="bankForm.name" placeholder="请输入持卡人姓名" border="none"></u-input>
        </view>
        
        <view class="form-item">
          <view class="item-label">银行卡号</view>
          <u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number"></u-input>
        </view>
        
        <view class="form-item">
          <view class="item-label">身份证号</view>
          <u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none"></u-input>
        </view>
        
        <view class="form-item" style="border: none;margin-bottom: 0;padding-bottom: 0;">
          <view class="item-label">手机号</view>
          <u-input v-model="bankForm.mobile" placeholder="请输入手机号" border="none"></u-input>
        </view>
      </view>
      <!-- 二维码收款设置 -->
      <view class="qrcode-container" v-if="activeType === 'qrcode'">
        <view class="qrcode-title">上传收款二维码</view>
        <view class="qrcode-upload">
          <view class="upload-area" @click="chooseImage">
            <u-icon name="plus" size="60" color="#CCCCCC" v-if="!bankForm.no"></u-icon>
            <image :src="bankForm.no" mode="aspectFit" v-else></image>
            <text class="upload-tip" v-if="!bankForm.no">点击上传二维码</text>
          </view>
        </view>
        <view class="qrcode-form">
          <view class="form-item">
            <view class="item-label">收款人姓名</view>
            <u-input v-model="bankForm.name" placeholder="请输入收款人姓名" border="none"></u-input>
          </view>
		  <view class="form-item">
		    <view class="item-label">收款人身份证号</view>
		    <u-input v-model="bankForm.idCard" placeholder="请输入收款人身份证号" border="none"></u-input>
		  </view>
		  <view class="form-item" style="border: none;margin-bottom: 0;padding-bottom: 0;">
		    <view class="item-label">收款人手机号</view>
		    <u-input v-model="bankForm.mobile" placeholder="请输入收款人手机号" border="none"></u-input>
		  </view>
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="submit-btn">
        <u-button 
          type="primary" 
          shape="circle" 
          @click="submitForm">
          添加
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#fff",
      },
      activeType: 'bank', // bank/qrcode
      bankForm: {
		type:'BANK', // 银行卡类型：BANK-私人银行卡，PUBLIC_BANK-对公银行卡，QR-二维码收款
        name: '',
        idCard: '',
        mobile: '',
		no:'',
        bankName: '' // 开户行名称
      },
	  token: '', // 添加七牛云token
	  upurl: 'https://api.ccttiot.com', // 添加上传域名
    }
  },
  onShow() {
  	 this.getQiniuToken()
  },
  methods: {
	  // 获取七牛云token
	  getQiniuToken() {
	  	this.$u.get("/common/qiniuToken").then((res) => {
	  		if (res.code == 200) {
	  			this.token = res.data
	  		}
	  	})
	  },
	  // 选择图片
	  chooseImage() {
	  	uni.chooseImage({
	  		count: 1,
	  		sizeType: ['compressed'],
	  		sourceType: ['album', 'camera'],
	  		success: (res) => {
	  			this.uploadImage(res.tempFilePaths[0])
	  		}
	  	})
	  },
	  // 上传图片
	  uploadImage(filePath) {
	  	uni.showLoading({
	  		title: '上传中...'
	  	})
	  	const math = 'static/' + this.$u.guid(20)
	  	uni.uploadFile({
	  		url: 'https://up-z2.qiniup.com',
	  		filePath: filePath,
	  		name: 'file',
	  		formData: {
	  			token: this.token,
	  			key: 'bike/img/' + math
	  		},
	  		success: (res) => {
	  			const response = JSON.parse(res.data)
	  			if (response.key) {
	  				this.bankForm.no = this.upurl + '/' + response.key
					console.log(this.bankForm.no);
	  				uni.showToast({
	  					title: '上传成功',
	  					icon: 'success'
	  				})
	  			} else {
	  				uni.showToast({
	  					title: '上传失败',
	  					icon: 'none'
	  				})
	  			}
	  		},
	  		fail: () => {
	  			uni.showToast({
	  				title: '上传失败',
	  				icon: 'none'
	  			})
	  		},
	  		complete: () => {
	  			uni.hideLoading()
	  		}
	  	})
	  },
    submitForm() {
		uni.showLoading({ title: '添加中...' })
		if(this.activeType == 'qrcode'){
			this.bankForm.type = 'QR'
		}
		// 银行卡类型保持用户的选择：BANK 或 PUBLIC_BANK
		let data = {
			...this.bankForm
		}
	   this.$u.post(`/bst/account`,data).then((res) => {
	   	    if (res.code == 200) {
				uni.hideLoading()
				uni.showToast({
				  title: '添加成功',
				  icon: 'success'
				})
	   	    	setTimeout(() => {
	   	    	    uni.navigateBack()
	   	    	}, 1500)
	   	    }else{
				uni.showToast({
				  title: res.msg,
				  icon: 'none'
				})
			}
	   })
    },
  }
}
</script>

<style lang="scss">
page {
  background: #F7F8FA;
}
.container {
  padding: 30rpx;
}
.account-type {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  .type-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #262B37;
    margin-bottom: 30rpx;
  }
  .type-options {
    display: flex;
    justify-content: space-between;
    .type-option {
      width: 48%;
      height: 180rpx;
      background: #F7F8FA;
      border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      text {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #666;
      }
      &.active {
        background: #E6F0FF;
        border: 1rpx solid #4C97E7;
        text {
          color: #4C97E7;
        }
      }
    }
  }
}
.form-container, .qrcode-container {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
    .form-title, .qrcode-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #262B37;
      margin-bottom: 30rpx;
    }
}
.form-item {
    margin-bottom: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #F0F0F0;
    .item-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    
    .bank-type-options {
      display: flex;
      gap: 20rpx;
      .bank-type-option {
        flex: 1;
        height: 80rpx;
        background: #F7F8FA;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        border: 2rpx solid transparent;
        
        text {
          font-size: 28rpx;
          color: #666;
        }
        
        &.active {
          background: #E6F0FF;
          border-color: #4C97E7;
          text {
            color: #4C97E7;
            font-weight: 500;
          }
        }
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
}
.qrcode-upload {
    display: flex;
    justify-content: center;
    margin: 40rpx 0;
    .upload-area {
        width: 300rpx;
        height: 300rpx;
        background: #F7F8FA;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        image {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
        .upload-tip {
          margin-top: 20rpx;
          font-size: 26rpx;
          color: #999;
        }
    }
}
.submit-btn {
    margin-top: 60rpx;
    .u-button {
       height: 90rpx;
       font-size: 32rpx;
    }
}
</style>