<template>
  <div class="swipe">
    <van-swipe :autoplay="3000" :show-indicators="false">
      <van-swipe-item>
        <div class="top flex">
          <div class="left flex">
            <div class="line"></div>
            <div>
              <!-- 热门 -->
              {{ $t('market.l6') }}
            </div>
          </div>
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in list1" :key="item">
            <div class="li" @click="toUrl(item)" :class="{up: productDataObj[item].spread >= 0, down: productDataObj[item].spread < 0}">
              <div class="title">{{ productDataObj[item].title }}</div>
              <div class="ask">{{ $handleDigits(productDataObj[item].ask, productDataObj[item].digits) }}</div>
              <div class="spread flex">
                <div>{{ productDataObj[item].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item].spread, productDataObj[item].digits) }}</div><div>{{ productDataObj[item].percentage > 0 ? '+' : ''  }}{{ productDataObj[item].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
      <van-swipe-item>
        <div class="top flex">
          <div class="left flex">
            <div class="line"></div>
            <div>
              <!-- 香港 -->
              {{ $t('market.l7') }}
            </div>
          </div>
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in list2" :key="item">
            <div class="li" @click="toUrl(item)" :class="{up: productDataObj[item].spread >= 0, down: productDataObj[item].spread < 0}">
              <div class="title">{{ productDataObj[item].title }}</div>
              <div class="ask">{{ $handleDigits(productDataObj[item].ask, productDataObj[item].digits) }}</div>
              <div class="spread flex">
                <div>{{ productDataObj[item].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item].spread, productDataObj[item].digits) }}</div><div>{{ productDataObj[item].percentage > 0 ? '+' : ''  }}{{ productDataObj[item].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
      <van-swipe-item>
        <div class="top flex">
          <div class="left flex">
            <div class="line"></div>
            <div>
              <!-- 美国 -->
              {{ $t('market.l8') }}
            </div>
          </div>
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in list3" :key="item">
            <div class="li" @click="toUrl(item)" :class="{up: productDataObj[item].spread >= 0, down: productDataObj[item].spread < 0}">
              <div class="title">{{ productDataObj[item].title }}</div>
              <div class="ask">{{ $handleDigits(productDataObj[item].ask, productDataObj[item].digits) }}</div>
              <div class="spread flex">
                <div>{{ productDataObj[item].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item].spread, productDataObj[item].digits) }}</div><div>{{ productDataObj[item].percentage > 0 ? '+' : ''  }}{{ productDataObj[item].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
      <van-swipe-item>
        <div class="top flex">
          <div class="left flex">
            <div class="line"></div>
            <div>
              <!-- A股 -->
              {{ $t('common.l61') }}
            </div>
          </div>
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in list4" :key="item">
            <div class="li" @click="toUrl(item)" :class="{up: productDataObj[item].spread >= 0, down: productDataObj[item].spread < 0}">
              <div class="title">{{ productDataObj[item].title }}</div>
              <div class="ask">{{ $handleDigits(productDataObj[item].ask, productDataObj[item].digits) }}</div>
              <div class="spread flex">
                <div>{{ productDataObj[item].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item].spread, productDataObj[item].digits) }}</div><div>{{ productDataObj[item].percentage > 0 ? '+' : ''  }}{{ productDataObj[item].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
      <van-swipe-item v-if="appParams.uncrypto">
        <div class="top flex">
          <div class="left flex">
            <div class="line"></div>
            <div>
              <!-- 综合 -->
              {{ $t('market.l10') }}
            </div>
          </div>
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in list5" :key="item">
            <div class="li" @click="toUrl(item)" :class="{up: productDataObj[item].spread >= 0, down: productDataObj[item].spread < 0}">
              <div class="title">{{ productDataObj[item].title }}</div>
              <div class="ask">{{ $handleDigits(productDataObj[item].ask, productDataObj[item].digits) }}</div>
              <div class="spread flex">
                <div>{{ productDataObj[item].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item].spread, productDataObj[item].digits) }}</div><div>{{ productDataObj[item].percentage > 0 ? '+' : ''  }}{{ productDataObj[item].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
      <van-swipe-item>
        <div class="top flex">
          <div class="left flex">
            <div class="line"></div>
            <div>
              <!-- 全球 -->
              {{ $t('market.l11') }}
            </div>
          </div>
        </div>
        <van-row gutter="5">
          <van-col span="8" v-for="item in list6" :key="item">
            <div class="li" @click="toUrl(item)" :class="{up: productDataObj[item].spread >= 0, down: productDataObj[item].spread < 0}">
              <div class="title">{{ productDataObj[item].title }}</div>
              <div class="ask">{{ $handleDigits(productDataObj[item].ask, productDataObj[item].digits) }}</div>
              <div class="spread flex">
                <div>{{ productDataObj[item].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item].spread, productDataObj[item].digits) }}</div><div>{{ productDataObj[item].percentage > 0 ? '+' : ''  }}{{ productDataObj[item].percentage }}%</div>
              </div>
            </div>
          </van-col>
        </van-row>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import bus from "@/utils/bus";
export default {
  inject: ['getproductDataObj'],
  data () {
    return {
      
    }
  },
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
    list1() {
      return ['000001.SH', '.DJI.US', 'HSI.HK'].filter(item => this.productDataObj[item])
    },
    list2() {
      return ['HSI.HK', 'HSTECH.HK', 'HSCEI.HK'].filter(item => this.productDataObj[item])
    },
    list3() {
      return ['.DJI.US', '.IXIC.US', 'SPY.US'].filter(item => this.productDataObj[item])
    },
    list4() {
      return ['000001.SH', '399001.SZ', '399006.SZ'].filter(item => this.productDataObj[item])
    },
    list5() {
      return ['XAUUSD', 'BTCUSD', 'XBRUSD'].filter(item => this.productDataObj[item])
    },
    list6() {
      return ['000001.SH', '.DJI.US', 'HSI.HK'].filter(item => this.productDataObj[item])
    }
  },
  methods: {
    toUrl(symbol) {
      bus.$emit('tabChange', this.productDataObj[symbol].market)
    }
  }
}
</script>
<style lang="less" scoped>
.swipe {
  padding: 14px 18px 0;
  background-color: #fff;
}
.top {
  justify-content: space-between;
  margin-bottom: 10px;
  .left {
    padding-left: 5px;
    font-size: 13px;
    font-weight: 600;
  }
  .line {
    width: 3px;
    height: 11px;
    background: #FF6F30;
    margin-right: 9px;
  }
}
.li {
  padding: 11px 2px;
  text-align: center;
  border-radius: 5px;
  &.up {
    color: #F24A40;
    background: linear-gradient(180deg, #FFEEEE 0%, #FAF7F7 100%);
  }
  &.down {
    color: #22AF6E;
    background: linear-gradient(180deg, #E5F7EE 0%, #F4FBF7 100%);
  }
  .title {
    font-size: 12px;
    color: #4A3939;
    margin-bottom: 6px;
  }
  .ask {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .spread {
    font-size: 10px;
    justify-content: center;
    column-gap: 5px;
  }
}
</style>