<template>
  <AnalysisBox :title="props.title" :showAllBtn="false" height="auto">
    <div class="box-main">
      <div v-for="(item, index) in props.listData" :key="index" class="box-item">
        <div class="item-tag">行政令</div>
        <div class="item-right">
          <div class="item-head">
            <div class="item-name one-line-ellipsis">{{ item.name }}</div>
            <div class="item-time">{{ item.time }}</div>
          </div>
          <div class="item-text one-line-ellipsis">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </AnalysisBox>
</template>

<script setup lang="ts" name="RelatedEvent">

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

</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;
			color: var(--color-yellow-100);
			background-color: var(--color-yellow-10);
		}
		.item-right {
			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);
	}
}
</style>