<template>
	<div class="bill-progress-list">
		<div class="list-wrapper">
			<div class="list-item" v-for="(item, index) in displayList" :key="`${item.actionDate}-${index}`">
				<div class="item-main">
					<div class="left">
						<div class="dot"></div>
						<div class="item-date">{{ item.formattedDate }}</div>
					</div>
					<el-tooltip
						effect="dark"
						:content="item.actionTitle"
						popper-class="common-prompt-popper"
						placement="top"
						:show-after="500"
					>
						<div class="item-title">{{ item.actionTitle }}</div>
					</el-tooltip>
					<!-- <div class="right">
						<div class="risk-tag" :class="item.riskClass">• {{ item.riskText }}</div>
						<div class="arrow">></div>
					</div> -->
				</div>
			</div>

			<div class="empty" v-if="displayList.length === 0">暂无进展数据</div>
		</div>
		<!-- <div class="more" v-if="hasMore">查看更多<img :src="arrowDown"/></div> -->
	</div>
</template>

<script>
import arrowDown from './assets/icons/arrow-down.svg';
const RISK_LEVELS = ["特别重大风险", "重大风险", "较大风险", "一般风险", "低风险"];

const RISK_CLASS_MAP = {
	"特别重大风险": "risk-critical",
	"重大风险": "risk-high",
	"较大风险": "risk-medium",
	"一般风险": "risk-normal",
	"低风险": "risk-low"
};

export default {
	name: "SBillProgressList",
	data() {
		return {
			arrowDown
		};
	},
	props: {
		dataList: {
			type: Array,
			default: () => []
		},
		mode: {
			type: String,
			default: "latest"
		},
		maxCount: {
			type: Number,
			default: 5
		}
	},
	computed: {
		sortedDataList() {
			if (!Array.isArray(this.dataList)) return [];
			return [...this.dataList]
				.filter(item => item && item.actionDate)
				.sort((a, b) => new Date(b.actionDate) - new Date(a.actionDate));
		},
		hasMore() {
			return this.sortedDataList.length > this.maxCount;
		},
		displayList() {
			const list = this.mode === "early" ? [...this.sortedDataList].reverse() : this.sortedDataList;
			return list.slice(0, this.maxCount).map((item, index) => {
				let formattedDate = "";
				const dateObj = new Date(item.actionDate);
				if (!isNaN(dateObj.getTime())) {
					formattedDate = `${dateObj.getMonth() + 1}月${dateObj.getDate()}日`;
				}

				const riskText = RISK_LEVELS[Math.min(index, RISK_LEVELS.length - 1)];
				const riskClass = RISK_CLASS_MAP[riskText] || "risk-low";

				return {
					...item,
					formattedDate,
					riskText,
					riskClass
				};
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bill-progress-list {
	width: 100%;
	height: 100%;
	padding: 2px 0 0;
	box-sizing: border-box;

	.list-wrapper {
		height: 100%;
		overflow: hidden;
		padding-right: 2px;
		position: relative;
		padding-bottom: 48px;
	}

	.list-item {
		height: 58px;
		box-sizing: border-box;
	}

	.item-main {
		height: 100%;
		display: flex;
		align-items: center;
		gap: 20px;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
	}

	.left {
		display: flex;
		align-items: center;
		width: 110px;
		flex-shrink: 0;

		.dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #ff4d4f;
			margin-right: 12px;
		}

		.item-date {
			font-family: Microsoft YaHei;
			font-size: 16px;
			font-weight: 700;
			line-height: 22px;
			color: #3b414b;
			white-space: nowrap;
		}
	}

	.item-title {
		flex: 1;
		min-width: 0;
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 22px;
		color: #3b414b;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.right {
		display: flex;
		align-items: center;
		gap: 16px;
		margin-left: auto;
		padding-right: 6px;
		flex-shrink: 0;
	}

	.risk-tag {
		height: 32px;
		padding: 0 14px;
		border-radius: 16px;
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 32px;
		white-space: nowrap;
	}

	.risk-critical {
		color: #ff4d4f;
		background: #fff1f0;
	}

	.risk-high {
		color: #fa8c16;
		background: #fff7e6;
	}

	.risk-medium {
		color: #d4b106;
		background: #fffbe6;
	}

	.risk-normal {
		color: #389e0d;
		background: #f6ffed;
	}

	.risk-low {
		color: #1677ff;
		background: #e6f4ff;
	}

	.arrow {
		font-size: 16px;
		color: #8c8c8c;
		line-height: 1;
	}

	.more {
		display: flex;
		gap: 5px;
		position: absolute;
		left: 50%;
		bottom: 23px;
		transform: translateX(-50%);
		font-family: Microsoft YaHei;
		font-size: 14px;
		line-height: 22px;
		color: #1677ff;
		cursor: pointer;
	}

	.empty {
		font-family: Microsoft YaHei;
		font-size: 16px;
		line-height: 24px;
		color: rgba(95, 101, 108, 1);
		text-align: center;
		padding-top: 40px;
	}
}
</style>
