<template>
  <div class="page" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <van-sticky class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 取款 -->
        {{ $t('home.l14') }}
      </div>
    </van-sticky>
    <div class="container">
      <div class="box flex" @click="$router.push('/convert/uid')">
        <div class="left">
          <van-image
            width="35"
            height="35"
            round
            fit="cover"
            src="/img/user/usd.png?14"
          />
          <div>
            <div class="name">
              <!-- 美元钱包账户 -->
              {{ $t('account.l1') }}
            </div>
            <div>{{ $t('common.l33') }} {{ $numToThousand((cashInfo.balance)) }} USD</div>
          </div>
        </div>
        <div class="right flex">
          <div>
            <!-- 划转 -->
            {{ $t('home.l15') }}
          </div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      
      <div class="section" @click="payMethodPopup = true">
        <div class="method-box flex">
          <div class="left">
            <!-- 取款支付方式: -->
            {{ $t('fund.l105') }}:
          </div>
          <div class="right flex">
            <div>
              <!-- 更换 -->
              {{ $t('fund.l114') }}
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="method-info">
          <div class="flex">
            <div class="radius"></div>
            <div>{{ typeName[type] }}</div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="cell flex" @click="payListPopup = true">
          <div>
            <!-- 选择收款账户 -->
            {{ $t('fund.l103') }}
          </div>
          <div class="flex">
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="pay-info flex" v-if="payInfo.id">
          <div class="left">{{ payInfo.value.bankName || payInfo.value.currency }}({{ payInfo.value.account || payInfo.value.address }})</div>
          <div v-if="type != 3">{{ payInfo.currency }}</div>
        </div>
      </div>
      <div class="section1">
        <div class="title">
          <!-- 取款金额 -->
          {{ $t('fund.l108') }}(USD)
        </div>
        <div class="input-box flex">
          <!-- 请输入取款金额 -->
          <van-field :border="false" :placeholder="$t('fund.l112')" v-model="amount" type="number" />
          <div>USD</div>
        </div>
        <div class="info">
          <div class="flex">
            <div>
              <!-- 可提现金额 -->
              {{ $t('fund.l109') }}:
            </div>
            <div class="val">{{ $numToThousand((cashInfo.balance)) }} USD</div>
          </div>
          <div class="flex">
            <div>
              <!-- 手续费 -->
              {{ $t('exchange.l20') }}: 
            </div>
            <div class="val">{{ $handleDigits2(withdrawParams.min_fee) }} ~ {{ $handleDigits2(withdrawParams.max_fee) }} USD</div>
          </div>
          <div class="flex">
            <div>
              <!-- 限额 -->
              {{ $t('fund.l78') }}: 
            </div>
            <div class="val">{{ $handleDigits2(withdrawParams.min_amount) }} ~ {{ $handleDigits2(withdrawParams.max_amount) }} USD</div>
          </div>
          <div class="flex">
            <div>
              <!-- 到帐金额 -->
              {{ $t('fund.l110') }}:
            </div>
            <div class="val">{{ $handleDigits2(allAmount) }} USD</div>
          </div>
        </div>
      </div>
      <div class="section2">
        <div class="col">
          <!-- 1、取款请保持与上一次存款相同渠道，否则取款将被拒绝。 -->
          {{ $t('fund.l129') }}
        </div>
        <div class="col">
          <!-- 2、如果您的账户有（赠金/信用），请取款时在账户预留至少与（赠金/信用）数量一致的余额。 -->
          {{ $t('fund.l130') }}
        </div>
      </div>
    </div>
    <div class="btn-box">
      <div class="btn" @click="withdrawCash">
        <!-- 下一步 -->
        {{ $t('common.l49') }}
      </div>
    </div>
    <van-popup v-model="payListPopup" position="right" :style="{ width: '100%' }">
      <payList @success="selectPay" @reset="payInfo = {}" :info="payInfo" :type="type" @cancel="payListPopup = false"/>
    </van-popup>
    <van-popup v-model="payMethodPopup" round position="bottom">
      <payMethod :type="type" @success="selectPayMethod"/>
    </van-popup>
    <authIdentity v-if="authShow" @cancel="authCancel" />
  </div>
</template>
<script>
import payList from "./components/payList.vue";
import payMethod from "@/components/payMethod";
import authIdentity from "@/components/authIdentity";
import bus from '@/utils/bus'
import { mapGetters } from "vuex";
import { getWithdrawParams, withdrawCash } from "@/api/assets";
export default {
  components: {
    payList,
    payMethod,
    authIdentity
  },
  data () {
    return {
      amount: '',
      type: '3',
      allTypeShow: false,
      authShow: false,
      payListPopup: false,
      payMethodPopup: false,
      withdrawParams: {},
      payInfo: {}
    }
  },
  computed: {
    ...mapGetters(['cashInfo', 'userInfo']),
    allAmount() {
      var fee = this.$bigDecimal.multiply(this.amount || 0, this.$bigDecimal.divide(this.withdrawParams.fee || 0, 100))
      if (fee < this.withdrawParams.min_fee) {
        fee = this.withdrawParams.min_fee
      }
      if (fee > this.withdrawParams.max_fee) {
        fee = this.withdrawParams.max_fee
      }
      var amount = Number(this.$bigDecimal.subtract(this.amount || 0, fee))
      return amount > 0 ? amount : '0.00'
    },
    typeName() {
      return {
        // '1': '本地银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        '1': this.$t('fund.l106'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
      }
    }
  },
  watch: {
    amount(val) {
      if (val == '-') {
        this.amount = ''
      }
    },
    type(val) {
      if (val != '3') {
        if (this.userInfo.identity_status !== 1) {
          this.authShow = true
        }
      }
    },
    userInfo: {
      handler() {
        if (this.userInfo.identity_status !== 1 && this.type != '3') {
          this.authShow = true
        }
      },
      deep: true
    }
  },
  created () {
    this.getWithdrawParams()
    bus.$emit('updateAssets', ['getCash'])
    if (this.userInfo.identity_status && this.userInfo.identity_status !== 1 && this.type != '3') {
      this.authShow = true
    }
  },
  methods: {
    withdrawCash() {
      if (this.userInfo.identity_status && this.userInfo.identity_status !== 1 && this.type != '3') {
        this.authShow = true
        return
      }
      if (this.userInfo.group == 9999) {
        bus.$emit('abnormalPopSign')
        return
      }
      if (!this.payInfo.id) {
        // this.$toast('请选择收款人账户');
        this.$toast(this.$t('fund.l111'));
        return
      }
      if (!this.amount.trim()) {
        // this.$toast('请输入取款金额');
        this.$toast(this.$t('fund.l112'));
        return
      }
      if (Number(this.amount.trim()) > this.cashInfo.balance) {
        // this.$toast(`可取金额不足`);
        this.$toast(this.$t('fund.l113'));
        return
      }
      if (Number(this.amount.trim()) < this.withdrawParams.min_amount || Number(this.amount.trim()) > this.withdrawParams.max_amount) {
        // 限额
        this.$toast(`${this.$t('fund.l78')}${this.withdrawParams.min_amount}~${this.withdrawParams.max_amount}`);
        return
      }
      this.fullscreenLoading = true
      withdrawCash({
        collection_account_id: this.payInfo.id,
        amount: this.amount
      }).then(res => {
        if (this.type == 3) {
          this.$notify({
            // message: '操作成功',
            message: this.$t('common.l52'),
            type: 'success'
          });
          this.$router.back()
        } else {
          this.$router.push('/withdraw-success')
        }
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      });
    },
    getWithdrawParams() {
      getWithdrawParams({
        type: this.type
      }).then(res => {
        if(res) {
          this.withdrawParams = JSON.parse(res)
        } else {
          this.WithdrawParams = {}
        }
      }).catch(() => {})
    },
    selectPay(item) {
      this.payInfo = item
      this.payListPopup = false
      if (this.type != this.payInfo.type) {
        this.type = this.payInfo.type
        this.getWithdrawParams()
      }
    },
    selectPayMethod(type) {
      this.payMethodPopup = false
      if (this.type == type) {
        return
      }
      this.type = type
      this.payInfo = {}
      this.getWithdrawParams()
    },
    authCancel() {
      this.authShow = false
      // this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 90px;
}
.sticky {
  margin-bottom: 1px;
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  background-color: var(--bg-);
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.container {
  padding: 7px 17px;
}
.box {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 16px 12px;
  cursor: pointer;
  justify-content: space-between;
  margin-bottom: 10px;
  .left {
    display: flex;
    align-items: center;
    column-gap: 6px;
    font-size: 12px;
    color: #828282;
  }
  .name {
    font-size: 16px;
    color: #000000;
    margin-bottom: 8px;
  }
  .el-icon-arrow-right {
    font-weight: 600;
    color: #8B8B8B;
  }
  .btn {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #CACACA;
    line-height: 31px;
    min-width: 66px;
    cursor: pointer;
    padding: 0 5px;
    text-align: center;
    color: #000000;
    font-size: 14px;
  }
}
.section {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  margin-bottom: 10px;
  .pay-info {
    padding: 0 12px;
    height: 50px;
    background-color: var(--bg-);
    font-size: 16px;
    justify-content: space-between;
    column-gap: 8px;
    .left {
      flex: 1;
      min-width: 10%;
      max-width: 100%;
      word-break: break-all;
    }
  }
  .method-box {
    padding: 13px 12px;
    justify-content: space-between;
    .left {
      font-size: 16px;
    }
    .right {
      font-size: 14px;
    }
  }
  .method-info {
    padding: 0 12px 9px;
    .flex {
      background-color: #F7F8FA;
      border-radius: 4px;
      height: 35px;
      padding: 0 9px;
    }
    .radius {
      min-width: 5px;
      max-width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #000;
      margin-right: 6px;
    }
  }
  .item {
    height: 50px;
    justify-content: space-between;
    padding: 0 18px;
    font-size: 15px;
    background-color: var(--bg-);
    margin-bottom: 1px;
    cursor: pointer;
  }
  .right {
    font-size: 14px;
  }
  .el-icon-arrow-right {
    font-weight: 600;
    color: #8B8B8B;
  }
}
.cell {
  justify-content: space-between;
  padding: 20px 12px;
  background-color: var(--bg-);
  font-size: 16px;
  color: #000000;
  cursor: pointer;
  .label {
    color: #828282;
    padding-right: 3px;
  }
}
.section1 {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 19px 12px 10px;
  .title {
    font-size: 18px;
    color: var(--color-1-);
    font-weight: 500;
    margin-bottom: 15px;
  }
  .input-box {
    font-size: 20px;
    color: #232323;
    border-bottom: 1px solid #EFEFEF;
    margin-bottom: 12px;
    font-weight: 600;
  }
  .van-field {
    padding: 0 10px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 48px;
    color: var(--color-1-);
    &::after {
      border-bottom: none;
    }
  }
  .info {
    font-size: 12px;
    color: #8B8B8B;
    .flex {
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .val {
      color: #232323;
    }
  }
}
.section2 {
  padding-top: 14px;
  font-size: 12px;
  color: #8B8B8B;
  line-height: 24px;
}
.btn-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-color: #fff;
  padding: 10px 18px 29px;
  .btn {
    cursor: pointer;
    line-height: 44px;
    text-align: center;
    background: #000000;
    color: #FEFFFF;
    font-weight: 600;
    border-radius: 6px;
    font-size: 16px;
  }
}
</style>