<template>
	<div class="acea-row mb20">
		<div class="infoBox acea-row mb30" v-for="(item, index) in list" :key="index">
			<div class="iconCrl mr15" :class="{
	    one: index % 4 == 0,
	    two: index % 4 == 1,
	    three: index % 4 == 2,
	    four: index % 4 == 3,
	  }">
				<i :class="item.icon" class="iconfont"></i>
			</div>
			<div class="info">
				<div class="sp1">
					<span v-text="item.name" class="mr5"></span>
					<Poptip word-wrap trigger="hover" placement="right-start">
						<Icon type="ios-information-circle-outline" />
						<div slot="content">{{ item.txt }}</div>
					</Poptip>
				</div>
				<span class="sp2" v-if="index === list.length - 1" v-text="item.list.num"></span>
				<span class="sp2" v-else v-text="item.list.num"></span>
				<span class="content-time spBlock">环比增长：<i class="content-is"
						:class="Number(item.list.percent) >= 0 ? 'up' : 'down'">{{ item.list.percent }}%</i>
					<Icon :color="Number(item.list.percent) >= 0 ? '#F5222D' : '#39C15B'" :type="
	        Number(item.list.percent) >= 0
	          ? 'md-arrow-dropup'
	          : 'md-arrow-dropdown'
	      " />
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	import {header} from '@/api/index';
	export default {
		name: 'cart-list',
		data() {
			return {
				list:[]
			}
		},
		methods: {
			getList () {
				const that = this;
			    header().then(async res => {
					that.list = res.data.info;
					console.log(res)
			    }).catch(res => {
			        this.$Message.error(res.msg);
			    })
			},
		},
		mounted() {
			this.getList();
		}
	}
</script>

<style>
</style>