<template>
  <div class="list">
    <div class="line-box flex">
      <div class="line"></div>
    </div>
    <div class="sub">
      <!-- 当前交易账户 -->
      {{ $t('fund.l17') }}
    </div>
    <div class="item" @click="selectItem(cashInfo)" :class="{'active': cashInfo.uid == tragetInfo.uid && !tragetInfo.id}">
      <van-image
        width="20"
        height="20"
        round
        src="/img/user/usd.png?14"
      />
      <div class="right">
        <!-- 美元钱包账户 -->
        <div>{{ $t('account.l1') }}</div>
        <!-- 余额 -->
        <div class="balance">{{ $t('common.l33') }}: {{ $numToThousand(cashInfo.balance) }} USD</div>
      </div>
      <img class="check" src="/img/user/check.png" alt="极度证券">
    </div>
    <div class="item" @click="selectItem(item)" :class="{'active': item.id == tragetInfo.id && tragetInfo.id}" v-for="(item, index) in accountList" :key="index">
      <van-image
        width="20"
        height="20"
        round
        :src="`/img/user/${item.server ? item.server : 'usd'}.png?14`"
      />
      <div class="right">
        <!-- 美元钱包账户 -->
        <div>{{ serverName[item.server] || $t('account.l1') }}</div>
        <!-- 余额 -->
        <div class="balance">{{ $t('common.l33') }}: {{ $numToThousand((item.id ? item.margin_free : item.balance)) }} {{ serverUtil[item.server] || 'USD' }}</div>
      </div>
      <img class="check" src="/img/user/check.png" alt="极度证券">
    </div>
    <div class="item" @click="selectItem(followAccount)" :class="{'active': followAccount.id == tragetInfo.id && tragetInfo.id}">
      <van-image
        width="20"
        height="20"
        round
        src="/img/user/copy.png"
      />
      <div class="right">
        <div>{{ $t('follow.l146') }}</div>
        <!-- 余额 -->
        <div class="balance">{{ $t('common.l33') }}: {{ $numToThousand(followAccount.balance) }} USD</div>
      </div>
      <img class="check" src="/img/user/check.png" alt="极度证券">
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  props: ['tragetInfo'],
  data () {
    return {
      
    }
  },
  computed: {
    ...mapGetters(['cashInfo', 'accountList', 'followAccount']),
  },
  methods: {
    selectItem(item) {
      this.$emit('success', item)
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 11px 11px 46px;
  .item {
    padding: 13px 7px;
    border-radius: 6px;
    font-size: 16px;
    color: var(--color-1-);
    border: 1px solid transparent;
    position: relative;
    display: flex;
    align-items: flex-start;
    &.active {
      border-color: #858585;
      .check {
        display: block;
      }
    }
  }
  .right {
    font-size: 15px;
    padding-left: 8px;
    margin-top: -1px;
  }
  .balance {
    margin-top: 6px;
    font-size: 11px;
    color: #828282;
  }
  .check {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    display: none;
  }
}
.line-box {
  justify-content: center;
  margin-bottom: 28px;
  .line {
    width: 36px;
    height: 4px;
    background: #E7E7E7;
    border-radius: 2px;
  }
}
.sub {
  font-weight: 500;
  color: #000000;
  font-size: 16px;
  padding-bottom: 18px;
  padding-left: 8px;
}
</style>