<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.l13') }}
      </div>
    </van-sticky>
    <div class="container">
      <div class="box flex" @click="accountShow = true">
        <div class="left">
          <van-image
            width="35"
            height="35"
            round
            fit="cover"
            :src="`/img/user/${accountInfo1.server ? accountInfo1.server : 'usd'}.png?14`"
          />
          <div>
            <!-- 美元钱包账户 -->
            <div class="title">{{ serverName[accountInfo1.server] || $t('account.l1') }}</div>
            <div>{{ $t('common.l33') }} {{ $numToThousand((accountInfo1.balance)) }} {{ serverUtil[accountInfo1.server] || 'USD' }}</div>
          </div>
        </div>
        <div class="right flex">
          <div>
            <!-- 切换账号 -->
            {{ $t('fund.l65') }}
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="currency-box flex" @click="currencyPopup = true">
        <div class="title">
          <!-- 支付币种 -->
          {{ $t('fund.l52') }}
        </div>
        <div class="right flex">
          <div v-if="!currencyInfo.symbol">
            <!-- 请选择 -->
            {{ $t('common.l51') }}
          </div>
          <div v-else>{{ currencyInfo.symbol }}</div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="method-box" @click="channelPopup = true" v-if="currencyInfo.symbol">
        <div class="title-box flex">
          <div class="title">
            <!-- 存款方式 -->
            {{ $t('fund.l49') }}
          </div>
          <div class="right flex">
            <div v-if="!channelInfo.id">
              <!-- 请选择 -->
              {{ $t('common.l51') }}
            </div>
            <div v-else>
              <!-- 更换 -->
              {{ $t('fund.l114') }}
            </div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="wraper flex" v-if="channelInfo.id">
          <div class="left flex">
            <img height="37px" :src="channelInfo.logo" alt="极度证券">
            <div class="time flex">
              <div>
                <!-- 处理时间 -->
                {{ $t('fund.l39') }}
              </div>
              <div>{{ channelInfo.average_time }}</div>
            </div>
          </div>
          <!-- <div>{{ payName[channelInfo.type] || channelInfo.name }}</div> -->
          <van-icon name="passed" />
        </div>
      </div>
      <div class="box2">
        <div class="title">
          <!-- 存款金额 -->
          {{ $t('fund.l66') }}(USD)
        </div>
        <div class="input-box flex">
          <!-- 请输入存款金额 -->
          <van-field :placeholder="$t('fund.l77')" :border="false" v-model="amount" type="number" />
          <div>USD</div>
        </div>
        <div class="fee">
          <!-- 手续费 -->
          <div class="flex">
            <div>{{ $t('exchange.l20') }}:</div>
            <div class="val">{{ fee }} USD</div>
          </div>
          <div class="flex">
            <div>
              <!-- 存款限额 -->
              {{ $t('fund.l123') }}: </div>
            <div class="val" v-if="channelInfo.id">
              {{ $handleDigits2(channelInfo.min_amount) }} ~ {{ $handleDigits2(channelInfo.max_amount) }} USD
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="box3" v-if="channelInfo.type > 100">
        <div class="title">
          存款入口
          {{ $t('fund.l69') }}
        </div>
        <div class="ul">
          <div class="li active">
            入口1
            {{ $t('fund.l70') }}
          </div>
        </div>
      </div> -->
      <div class="section1">
        <div class="col">
          <!-- 1、不同货币支付存款，将按照系统汇率进行转换存入账户。 -->
          {{ $t('fund.l71') }}
        </div>
        <div class="col">
          <!-- 2、法币存款请注意本人实名支付。 -->
          {{ $t('fund.l72') }}
        </div>
        <div class="col">
          <!-- 3、极度证券严格遵守反洗钱政策，将不定期审查异常资金活动。 -->
          {{ $t('fund.l73') }}
        </div>
      </div>
    </div>
    <div class="fixed">
      <div class="btn" @click="submit">
        <!-- 确认支付 -->
        {{ $t('fund.l74') }}
      </div>
    </div>
    <van-popup v-model="channelPopup" position="right" :style="{ width: '100%' }">
      <channelList ref="channel" :currency="currencyInfo.symbol" type="1" @success="channelBack" @cancel="channelPopup = false"/>
    </van-popup>
    <van-popup v-model="currencyPopup" round position="bottom">
      <currencyList type="1" pay="1" :title="$t('fund.l52')" :currency="currencyInfo.symbol" @success="currencyBack" @cancel="currencyPopup = false"/>
    </van-popup>
    <van-popup v-model="accountShow" round position="bottom">
      <accountList :list="accountList1" :info="accountInfo1" @success="selectAccountBack"/>
    </van-popup>
    <authIdentity v-if="authShow" @cancel="authCancel" />
  </div>
</template>
<script>
import bus from '@/utils/bus'
import channelList from "./components/channelList.vue";
import currencyList from "@/components/currencyList";
import accountList from "./components/accountList.vue";
import { mapGetters } from "vuex";
import { depositCash, getCashChannelList } from '@/api/assets'
import authIdentity from "@/components/authIdentity";
import { getSession, delSession } from "@/utils/sessionStorage";
export default {
  components: {
    channelList,
    currencyList,
    accountList,
    authIdentity
  },
  data () {
    return {
      authShow: false,
      channelPopup: false,
      channelInfo: {},
      currencyPopup: false,
      currencyInfo: {
        symbol: 'CNY'
      },
      accountId: '',
      accountShow: false,
      amount: '',
    }
  },
  computed: {
    ...mapGetters(['cashInfo', 'accountList', 'userInfo']),
    payName() {
      return {
        // '1': '银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        '1': this.$t('account.l31'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
      }
    },
    fee() {
      if (this.channelInfo.id) {
        var fee = ''
        //if (this.channelInfo.min_fee) {
          fee = this.$handleDigits2(this.channelInfo.min_fee)
        //}
        //if (this.channelInfo.min_fee && this.channelInfo.max_fee) {
          fee += ' ~ '
        //}
        //if (this.channelInfo.max_fee) {
          fee += this.$handleDigits2(this.channelInfo.max_fee)
        //}
        //if (!this.channelInfo.max_fee && !this.channelInfo.min_fee) {
          //fee += this.$handleDigits2(this.channelInfo.fee)
        //}
        return fee || '0.00'
      }
      return '0.00'
    },
    accountList1() {
      var list = [this.cashInfo, ...this.accountList]
      return list
    },
    accountInfo() {
      var info = {}
      this.accountList.forEach(item => {
        if (item.id == this.accountId) {
          info = item
        }
      })
      return info
    },
    accountInfo1() {
      return this.accountId ? this.accountInfo : this.cashInfo
    }
  },
  watch: {
    amount(val) {
      if (val == '-') {
        this.amount = ''
      }
    },
    userInfo: {
      handler() {
        if (this.userInfo.identity_status !== 1) {
          this.authShow = true
        }
      },
      deep: true
    },
    'currencyInfo.symbol'(val) {
      this.$refs['channel'] && this.$refs['channel'].reset(val)
    }
  },
  created () {
    bus.$emit('updateAssets', ['getCash', 'getAccountList'])
    // if (this.$route.params.id) {
    //   this.accountId = this.$route.params.id
    // }
    if (this.userInfo.identity_status && this.userInfo.identity_status !== 1) {
      this.authShow = true
    }
    var depositCurrency = getSession('depositCurrency')
    if (depositCurrency) {
      this.currencyInfo = depositCurrency
      delSession('depositCurrency')
    }
    var channelInfo = getSession('channelInfo')
    if (channelInfo) {
      this.channelInfo = channelInfo
      this.currencyInfo = {
        symbol: channelInfo.currency
      }
      delSession('channelInfo')
    }
    this.getCashChannelList()
  },
  methods: {
    submit() {
      if (!this.currencyInfo.symbol) {
        // this.$toast('请选择支付币种');
        this.$toast(this.$t('fund.l75'));
        return
      }
      if (!this.channelInfo.id) {
        // this.$toast('请选择存款方式');
        this.$toast(this.$t('fund.l76'));
        return
      }
      if (!this.amount.trim()) {
        // this.$toast('请输入存款金额');
        this.$toast(this.$t('fund.l77'));
        return
      }
      if (Number(this.amount.trim()) < this.channelInfo.min_amount || Number(this.amount.trim()) > this.channelInfo.max_amount) {
        // 限额
        this.$toast(`${this.$t('fund.l78')}${this.channelInfo.min_amount}~${this.channelInfo.max_amount}`);
        return
      }
      var data = {
        channel_id: this.channelInfo.id,
        amount: this.amount,
        client: 'H5'
      }
      if (this.accountInfo1.id) {
        data.market = this.accountInfo1.market
        data.server = this.accountInfo1.server
        data.account = this.accountInfo1.account
      }
      this.fullscreenLoading = true
      depositCash(data).then(res => {
        this.$notify({
          // message: '操作成功',
          message: this.$t('common.l52'),
          type: 'success'
        });
        if (this.channelInfo.type > 100) {
          this.$router.push('/online-pay/' + res.ordernum)
          return
        }
        this.$router.replace(`/deposit-voucher/${res.id}/${res.ordernum}`)
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false;
      })
    },
    channelBack(item) {
      this.channelInfo = item
      this.channelPopup = false
      this.currencyInfo = {
        symbol: item.currency
      }
    },
    currencyBack(item) {
      this.currencyPopup = false
      if (this.currencyInfo.symbol != item.symbol) {
        this.currencyInfo = item
        this.channelInfo = {}
      }
    },
    selectAccountBack(item) {
      this.accountId = item.id
      this.accountShow = false
    },
    authCancel() {
      this.authShow = false
      this.$router.back()
    },
    getCashChannelList() {
      getCashChannelList({
        currency: this.currencyInfo.symbol
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          if (item.value) {
            item.value = JSON.parse(item.value)
          } else {
            item.value = {}
          }
        })
        this.channelInfo = list[0] || {}
      }).catch(() => {}).finally(() => {
      })
    },
  }
}
</script>
<style lang="less" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 93px;
}
.sticky {
  background-color: var(--bg-);
}
.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 10px;
  font-size: 14px;
  color: #000000;
  .van-icon-arrow {
    font-size: 15px;
    color: #8B8B8B;
  }
  .title {
    font-size: 16px;
    color: #000000;
  }
}
.box {
  background-color: var(--bg-);
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 16px 12px;
  cursor: pointer;
  min-height: 54px;
  justify-content: space-between;
  margin-bottom: 10px;
  .left {
    display: flex;
    align-items: center;
    column-gap: 6px;
    color: #828282;
    font-size: 12px;
  }
  .title {
    margin-bottom: 8px;
  }
}
.currency-box {
  background-color: var(--bg-);
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 16px 12px;
  cursor: pointer;
  min-height: 54px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.method-box {
  background-color: var(--bg-);
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 16px 12px;
  cursor: pointer;
  min-height: 54px;
  justify-content: space-between;
  margin-bottom: 10px;
  .title-box {
    justify-content: space-between;
  }
  .wraper {
    justify-content: space-between;
    margin-top: 15px;
    background: #FAFBFC;
    border-radius: 5px;
    border: 1px solid #E6E6E6;
    padding: 13px 9px;
  }
  .left {
    column-gap: 25px;
  }
  .time {
    font-size: 12px;
    color: #8B8B8B;
    column-gap: 12px;
  }
  .van-icon-passed {
    font-size: 22px;
    color: var(--color-);
  }
}
.box2 {
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 19px 12px 15px;
  .input-box {
    padding-top: 15px;
    font-size: 20px;
    font-weight: 600;
    color: #232323;
    border-bottom: 1px solid #EBEBEB;
    margin-bottom: 12px;
  }
  .van-field {
    padding: 0 10px 0 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 48px;
    color: #232323;
  }
  .fee {
    color: #848484;
    font-size: 12px;
    >.flex {
      justify-content: space-between;
      &+.flex {
        margin-top: 14px;
      }
    }
    .val {
      color: #232323;
    }
  }
}
.box3 {
  margin-top: 10px;
  border-radius: 6px;
  border: 1px solid #E6E6E6;
  padding: 18px 12px 14px;
  .title {
    font-size: 16px;
    margin-bottom: 17px;
  }
  .ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 10px;
  }
  .li {
    border-radius: 6px;
    border: 1px solid #E6E6E6;
    width: 100px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    cursor: pointer;
    &.active {
      border-color: #000;
    }
  }
}
.section1 {
  padding-top: 14px;
  font-size: 12px;
  color: #8B8B8B;
  line-height: 24px;
}
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: #fff;
  padding: 10px 17px 29px;
  .btn {
    line-height: 44px;
    border-radius: 6px;
    background-color: #000;
    color: #FEFFFF;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>