<template>
	<div class="synthesis-container">
		<div class="synthesis-left">
			<div class="synthesis-left-top">
				<div class="synthesis-left-top-container">
					<div class="synthesis-left-top-left">
						<div>行业预警得分</div>
						<div>
							单位排行榜
						</div>
					</div>
					<div class="synthesis-left-top-right">
						<el-image style="width: 100px; height: 100%" :src="require('@/assets/images/jcgl_bj.png')"
							fit="cover"></el-image>
					</div>
				</div>
			</div>
			<div class="synthesis-left-content">
				<div class="synthesis-left-content-title">
					<span class="col-1">
						排序
					</span>
					<span class="col-2">
						名称
					</span>
					<span class="col-3">
						分数
					</span>
				</div>
				<div class="synthesis-left-content-list">
					<div v-for="(item, index) in 99" :key="index" class="synthesis-left-content-item">
						<span class="rank-col-1">
							<span class="rank-col-1-num">
								{{ (index + 1) < 10 ? '0' + (index + 1) : (index + 1) }} </span>
							</span>
							<span class="rank-col-2">
								甘肃兰州
							</span>
							<span class="rank-col-3">
								99.99
							</span>
					</div>
				</div>

			</div>
		</div>
		<div class="synthesis-right">
			<div class="synthesis-right-top">
				<ScoreGlobe style="width: calc(50% - 5px);margin-right: 10px;" />
				<LineChart style="width: calc(50% - 5px);" />
			</div>
			<SynthesisTable style="margin-top: 10px;" />
		</div>
	</div>
</template>

<script setup>
import ScoreGlobe from './synthesisCom/ScoreGlobe.vue';
import LineChart from './synthesisCom/lineChart.vue'
import SynthesisTable from './synthesisCom/synthesisTable.vue'
</script>

<style lang="scss" scoped>
.synthesis-container {
	width: 100%;
	height: 100%;
	// background-color: #fff;
	display: flex;

	.synthesis-left {
		width: 380px;
		height: 100%;
		margin-right: 10px;


		.synthesis-left-content {
			height: calc(100% - 100px);
			padding: 10px;
			font-weight: bolder;
			color: #000;
			background-color: #fff;

			.synthesis-left-content-title {
				display: flex;
				border-radius: 2px;
				background-color: #f0f0f0;

				.col-1 {
					display: inline-block;
					width: 100px;
					text-align: center;
					padding: 6px 10px;
				}

				.col-2 {
					display: inline-block;
					// width: 180px;
					flex: 1;
					text-align: center;
					padding: 6px 10px;
				}

				.col-3 {
					display: inline-block;
					width: 100px;
					text-align: center;
					padding: 6px 10px;
				}
			}

			.synthesis-left-content-list {
				height: calc(100% - 30px);
				overflow: auto;

				.synthesis-left-content-item {
					display: flex;
					border-bottom: 1px solid #ededee;

					.rank-col-1 {
						display: inline-block;
						width: 100px;
						text-align: center;
						padding: 6px 10px;

						.rank-col-1-num {
							display: inline-block;
							width: 22px;
							height: 22px;
							text-align: center;
							line-height: 22px;
							border-radius: 50%;
							color: #fff;
							background-color: var(--el-color-primary);
						}
					}

					.rank-col-2 {
						display: inline-block;
						flex: 1;
						// width: 180px;
						text-align: center;
						padding: 6px 10px;
					}

					.rank-col-3 {
						display: inline-block;
						width: 100px;
						text-align: center;
						padding: 6px 10px;
						color: var(--el-color-primary);
					}
				}
			}
		}
	}

	.synthesis-right {
		flex: 1;
		padding-top: 10px;

		.synthesis-right-top {
			display: flex;
			height: 280px;
			width: 100%;
		}
	}
}
</style>
