<template>
  <div class="box">
    <van-row gutter="6">
      <van-col span="6">
        <div class="item flex" @click="$router.push('/market/options')">
          <img class="icon" src="/img/home/icon9.png" alt="极度证券">
          <div class="text">
            <!-- 期权 -->
            {{ $t('account.l55') }}
          </div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item flex" @click="$router.push('/market/stock/US')">
          <img class="icon" src="/img/home/icon10.png" alt="极度证券">
          <div class="text">
            <!-- 美股通 -->
            {{ $t('common.l18') }}
          </div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item flex" @click="$router.push('/market/stock/CN')">
          <img class="icon" src="/img/home/icon11.png" alt="极度证券">
          <div class="text">
            <!-- A股通 -->
            {{ $t('share.l2') }}
          </div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item flex" @click="$router.push('/market/stock/HK')">
          <img class="icon" src="/img/home/icon12.png" alt="极度证券">
          <div class="text">
            <!-- 港股通 -->
            {{ $t('common.l19') }}
          </div>
        </div>
      </van-col>
    </van-row>
    <van-row gutter="6">
      <van-col span="6" v-for="(item, index) in groupList" :key="item.id" @click="$router.push('/market/cfd/' + item.id)">
        <div class="item flex">
          <img class="icon" :src="`/img/home/icon${13+index}.png`" alt="极度证券">
          <div class="text">{{ titleName[item.title] }}</div>
        </div>
      </van-col>
      <van-col span="6">
        <div class="item flex" @click="$router.push('/download')">
          <img class="icon" src="/img/home/icon17.png" alt="极度证券">
          <div class="text">
            <!-- APP下载 -->
            {{ $t('home.l17') }}
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { getProductGroupList } from "@/api/product";
export default {
  data () {
    return {
      groupList: [],
      titleList: ['加密货币', '贵金属', '外汇']
    }
  },
  computed: {
    titleName() {
      return {
        "指数": this.$t('download.l27'),
        "能源": this.$t('market.l19'),
        "数字货币": this.$t('account.l33'),
        "加密货币": this.$t('market.l24'),
        "外汇": this.$t('market.l21'),
        "贵金属": this.$t('market.l22')
      }
    }
  },
  created () {
    this.getProductGroupList()
  },
  methods: {
    getProductGroupList() {
      getProductGroupList({
        visible: 1
      }).then(res => {
        this.groupList = (res.list || []).filter(item => this.titleList.indexOf(item.title) !== -1).sort((a, b) =>  this.titleList.indexOf(a.title) -  this.titleList.indexOf(b.title))
      }).catch(()=> {})
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  margin-bottom: 22px;
}
.van-row {
  &+.van-row {
    margin-top: 12px;
  }
  .item {
    flex-direction: column;
    cursor: pointer;
    text-align: center;
  }
  .text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .icon {
    width: 46px;
    margin-bottom: 8px;
  }
}
</style>