<template>
  <div class="components">
    <div class="item flex" v-if="symbolInfo.market == 'US'">
      <img class="icon" src="/img/product/US.png" alt="极度证券">
      <div>
        <div class="title">
          <!-- 纽交所 -->
          {{ $t('product.l52') }}
        </div>
        <div class="type">
          <!-- 股票 -->
          {{ $t('download.l26') }}
        </div>
      </div>
    </div>
    <div class="item flex" v-if="symbolInfo.market == 'HK'">
      <img class="icon" src="/img/product/HK.png" alt="极度证券">
      <div>
        <div class="title">
          <!-- 港交所 -->
          {{ $t('product.l53') }}
        </div>
        <div class="type">
          <!-- 股票 -->
          {{ $t('download.l26') }}
        </div>
      </div>
    </div>
    <div class="item flex" v-if="symbolInfo.market == 'CN'">
      <img class="icon" src="/img/product/CN.png" alt="极度证券">
      <div>
        <div class="title" v-if="symbolInfo.symbol.indexOf('SH') !== -1">
          <!-- 上交所 -->
          {{ $t('product.l54') }}
        </div>
        <div class="title" v-if="symbolInfo.symbol.indexOf('SZ') !== -1">
          <!-- 深交所 -->
          {{ $t('product.l55') }}
        </div>
        <div class="type">
          <!-- 股票 -->
          {{ $t('download.l26') }}
        </div>
      </div>
    </div>
    <div class="item flex" v-if="symbolInfo.market == 'CFD'">
      <img class="icon" src="/img/product/CFD.png?1" alt="极度证券">
      <div>
        <div class="title">
          <!-- 综合市场 -->
          {{ $t('product.l56') }}
        </div>
      </div>
    </div>
    <div class="item flex">
      <img class="icon" src="/img/product/tag1.png" alt="极度证券">
      <div>
        <div class="title">
          <!-- 极速行情 -->
          {{ $t('product.l57') }}
        </div>
      </div>
    </div>
    <div class="item flex">
      <img class="icon" src="/img/product/tag2.png" alt="极度证券">
      <div>
        <div class="title">
          <!-- 支持融资 -->
          {{ $t('product.l58') }}
        </div>
      </div>
    </div>
    <div class="item flex">
      <img class="icon" src="/img/product/tag3.png" alt="极度证券">
      <div>
        <div class="title">
          <!-- 支持做空 -->
          {{ $t('product.l59') }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['symbolInfo'],
}
</script>
<style lang="less" scoped>
.components {
  padding: 20px 18px 30px;
  background-color: #fff;
  color: #000;
  .item {
    padding: 10px 0;
  }
  .icon {
    height: 24px;
    margin-right: 16px;
  }
  .title {
    font-weight: 600;
  }
  .type {
    font-size: 12px;
    color: #9B9B9B;
    margin-top: 8px;
  }
}
</style>