<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-icon">
          <img src="@/views/marketAccessRestrictions/singleCaseLayout/assets/images/icon_affiche.png" alt="">
        </div>
        <div class="item-right">
          <div class="item-time">{{ item.time }}</div>
          <div class="item-text">{{ item.content }}</div>
        </div>
      </div>
    </div>
  </AnalysisBox>
</template>

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

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;
		.item-icon {
			width: 15px;
			height: 15px;
			font-size: 0px;
			margin-right: 16px;
			margin-top: 7px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.item-right {
			width: 20px;
			flex: auto;
			font-family: Source Han Sans CN;
			font-size: 16px;
			line-height: 30px;
			.item-time {
				font-weight: bold;
				color: var(--text-primary-80-color);
			}
			.item-text {
				color: var(--text-primary-65-color);
			}
		}
	}
	.box-item:last-child {
		border-bottom: 1px solid var(--bg-black-5);
	}
}
</style>