<template>
  <div class="pop" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="sticky">
      <div class="header">
        <!-- 选择 -->
        {{ $t('fund.l50') }}
        <div class="right" @click="cancel">
          <!-- 关闭 -->
          {{ $t('setting.btn5') }}
        </div>
      </div>
    </div>
    <div class="container">
      <div class="label">
        <!-- 存款方式 -->
        {{ $t('fund.l49') }}
      </div>
      <div class="ul">
        <div class="li" :class="{active: type == 1}" @click="type = 1">
          <!-- 银行汇款 -->
          {{ $t('account.l31') }}
          <img class="check" src="/img/deposit/check.png" alt="极度证券">
        </div>
        <!-- <div class="li" :class="{active: type == 3}" @click="type = 3">
          数字货币
          {{ $t('account.l33') }}
          <img class="check" src="/img/deposit/check.png" alt="极度证券">
        </div> -->
        <div class="li" :class="{active: type == 2}" @click="type = 2">
          <!-- 国际电汇 -->
          {{ $t('account.l32') }}
          <img class="check" src="/img/deposit/check.png" alt="极度证券">
        </div>
        <div class="li" :class="{active: type == 101}" @click="type = 101">
          <!-- 电子钱包 -->
          {{ $t('account.l17') }}
          <img class="check" src="/img/deposit/check.png" alt="极度证券">
        </div>
      </div>
      <div class="label">
        <!-- 支付币种 -->
        {{ $t('fund.l52') }}
      </div>
      <div class="ul">
        <div class="li" :class="{active: currency1 == item.symbol}" @click="currency1 = item.symbol" v-for="item in currencyList" :key="item.id">
          {{ item.symbol }}
          <img class="check" src="/img/deposit/check.png" alt="极度证券">
        </div>
      </div>
      <div class="btn-box flex">
        <div class="btn ltn" @click="reset">
          <!-- 重置 -->
          {{ $t('common.l44') }}
        </div>
        <div class="btn rtn" @click="submit">
          <!-- 确定 -->
          {{ $t('common.l50') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrencyList } from "@/api/product";
export default {
  props: ['currency'],
  data () {
    return {
      type: '',
      currency1: '',
      currencyList: []
    }
  },
  created () {
    this.currency1 = this.currency
    this.getCurrencyList()
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    },
    reset() {
      this.type = ''
      this.currency1 = this.currency
    },
    submit() {
      this.$emit('filterBack', {
        type: this.type,
        currency: this.currency1,
      })
    },
    getCurrencyList() {
      this.fullscreenLoading = true
      getCurrencyList({
        pay: 1,
        type: 1
      }).then(res => {
        this.currencyList = res.list || []
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>
.pop {
  min-height: 100vh;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-);
  margin-bottom: 14px;
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  .right {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 17px;
    font-weight: 400;
    color: #999999;
  }
}
.container {
  padding: 0 17px;
}
.label {
  font-size: 16px;
  color: #040404;
  margin-bottom: 14px;
}
.ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 7px;
  row-gap: 8px;
  padding-bottom: 30px;
  .li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(33.33% - 7px);
    padding: 6px 2px;
    min-height: 56px;
    cursor: pointer;
    text-align: center;
    background: #F3F8F9;
    border-radius: 4px;
    font-size: 12px;
    color: #2A2E2F;
    position: relative;
    overflow: hidden;
    &.active {
      background: #FFEBEB;
      color: #FF0000;
      .check {
        display: block;
      }
    }
  }
  .check {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 21px;
    display: none;
  }
}
.btn-box {
  position: sticky;
  padding: 14px 0;
  column-gap: 8px;
  .btn {
    flex: 1;
    cursor: pointer;
    text-align: center;
    line-height: 42px;
    border-radius: 6px;
    font-size: 16px;
  }
  .ltn {
    border: 1px solid #EFEFEF;
    color: #0C0C0C;
  }
  .rtn {
    background-color: var(--color-);
    color: #fff;
    border: 1px solid var(--color-);
  }
}
</style>