<template>
	<span class="pi-trend" :class="'pi-trend--'+type">
		<el-icon v-if="iconType=='P'" class="pi-trend-icon"><el-icon-top /></el-icon>
		<el-icon v-if="iconType=='N'" class="pi-trend-icon"><el-icon-bottom /></el-icon>
		<el-icon v-if="iconType=='Z'" class="pi-trend-icon"><el-icon-right /></el-icon>
		<em class="pi-trend-prefix">{{prefix}}</em>
		<em class="pi-trend-value">{{modelValue}}</em>
		<em class="pi-trend-suffix">{{suffix}}</em>
	</span>
</template>

<script>
	export default {
		props: {
			modelValue: { type: Number, default: 0 },
			prefix: { type: String, default: "" },
			suffix: { type: String, default: "" },
			reverse: { type: Boolean, default: false }
		},
		computed: {
			absValue(){
				return Math.abs(this.modelValue);
			},
			iconType(v){
				if(this.modelValue == 0){
					v = 'Z'
				}else if(this.modelValue < 0){
					v = 'N'
				}else if(this.modelValue > 0){
					v = 'P'
				}
				return v
			},
			type(v){
				if(this.modelValue == 0){
					v = 'Z'
				}else if(this.modelValue < 0){
					v =  this.reverse?'P':'N'
				}else if(this.modelValue > 0){
					v =   this.reverse?'N':'P'
				}
				return v
			}
		}
	}
</script>

<style scoped>
	.pi-trend {display: flex;align-items: center;}
	.pi-trend-icon {margin-right: 2px;}
	.pi-trend em {font-style: normal;}
	.pi-trend-prefix {margin-right: 2px;}
	.pi-trend-suffix {margin-left: 2px;}
	.pi-trend--P {color: #f56c6c;}
	.pi-trend--N {color: #67c23a;}
	.pi-trend--Z {color: #555;}
</style>
