<template>
  <div class="view">
    <div class="list" v-for="li in list" :key="li.id">
      <div class="item">
        <div class="title flex" @click="toList(li.title)">
          <div>{{ titleText[li.title] || li.title }}</div>
          <img v-if="titleText[li.title]" class="arrow-right" src="/img/account/right.png" alt="极度证券">
        </div>
        <van-row v-if="li.type == 'option'">
          <van-col span="8" v-for="(item, index) in li.productList" :key="index">
            <div class="li" v-if="productDataObj[item.symbol]" :class="productDataObj[item.symbol].spread < 0 ? 'down' : 'up'" @click="$router.push('/product-detail/' + item.symbol + '/6')">
              <div class="mounth">1M</div>
              <div class="name name1">{{ productDataObj[item.symbol].title }}</div>
              <!-- <div class="name name1" v-else-if="language == 'zh-TW'">{{ productDataObj[item.symbol].name_cht || productDataObj[item.symbol].title }}</div> -->
              <!-- <div class="name name1" v-else>{{ productDataObj[item.symbol].name_en || (productDataObj[item.symbol].market == 'CFD' ? productDataObj[item.symbol].symbol : productDataObj[item.symbol].title) }}</div> -->
              <div class="ask flex">
                <div>{{ $handleDigits(productDataObj[item.symbol].ask, productDataObj[item.symbol].digits) }}</div>
                <div class="val1">{{ productDataObj[item.symbol].spread > 0 ? '+' : ''  }}{{ productDataObj[item.symbol].percentage }}%</div>
              </div>
              <div class="fee flex">
                <div class="lab">
                  <!-- 费率 -->
                  {{ $t('home.l8')}}: 
                </div>
                <div>{{item.info['100'].price_1m}}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
        <van-row v-else>
          <van-col span="8" v-for="(item, index) in li.productList" :key="index">
            <div class="li" v-if="productDataObj[item.symbol]" :class="productDataObj[item.symbol].spread < 0 ? 'down' : 'up'" @click="$router.push('/product-detail/' + item.symbol)">
              <div class="name">{{ productDataObj[item.symbol].title }}</div>
              <!-- <div class="name" v-else-if="language == 'zh-TW'">{{ productDataObj[item.symbol].name_cht || productDataObj[item.symbol].title }}</div> -->
              <!-- <div class="name" v-else>{{ productDataObj[item.symbol].name_en || (productDataObj[item.symbol].market == 'CFD' ? productDataObj[item.symbol].symbol : productDataObj[item.symbol].title) }}</div> -->
              <div class="ask">{{ $handleDigits(productDataObj[item.symbol].ask, productDataObj[item.symbol].digits) }}</div>
              <div class="spread">
                {{ productDataObj[item.symbol].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item.symbol].spread, productDataObj[item.symbol].digits) }} {{ productDataObj[item.symbol].spread > 0 ? '+' : ''  }}{{ productDataObj[item.symbol].percentage }}%
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import { getProductShowList } from "@/api/product";
import bus from '@/utils/bus'
export default {
  data () {
    return {
      list: []
    }
  },
  inject: ['getproductDataObj'],
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    titleText() {
      return {
        '热门个股': this.$t('market.l23'),
        '加密货币': this.$t('market.l24'),
        '现货市场': this.$t('market.l25'),
        '全球指数': this.$t('market.l26'),
        '热门期权': this.$t('market.l27'),
        '外汇市场': this.$t('market.l28'),
        '贵金属': this.$t('market.l22'),
        '能源': this.$t('market.l19'),
      }
    }
  },
  activated () {
    this.getProductShowList()
  },
  created () {
    this.getProductShowList()
  },
  methods: {
    toList(title) {
      var urlObj = {
        '热门个股': '/market/stock',
        '加密货币': '/market/cfd/5',
        '现货市场': '/market/cfd/2',
        '全球指数': '/market/cfd/4',
        '外汇市场': '/market/cfd/1',
        '能源': '/market/cfd/3',
        '贵金属': '/market/cfd/2',
        '热门期权': '/market/options',
      }
      if (urlObj[title]) {
        this.$router.replace(urlObj[title])
      }
    },
    getProductShowList() {
      if (this.fullscreenLoading) {
        return
      }
      this.fullscreenLoading = true
      getProductShowList({
        groupList: JSON.stringify([1, 5, 2, 3, 6, 20, 4]),
      }).then(res => {
        var list = res.list || []
        var list1 = []
        var symbolList = []
        list.forEach(item => {
          if (item.productList) {
            item.productList = item.productList.slice(0, item.count * 3)
            list1.push(item)
            item.productList.forEach((a, index) => {
              symbolList.push(a.symbol);
            })
          }
        })
        this.list = list1
        bus.$emit("alterProductData", {
          getData: symbolList,
          subscribeList: symbolList,
        });
      }).catch(() => {}).finally(() => {
        this.fullscreenLoading = false
      })
    },
  }
}
</script>
<style lang="less" scoped>
.view {
  padding-bottom: 16px;
}
.list {
  padding: 0 17px;
  .item {
    padding-top: 16px;
  }
  .title {
    padding-bottom: 3px;
    justify-content: space-between;
    font-weight: 600;
    .arrow-right {
      width: 7px;
    }
  }
  .van-row {
    margin: 0 -3px;
  }
  .van-col {
    padding: 7px 3px 0 !important;
  }
  .li {
    background-color: #F7F8FA;
    border-radius: 5px;
    padding: 8px 4px 11px 10px;
    position: relative;
    &.up {
      color: var(--red-);
    }
    &.down {
      color: var(--green-);
    }
    .name {
      font-size: 12px;
      line-height: 18px;
      color: #585858;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 3px;
      &.name1 {
        margin-bottom: 5px;
      }
    }
    .ask {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 3px;
      &.flex {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 1px;
        justify-content: space-between;
      }
      .val1 {
        font-size: 10px;
        font-weight: 400;
      }
    }
    .spread {
      font-size: 10px;
    }
    .fee {
      font-weight: 400;
      font-size: 10px;
      color: #F24A40;
      .lab {
        color: #585858;
      }
    }
  }
  .mounth {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #E8EAEF;
    border-radius: 0px 5px 0px 4px;
    width: 21px;
    line-height: 14px;
    text-align: center;
    font-size: 10px;
    color: #585858;
  }
}
</style>