<template>
  <AnalysisBox :title="props.title" :showAllBtn="false" height="auto">
    <div class="box-main">
			<el-empty v-if="!props.listData?.length" description="暂无数据" :image-size="100" />
      <div v-for="(item, index) in props.listData" :key="index" class="box-item">
        <div class="item-tag" :class="getClassName(item)">{{ item.TYPE }}</div>
        <div class="item-right" @click="onNavigateTo(item)">
          <div class="item-head">
            <div class="item-name one-line-ellipsis text-click-hover">{{ item.NAME }}</div>
            <div class="item-time">{{ item.DATE }}</div>
          </div>
          <div class="item-text one-line-ellipsis">{{ item.SUMMARY }}</div>
        </div>
      </div>
    </div>
  </AnalysisBox>
</template>

<script setup lang="ts" name="RelatedEvent">
import router from "@/router";
import { useGotoNewsDetail } from '@/router/modules/news';

const props = defineProps({
  listData: {
    type: Array as any,
    default: () => ([])
  },
  title: {
    type: String,
    default: ""
  }
})

const getClassName = (item: any) => {
	switch (item.TYPE) {
		case "行政令":
			return "theme1"
		case "新闻":
			return "theme2"
		case "法案":
			return "theme3"
		default:
			return "theme1"
	}
}

// 跳转相关事件
const gotoNewsDetail = useGotoNewsDetail()
const onNavigateTo = (item: any) => {
		switch (item.TYPE) {
		case "行政令":
			let route1 = router.resolve({
				path: "/decreeLayout",
				query: { id: item.ID }
			});
			window.open(route1.href, "_blank");
		break;
		case "新闻":
			gotoNewsDetail(item.ID)
		break;
		case "法案":
			let route2 = router.resolve({
				path: "/billLayout",
				query: { billId: item.ID }
			});
			window.open(route2.href, "_blank");
		break;
	}
}

</script>

<style scoped lang="scss">
.box-main {
	padding: 0 16px 16px;
	.box-item {
		border-top: 1px solid var(--bg-black-5);
		padding: 6px;
		display: flex;
		font-size: 16px;
		font-family: Source Han Sans CN;
		.item-tag {
			width: 80px;
			height: 28px;
			line-height: 28px;
			border-radius: 14px;
			text-align: center;
			margin-right: 16px;
			margin-top: 7px;
		}
		.item-right {
			cursor: pointer;
			width: 20px;
			flex: auto;
			line-height: 30px;
			.item-head {
				display: flex;
				.item-name {
					width: 20px;
					flex: auto;
					font-weight: bold;
					color: var(--text-primary-80-color);
				}
				.item-time {
					margin-left: 100px;
					flex: none;
					color: var(--text-primary-65-color);
				}
			}
			.item-text {
				color: var(--text-primary-65-color);
			}
		}
	}
	.box-item:last-child {
		border-bottom: 1px solid var(--bg-black-5);
	}
}

.theme1 {
	background-color: var(--color-yellow-10);
	color: var(--color-yellow-100);
}
.theme2 {
	background-color: var(--color-green-10);
	color: var(--color-green-100);
}
.theme3 {
	background-color: var(--color-orange-10);
	color: var(--color-orange-100);
}
</style>