<template>
  <div class="com">
    <div class="title">
      <!-- 灵活杠杆 放大收益 -->
      {{ $t('home.l47') }}
    </div>
    <div class="name-ul flex">
      <div class="li" :class="{active: symbol == item.symbol}" v-for="item in list" :key="item.symbol" @click="symbol = item.symbol">
        {{ item[language] }}
      </div>
    </div>
    <div class="list flex">
      <div class="label">
        <!-- 交易金额 -->
        {{ $t('home.l53') }}
      </div>
      <div class="right flex">
        <!-- 万 -->
        <template v-if="language == 'zh-CN' || language == 'zh-TW'">
          <div class="li" :class="{active: amount == 1}" @click="amount = 1">100{{ $t('home.l11') }}</div>
          <div class="li" :class="{active: amount == 2}" @click="amount = 2">200{{ $t('home.l11') }}</div>
          <div class="li" :class="{active: amount == 3}" @click="amount = 3">300{{ $t('home.l11') }}</div>
        </template>
        <template v-else>
          <div class="li" :class="{active: amount == 1}" @click="amount = 1">1M</div>
          <div class="li" :class="{active: amount == 2}" @click="amount = 2">2M</div>
          <div class="li" :class="{active: amount == 3}" @click="amount = 3">3M</div>
        </template>
      </div>
    </div>
    <div class="list flex">
      <div class="label">
        <!-- 杠杆倍数 -->
        {{ $t('product.l71') }}
      </div>
      <div class="right flex">
        <!-- 倍 -->
        <div class="li" :class="{active: lever == 10}" @click="lever = 10">
          10{{ $t('home.l48') }}
        </div>
        <div class="li" :class="{active: lever == 5}" @click="lever = 5">
          20{{ $t('home.l48') }}
        </div>
        <div class="li" :class="{active: lever == 2}" @click="lever = 2">
          50{{ $t('home.l48') }}
        </div>
      </div>
    </div>
    <div class="list flex">
      <div class="label">
        <!-- 仅需保证金 -->
        {{ $t('home.l49') }}
      </div>
      <div class="right">
        <div class="number" v-if="language == 'zh-CN' || language == 'zh-TW'">{{ amount * lever }}{{ $t('home.l11') }}</div>
        <div class="number" v-else>{{ (amount * lever) + '0,000' }}</div>
      </div>
    </div>
    <div class="btns flex">
      <div class="btn ltn" @click="$router.push(`/exchange/${symbol}/buy`)">
        <!-- 买入 -->
        {{ $t('exchange.l50') }}
      </div>
      <div class="btn rtn" @click="$router.push(`/exchange/${symbol}/sell`)">
        <!-- 卖出 -->
        {{ $t('exchange.l51') }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        {
          symbol: '600519.SH',
          'en': 'Moutai',
          'zh-CN': '贵州茅台',
          'zh-TW': '貴州茅臺酒股份有限公司',
        },
        {
          symbol: '00700.HK',
          'en': 'Tencent',
          'zh-CN': '腾讯控股',
          'zh-TW': '騰訊控股有限公司',
        },
        {
          symbol: '03690.HK',
          'en': 'Meituan',
          'zh-CN': '美团',
          'zh-TW': '美團',
        },
        {
          symbol: 'AAPL.US',
          'en': 'Apple',
          'zh-CN': '苹果',
          'zh-TW': '蘋果',
        },
        {
          symbol: 'NVDA.US',
          'en': 'NVDA',
          'zh-CN': '英伟达',
          'zh-TW': '英偉達',
        }
      ],
      symbol: '600519.SH',
      amount: 1,
      lever: 5
    }
  }
}
</script>
<style lang="less" scoped>
.com {
  border-radius: 6px;
  border: 1px solid #EBEBEB;
  padding: 14px 9px 18px;
  margin-bottom: 19px;
}
.title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
}
.name-ul {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  column-gap: 7px;
  margin-bottom: 15px;
  .li {
    cursor: pointer;
    padding: 7px;
    background-color: #F7F8FA;
    border-radius: 4px;
    border: 1px solid #F7F8FA;
    color: #6E6F6F;
    &.active{
      border-color:#000000;
      background-color: #FFFFFF;
      color: #000;
    }
  }
}
.list {
  margin-bottom: 15px;
  .label {
    width: 80px;
    padding-right: 4px;
    color: #6F6F6F;
  }
  .right {
    justify-content: space-between;
    column-gap: 7px;
    flex: 1;
    min-width: 20%;
    .li {
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid #EBEBEB;
      color: #6E6F6F;
      flex: 1;
      text-align: center;
      padding: 6px 0;
      &.active {
        color: #000;
        border-color: #000;
      }
    }
  }
  .number {
    font-weight: 600;
    font-size: 16px;
    color: #F7483F;
  }
}
.btns {
  padding-top: 8px;
  column-gap: 9px;
  .btn {
    cursor: pointer;
    flex: 1;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    border-radius: 6px;
    padding: 8px 0;
    border: 1px solid #000;
  }
  .ltn {
    background-color: #000;
    color: #FEFFFF;
  }
  .rtn {
    color: #000;
  }
}
</style>