<template>
  <view>
    <view class="balance">
      <view class="title">
        可领取{{ type == 7 ? '水果券':'货款' }}
      </view>
      <view class="balance-span site-flex">
        <text class="fuhao">¥</text>
        <text> {{ balance }}</text>
      </view>
    </view>
    <view class="main bg-w">

      <view class="list">
        <view @click="jumpTo()" v-if="paymentInfo.account">
          <Card :data="paymentInfo" :index="paymentInfo"></Card>
        </view>
        <view class="list-item flex flex-between" v-else>
          <text class="font32">领取至</text>

          <view class="flex flex-align-center color-b6" @click="jumpTo()">
            <text class="font28" v-if="paymentInfo.type === undefined">请选择</text>
            <text class="font28" v-if="paymentInfo.type === 0">支付宝({{ paymentInfo.account }})</text>
            <text class="font28" v-if="paymentInfo.type === 1">微信({{ paymentInfo.account }})</text>
            <text class="font28" v-if="paymentInfo.type === 3">{{ paymentInfo.bankName }}({{ paymentInfo.account |
              filtersCard }})</text>
            <text class="iconfont font38">&#xe770;</text>
          </view>
        </view>
        <view class="list-item">
          <text class="font32">领取金额</text>
          <view class="flex flex-align-end con ">
            <text class="blod font48">¥</text>
            <input type="text" class="font40 input" v-model="money" placeholder="0.00" />
          </view>
        </view>
        <view class="flex flex-between">
          <view class="money flex flex-align-center font26">
            <text @tap="money = balance">全部领取</text>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <text class="color-b9 font30" @click="$navigateTo('creditCardRecord')">领取记录</text>
          <!-- #endif -->
        </view>
		<view v-if="type == 3" class="list-item flex" @click="selectImg">
		  <text class="font32">发票上传</text>
		  <view class="flex flex-align-end" style="margin-left: 100rpx;">
		   <image style="width: 300rpx;height: 300rpx;" :src="voucher || uploadBgIMG" mode=""></image>
		  </view>
		</view>
        <view class="btn">
          <u-button :circle="true" @click="onSave" :loading="loading" :disabled="loading"
            color="linear-gradient(to right, rgba(22, 104, 214, 1), rgba(88, 153, 235, 1))">立即领取</u-button>
        </view>
        <!-- <button type="primary" class="bg-base">确认提现</button> -->
        				<view class="flex flex-column font32 tips color-red" >
        					<text>*提示：</text>
        					<block v-if="type == 3">
								<text>1.货款领取最低金额100，最大金额100000。</text>
								<text>2.货款在将在三个工作内到账，节假日顺延。</text>
							</block>
							<block v-if="type == 7">
								<text>1.领取最低金额100，最大金额100000。</text>
								<text>2.收益日结周提，领取手续费6%。</text>
							</block>
        				</view>

      </view>
    </view>
  </view>
</template>

<script>

import url from "@/common/http/url.js";
import { mapState } from 'vuex';
import Card from '@/pages/user/Fruit/component/Card.vue';
import { calcFn } from '@/utils/calc.js';
import upload from "@/common/http/upload.js";
export default {
  components: {
    Card
  },
  data () {
    return {
      loading: false,
      money: "",
      balance: 0,
      paymentInfo: {},
      config: {},
      type: 1,// 1-用户， 2-配送员， 3-商家, 4-存托
      myAssetObj: {},
	  uploadBgIMG: require('@/static/indexIMG/upload.png'),
	  voucher: ''
    }
  },
  filters: {
    filtersCard (val) {
      if (!val) return
      return val.substring(val.length - 4, val.length)
    }
  },
  onLoad (opt) {
    if (opt.type) {
      this.type = parseInt(opt.type)
    }
    if (this.type === 4) {
      // 获取存托余额
      this.$http("GET", url.deposit.getUserWallet).then(res => {
        this.balance = res.data.balance
      })
    } else if (this.type === 3) {
      // 获取商家余额
      // this.$http("GET", url.user.getMyAsset).then(res =>{
      // 	let { code, data } = res;
      // 	console.log('res', res)
      // 	if (code == 200) {
      // 		data.forEach((item) => {
      // 			if (item.assetType == 6) {
      // 				this.balance = item.assetAccount || 0
      // 			}
      // 		})
      // 	}
      // })
      // this.$http("GET", url.store.getWalletInfo).then(res=>{

      // })
    } else if (this.type === 7) {
      this.$http('GET', url.user.getMyAsset).then(res => {
        this.balance = res.data[5].assetAccount
        // if (this.type === 1) {
        // 	this.balance = res.data.balance
        // } else {
        // 	this.balance = res.data.distributorBalance
        // }
      })
    } else {
      // 获取用户余额
      this.$http('GET', url.user.getWalletInfo).then(res => {
        if (this.type === 1) {
          this.balance = res.data.balance
        } else {
          this.balance = res.data.distributorBalance
        }
      })
    }
  },
  onShow () {
    if (this.paymentData) {
      this.paymentInfo = this.paymentData
    }
    let path = url.withdrawal.getConfigInfo
    let name = "user"
    if (this.type === 2) {
      name = "distribution"
    } else if (this.type === 3) {
      name = "store"
      this.myAsset.forEach((item) => {
        if (item.assetType == 6) {
          this.balance = item.assetAccount || 0
        }
      })
    } else if (this.type === 4) {
      path = url.deposit.getWithdrawalInfo
      name = "deposit"
    }
    // 获取提现参数
    this.$http("GET", path, { type: this.type }).then(res => {
      this.config.status = res.data.keyValue
      let list = res.data.children
      list.forEach(v => {
        if (v.keyCode === `${name}_withdrawal_min_amount`) {
          this.config.minAmount = v.keyValue // 提现最低数额
        }
        if (v.keyCode === `${name}_withdrawal_max_amount`) {
          this.config.maxAmount = v.keyValue // 提现最大数额
        }
        if (v.keyCode === `${name}_withdrawal_multiple_amount`) {
          this.config.multiple = v.keyValue // 倍数
        }
        if (v.keyCode === `${name}_withdrawal_fixed_amount`) {
          this.config.fixed = v.keyValue // 固定金额范围
        }
        if (v.keyCode === `${name}_withdrawal_fixed_service_amount`) {
          this.config.fixedService = v.keyValue // 某个范围内扣除固定的手续费
        }
        if (v.keyCode === `${name}_withdrawal_fixed_service_percentage`) {
          this.config.percentage = v.keyValue // 超出固定范围外扣除固定的百分比手续费
        }
        if (v.keyCode === `${name}_withdrawal_collection_type`) {
          this.config.remarks = v.remarks // 支持的收款类型
        }
      })
      this.$forceUpdate()
    })
  },
  computed: {
    ...mapState(["myAsset"])
  },
  onNavigationBarButtonTap () {
    this.$navigateTo("withdrawalRecord?type=" + this.type)
  },
  methods: {
	selectImg(type){
	  	// upload.showAvatarModal(this, 500, 500)
	  	uni.chooseImage({
	  		count: 1,
	  		success: (res) => {
	  			let tempFilePath = res.tempFilePaths[0]
	  			upload.getOssSignature(tempFilePath, 13, 1).then(data=>{
	  				upload.uploadImageOss(data).then(list=>{
	  					let successCallBackParamsList = [{
	  						resourceTemporaryUUID: list[0].resourceTemporaryUUID
	  					}]
	  					console.log('list=====', list)
	  					this.voucher = list[0].url
	  					// if (this.applicationType===0){ // 头像
	  					// 	this.examineAvatar = {
	  					// 		ossUrl: list[0].url,
	  					// 		status: 4
	  					// 	}
	  					// }

	  				})
	  			})
	  		}
	  	})
	  },
    onSave () {
      if (!this.type) return
      if (!this.paymentInfo.id) return this.$msg("请选择提现到账信息")
      if (!this.money) return this.$msg("请输入提现金额")
      if (Number(this.money) > Number(this.balance)) return this.$msg("输入金额已超过可提现余额")
      this.loading = true
      let params = {
        wallet_type: this.type == 7 ? 7 : 6,
        type: this.paymentInfo.type,
        amount: this.money,
        collectionId: this.paymentInfo.id
      }
      let path = null
      if (this.type === 4) {
        path = url.deposit.withdrawal
      } else {
        path = url.withdrawal.apply
        params.userType = this.type
      }
	  if (this.type == 3) params.voucher = this.voucher
      this.$http("POST", path, params).then(res => {
        // this.$msg(res.data)
        this.$msg("提现申请已提交")
        this.loading = false;
        this.$store.dispatch('getMyAsset');
        // setTimeout(() => {
        this.$navigateTo('withdrawalRecord?type=' + this.type)
        // }, 2000)
      }).catch(() => {
        this.loading = false
      })
    },
    jumpTo () {
      this.$navigateTo("../payment/list?type=3&coupon=true")
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/font.css";

.tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20upx;

  view {
    flex: 1;
    text-align: center;
    color: #333;
    border-radius: 20upx;
    padding: 20upx;
  }
}

.btn {
  padding: 40upx;
}

._input {
  padding: 40upx;
  display: flex;
  align-items: flex-end;

  text {
    color: #333 !important;
    font-size: 28upx;
    margin-left: 10upx;
    font-weight: 500;
  }

  input {
    border-bottom: 2px solid #2963e2;
    // border-bottom: 2px solid #333;
    padding: 20upx;
    flex: 1;
    font-family: 'Product-Sans-Bold';
    font-weight: 600;
    font-size: 56upx;

  }

  input::focus {
    border-bottom: 2px solid #2963e2 !important;
  }
}

.activeTab {
  padding: 20upx;
  font-weight: 500;
  color: #fff !important;
  background: #2963e2;
  border-radius: 20upx;
}

.balance-span {
  font-family: 'Product-Sans-Bold';
  font-weight: 700;
  font-size: 70upx;
}

.fuhao {
  font-size: 38upx;
}

.title {
  font-size: 30upx;
  font-weight: 400;
}

.card {
  padding: 40upx;
}

.with {
  margin-top: -20px;
  background: #fff;
  border-top-left-radius: 50upx;
  border-top-right-radius: 50upx;
  width: 100%;
  height: 100%;
}

.balance {
  padding: 15upx 20upx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  view {
    margin: 10upx;
    color: #fff;
  }

  background: #2963e2;
  // border-bottom-left-radius: 20upx;
  // border-bottom-right-radius: 20upx;
}

.main {
  min-height: 100vh;
  padding: 0 20rpx;

  .list {
    &-item {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #EEEEEE;

      .con {
        margin-top: 30rpx;

        .input {
          // border-bottom: 2px solid #2963e2;
          // border-bottom: 2px solid #333;
          padding: 0upx 20upx;
          flex: 1;
          font-family: 'Product-Sans-Bold';
          font-weight: 600;
          font-size: 56upx;
        }
      }
    }
  }

  .money {
    margin: 30rpx 0;
  }

  .tips {
    margin-top: 80rpx;
    line-height: 50rpx;
  }
}
</style>
