<template>
  <div class="com" v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="sticky">
      <div class="header">
        <div class="back">
          <backIcon back="cancel" @cancel="cancel"/>
        </div>
        <!-- 存款方式 -->
        {{ $t('fund.l49') }}
      </div>
      <div class="search-box flex">
        <div class="input-box flex">
          <img class="search" src="/img/deposit/search.png" alt="极度证券">
          <!-- 搜索 -->
          <el-input v-model="value" :placeholder="$t('common.l23')"></el-input>
        </div>
        <div class="right flex" @click="filterPop = true">
          <div>
            <!-- 选择 -->
            {{ $t('fund.l50') }}
          </div>
          <img class="filter" src="/img/deposit/filter.png" alt="极度证券">
        </div>
      </div>
    </div>
    <div class="list" v-if="list1.length">
      <div class="item" v-for="item in list1" :key="item.id">
        <div class="body">
          <!-- 第三方支付 -->
          <div class="type">{{ item.type > 100 ? $t('account.l30') : payName[item.type] }}</div>
          <img class="logo" :src="item.logo" alt="极度证券">
          <div class="name">{{ item.name }}</div>
          <div class="row flex">
            <div class="col col1">
              <div>
                <div class="val">{{ item.min_amount }}~{{ item.max_amount }}USD</div>
                <div class="label">
                  <!-- 单笔支付限额： -->
                  {{ $t('fund.l38') }}
                </div>
              </div>
            </div>
            <div class="line"></div>
            <div class="col flex">
              <div>
                <div class="val">{{ item.average_time }}</div>
                <div class="label">
                  <!-- 处理时间： -->
                  {{ $t('fund.l39') }}
                </div>
              </div>
            </div>
            <div class="line"></div>
            <div class="col col1 flex">
              <div>
                <div class="val">{{ item.currency }}</div>
                <div class="label">
                  <!-- 支持货币： -->
                  {{ $t('fund.l40') }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-box flex">
          <div class="btn ltn" @click="$router.push('/channel/' + item.id)">
            <!-- 详情 -->
            {{ $t('fund.l51') }}
          </div>
          <div class="line"></div>
          <div class="btn rtn" @click.stop="selectPay(item)">
            <!-- 存款 -->
            {{ $t('home.l13') }}
          </div>
        </div>
      </div>
    </div>
    <NoData v-if="list1.length === 0" pTop="204px"/>
    <van-popup get-container="body" v-model="filterPop" position="right" :style="{ width: '100%' }">
      <filterBox :currency="currency1" @filterBack="filterBack" @cancel="filterPop = false"/>
    </van-popup>
  </div>
</template>
<script>
import { getCashChannelList } from "@/api/assets";
import filterBox from "./filterBox.vue";
export default {
  props: ['currency'],
  components: {
    filterBox
  },
  data () {
    return {
      value: '',
      currency1: '',
      type: '',
      list: [],
      filterPop: false
    }
  },
  computed: {
    payName() {
      return {
        // '1': '银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        '1': this.$t('account.l31'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
      }
    },
    list1() {
      if (this.value.trim()) {
        return this.list.filter(item => (item.name.toLowerCase().indexOf(this.value.trim().toLowerCase()) !== -1))
      }
      return this.list
    }
  },
  created () {
    this.currency1 = this.currency
    this.getCashChannelList()
  },
  methods: {
    reset(currency) {
      if (this.currency1 == currency) {
        return
      }
      this.currency1 = currency
      this.type = ''
      this.getCashChannelList(true)
    },
    getCashChannelList(sign) {
      if (!sign) {
        this.fullscreenLoading = true
      }
      getCashChannelList({
        type: this.type,
        currency: this.currency1
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          if (item.value) {
            item.value = JSON.parse(item.value)
          } else {
            item.value = {}
          }
        })
        this.list = list
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
    filterBack(info) {
      this.filterPop = false
      this.type = info.type
      this.currency1 = info.currency
      this.getCashChannelList()
    },
    selectPay(item) {
      this.$emit('success', item)
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="less" scoped>
.com {
  min-height: 100vh;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-);
  margin-bottom: 6px;
}
.header {
  position: relative;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 17px;
  font-size: 18px;
  font-weight: 600;
  .back {
    position: absolute;
    left: 9px;
    top: 11px;
  }
}
.search-box {
  padding: 10px 17px;
  .right {
    font-size: 16px;
    color: #666666;
    padding-left: 14px;
    cursor: pointer;
    .filter {
      width: 16px;
      margin-left: 3px;
    }
  }
}
.input-box {
  background: #FAFBFC;
  border-radius: 7px;
  padding-left: 13px;
  padding-right: 30px;
  flex: 1;
  min-width: 10%;
  max-width: 100%;
  .search {
    width: 18px;
  }
  .el-input {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
}
.list {
  padding: 0 17px;
}
.item {
  margin-bottom: 16px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  .body {
    position: relative;
    padding: 15px 11px 17px;
    .type {
      position: absolute;
      top: 9px;
      right: 8px;
      background: #FFFFFF;
      border-radius: 3px;
      border: 1px solid #1BA27A;
      padding: 5px 4px;
      font-size: 12px;
      color: #1BA27A;
    }
    .logo {
      display: block;
      margin-bottom: 10px;
      width: 104px;
    }
  }
  .name {
    font-weight: 600;
    color: #0D0D0D;
    font-size: 14px;
    margin-bottom: 17px;
  }
  .row {
    justify-content: space-between;
  }
  .col {
    flex: 1;
    min-width: 10%;
    max-width: 20%;
    justify-content: center;
    .val {
      font-size: 14px;
      color: #0D0D0D;
      margin-bottom: 8px;
    }
    .label {
      font-size: 12px;
      color: #B8B8B8;
    }
  }
  .col1 {
    flex: 2;
    max-width: 34%;
  }
  .btn-box {
    background: #FAFBFC;
    box-shadow: 0px -2px 3px 0px rgba(239,239,239,0.5);
    .btn {
      flex: 1;
      cursor: pointer;
      text-align: center;
      line-height: 42px;
      font-size: 16px;
    }
    .ltn {
      color: #0C0C0C;
    }
    .rtn {
      color: var(--color-);
    }
  }
}
.line {
  width: 1px;
  height: 17px;
  opacity: 0.51;
  background-color: #C3C3C3;
}
::v-deep {
  .input-box {
    .el-input__inner {
      border: none;
      height: 44px;
      line-height: 44px;
      padding-left: 4px;
      background-color: #FAFBFC;
    }
  }
}
</style>