<template>
  <div class="components" v-if="list.length">
    <van-swipe :width="143" :autoplay="2000" :show-indicators="false">
      <van-swipe-item v-for="(item) in list" :key="item.symbol">
        <div class="col" :class="{up: productDataObj[item.symbol].spread >= 0, down: productDataObj[item.symbol].spread < 0}">
          <div class="item" @click="toUrl(item.symbol)">
            <div class="top">
              <div class="title" v-if="language == 'zh-CN'">{{ productDataObj[item.symbol].title }}</div>
              <div class="title" v-else-if="language == 'zh-TW'">{{ productDataObj[item.symbol].name_cht || productDataObj[item.symbol].title }}</div>
              <div class="title" 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 flex">
                <div>{{ productDataObj[item.symbol].spread > 0 ? '+' : ''  }}{{ $handleDigits(productDataObj[item.symbol].spread, productDataObj[item.symbol].digits) }}</div><div>{{ productDataObj[item.symbol].percentage > 0 ? '+' : ''  }}{{ productDataObj[item.symbol].percentage }}%</div>
              </div>
              <div class="char-box" style="height: 47px;">
                <chart v-if="priceObj[item.symbol]" :list="priceObj[item.symbol]" :info="productDataObj[item.symbol]" :id="item.symbol" height="47px"/>
              </div>
            </div>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import { getProductList, getPriceBatchList } from "@/api/product";
import chart from "./chart.vue";
import bus from '@/utils/bus'
export default {
  components: {
    chart
  },
  inject: ['getproductDataObj'],
  data () {
    return {
      list: [],
      priceObj: []
    }
  },
  computed: {
    productDataObj() {
      return this.getproductDataObj()
    },
  },
  mounted () {
    this.getProductList()
  },
  methods: {
    getProductList() {
      getProductList({
        index: 1
      }).then((res) => {
        var list1 = res.list || [];
        var list = list1;
        if (!this.appParams.uncrypto) {
          list = list1.filter(item => item.market !== 'CFD')
        }
        this.list = list;
        var obj = {};
        var symbolList = [];
        this.list.forEach(item => {
          symbolList.push(item.symbol)
          if (obj[item.market]) {
            obj[item.market].push(item.symbol)
          } else {
            obj[item.market] = [item.symbol]
          }
        })
        bus.$emit("alterProductData", {
          setData: this.list,
          subscribeList: symbolList
        });
        Object.keys(obj).forEach((item) => {
          this.getPriceBatchList(obj[item], item)
        })
      }).catch(() => {})
    },
    spreadPrice(item, digits) {
      if (!item.ask) {
        return ''
      }
      var a = 1
      for(var i=0; i< digits; i++) {
        a *= 10
      }
      return Math.abs(((item.bid - item.ask) * a).toFixed()) || 0
    },
    getPriceBatchList(list, market) {
      getPriceBatchList({
        symbol: JSON.stringify(list),
        market,
        type: 1,
        count: 100,
        endTime: parseInt(new Date().getTime()),
      }).then(res => {
        var list = res || []
        list.forEach(item => {
          this.$set(this.priceObj, item.symbol, item.list)
        })
      }).catch(() => {})
    },
    toUrl(symbol) {
      this.$router.push('/product-detail/' + symbol)
    }
  }
}
</script>
<style lang="less" scoped>
.components {
}
.van-swipe-item {
  padding-right: 10px;
}
.col {
  border-radius: 11px;
  &.up {
    color: #D54037;
    background: linear-gradient(137deg, #FFFBEA 0%, #FFD9D8 100%);
  }
  &.down {
    color: #53B949;
    background: linear-gradient(137deg, #F8FBE3 0%, #C6F4D9 100%);
  }
  .top {
    padding: 10px 11px 0 7px;
  }
  .title {
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    color: #000;
    margin-bottom: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ask {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 9px;
  }
  .spread {
    font-size: 11px;
    justify-content: space-between;
  }
}
</style>