<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <div class="sticky">
      <div class="header">
        <div class="back">
          <backIcon/>
        </div>
        <!-- 渠道详情 -->
        {{ $t('fund.l36') }}
      </div>
    </div>
    <div class="page" v-if="info.id">
      <div class="info">
        <div class="top flex">
          <img height="29px" :src="info.logo" alt="极度证券">
          <!-- 第三方支付 -->
          <div class="type">{{ info.type > 100 ? $t('account.l30') : payName[info.type] }}</div>
        </div>
        <div class="body">
          <div class="row">
            <div class="label">
              <!-- 渠道名称： -->
              {{ $t('fund.l37') }}
            </div>
            <div class="name">{{ info.name }}</div>
          </div>
          <div class="row">
            <div class="label">
              <!-- 单笔支付限额： -->
              {{ $t('fund.l38') }}
            </div>
            <div class="name">{{ info.min_amount }}-{{ info.max_amount }} USD</div>
          </div>
          <div class="row">
            <div class="label">
              <!-- 处理时间： -->
              {{ $t('fund.l39') }}
            </div>
            <div class="name">{{ info.average_time }}</div>
          </div>
          <div class="row">
            <div class="label">
              <!-- 支持货币： -->
              {{ $t('fund.l40') }}
            </div>
            <div class="name">{{ info.currency }}</div>
          </div>
        </div>
      </div>
      <div class="section">
        <div class="title">
          <!-- 使用规则 -->
          {{ $t('fund.l41') }}
        </div>
        <div class="row">
          <div class="label">
            <!-- 单笔支付限额： -->
            {{ $t('fund.l38') }}
          </div>
          <div class="name">{{ info.min_amount }}-{{ info.max_amount }} USD</div>
        </div>
      </div>
      <div class="section1" v-if="!info.description">
        <div class="sub">
          <!-- 注意事项 -->
          {{ $t('fund.l42') }}
        </div>
        <div class="col">
          <!-- 1、不同货币支付存款，将按照系统汇率进行转换存入账户。 -->
          {{ $t('fund.l43') }}
        </div>
        <div class="col">
          <!-- 2、法币存款请注意本人实名支付。 -->
          {{ $t('fund.l44') }}
        </div>
        <div class="col">
          <!-- 3、极度证券严格遵守反洗钱政策，将不定期审查异常资金活动。 -->
          {{ $t('fund.l45') }}
        </div>
        <div class="col">4、<span class="span">
          <!-- 请不要习惯性转账，付款禁止任何备注，否则钱款可能无法追回。 -->
          {{ $t('fund.l46') }}
        </span></div>
        <div class="col">5、<span class="span">
          <!-- 客户转账金额多余转账限额，款项打入了服务商的银行卡难以追回，一切损失需要客户自承担损失，公司不会提供任何补偿。 -->
          {{ $t('fund.l47') }}
        </span></div>
      </div>
      <div class="section1" v-if="info.description">
        <div class="sub">
          <!-- 注意事项 -->
          {{ $t('fund.l42') }}
        </div>
        <div class="col" v-html="info.description"></div>
      </div>
    </div>
    <div class="btn-box" v-if="info.id">
      <div class="btn" @click.stop="selectPay">
        <!-- 存款 -->
        {{ $t('home.l13') }}
      </div>
    </div>
  </div>
</template>
<script>
import { getCashChannelList } from "@/api/assets";
import { setSession } from "@/utils/sessionStorage";
export default {
  data () {
    return {
      id: '',
      info: {}
    }
  },
  computed: {
    payName() {
      return {
        // '1': '银行汇款',
        // '2': '国际电汇',
        // '3': '数字货币',
        '1': this.$t('account.l31'),
        '2': this.$t('account.l32'),
        '3': this.$t('account.l33'),
      }
    },
  },
  created () {
    this.getCashChannelList()
  },
  methods: {
    getCashChannelList() {
      this.fullscreenLoading = true
      getCashChannelList({
        id: this.$route.params.id
      }).then(res => {
        var list = res.list || []
        list.forEach(item => {
          if (item.value) {
            item.value = JSON.parse(item.value)
          } else {
            item.value = {}
          }
        })
        this.info = list[0] || {}
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
    selectPay() {
      setSession('channelInfo', this.info);
      this.$router.back();
    }
  }
}
</script>
<style lang="less" scoped>
.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-);
}
.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;
  }
}
.page {
  padding: 10px 17px 104px;
}
.info {
  padding: 0 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #E6E6E6;
  .top {
    justify-content: space-between;
    padding-top: 10px;
    .type {
      border-radius: 3px;
      border: 1px solid #1BA27A;
      line-height: 20px;
      padding: 0 5px;
      font-size: 12px;
      color: #1BA27A;
    }
  }
  .body {
    padding-top: 20px;
    padding-bottom: 14px;
  }
  .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 12px;
    column-gap: 8px;
    &+.row {
      margin-top: 14px;
    }
    .label {
      color: #8B8B8B;
    }
    .name {
      min-width: 10%;
      max-width: 100%;
      color: #232323;
    }
  }
}
.section {
  border-radius: 5px;
  border: 1px solid #E6E6E6;
  margin-bottom: 10px;
  padding: 14px 11px 18px;
  .title {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: 8px;
    font-size: 12px;
    color: #232323;
    .label {
      color: #8B8B8B;
    }
    .name {
      min-width: 10%;
      max-width: 100%;
    }
  }
}
.section1 {
  background-color: #FAFBFC;
  border-radius: 5px;
  border: 1px solid #E6E6E6;
  font-size: 12px;
  line-height: 20px;
  padding: 9px 11px;
  .sub {
    color: #0D0D0D;
  }
  .col {
    font-size: 11px;
    color: #8B8B8B;
  }
  .span {
    font-size: 11px;
    color: #FF6F30;
  }
}
.btn-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 17px;
  .btn {
    text-align: center;
    background: #000;
    border-radius: 6px;
    line-height: 44px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>