<template>
	<view class="margin-bottom-20" style="height: 200rpx;">
		<view class="flex fdc jcsb h100 background-color-fff border-radius-10 padding-20 box-sizing-border-box">
			<view class="flex aic">
				<view class="border-radius-50" :style="{background:item.bg}">
					<view class="iconfont width-70 height-70 font-size-50 font-color-fff flex aic jcc"
						:class="'icon-'+item.modelIcon"></view>
				</view>
				<text class="margin-left-10" @click="showChart(item)">
					{{item.name}}
				</text>
			</view>
			<view class="margin-top-47 flex jcsb aic">
				<text class="font-size-30 font-color-l2">{{ itemValue(item)}}</text>
				<text class="font-size-20 font-color-l3">{{item.dataType.unit}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'txt',
		mixins: [],
		components: {},
		props: {
			item: Object
		},
		data() {
			return {}
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {},
		destroyed() {},
		methods: {
			showChart(item) {
				this.$emit('showChart', item)
			},
			itemValue(item) {
				if (item.dataType.type == "decimal" || item.dataType.type == "integer") {
					return (item.value / item.dataType.step) || '--'
				} else {
					return item.value || '--'
				}
			},
		},
	};
</script>
<style lang="scss" scoped>
</style>