<template>
	<view class="data_display">
		<view class="bottom">
			<view class="left">
				<view class="title">{{ props.data.title }}</view>
				<view class="left_num">{{ props.data.current_month }}</view>
				<view class="left_compare">
					<view :class="props.data.status ? 'left_compare_green' : 'left_compare_red'">
						<img :src="props.data.status ? '/src/assets/icons/shang.png' : '/src/assets/icons/xia.png'" alt="" />
						<view>较上月{{ props.data.status ? '增长' : '下降' }}</view>
						<view style="margin-top: 4px">{{ props.data.percentage }}%</view>
					</view>
				</view>
			</view>
			<view class="right">
				<img v-if="props.data.title == '安检员总数'" src="/src/assets/icons/duoren.png" alt="" />
				<img v-else-if="props.data.title == '违规事件数'" src="/src/assets/icons/danger.png" alt="" />
				<img v-else-if="props.data.title == '平均综合评分'" src="/src/assets/icons/wujiao.png" alt="" />
				<img v-else src="/src/assets/icons/sousuo.png" alt="" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import * as echarts from 'echarts';
	const props = defineProps({
	  data: { type: Object, default: {} },
	});
</script>

<style lang="scss" scoped>
	.data_display {
		background: linear-gradient(to bottom, rgba(8, 97, 117, 0) 0%, #13a2d6 200%);
		margin-right: 10px;
		color: #fff;
		flex: 1;
		&:nth-child(1) {
			margin-left: 10px;
		}
		.top {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			z-index: 1;
			align-content: flex-start;
			background: url(/src/assets/images/titlebg-4340cf1c.png);
			background-size: 100% 100%;
			font-weight: 400;
			font-size: 14px;
			color: #fbffff;
			padding: 8px 20px;
			margin-bottom: 8px;
		}
		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			position: relative;
			.left {
				display: flex;
				flex-direction: column;
				margin-left: 40px;
				.title {
					margin-bottom: 5px;
				}
				.left_num {
					font-size: 18px;
					font-weight: 800;
				}
				.left_compare {
					margin-top: 3px;
					font-size: 13px;
					padding-bottom: 8px;
					.left_compare_green {
						display: flex;
						align-items: center;
						color: greenyellow;
					}
					.left_compare_red {
						display: flex;
						align-items: center;
						color: orangered;
					}
					img {
						width: 15px;
						height: 15px;
						padding-top: 2px;
					}
				}
			}
			.right {
				width: 40px;
				height: 40px;
				background: #4a565b;
				position: absolute;
				right: 20px;
				top: 8px;
				border-radius: 6px;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 15px;
					height: 15px;
				}
			}
		}
	}
</style>