<template>
	<div class="base-ans-list-container">
		<div class="answer-item" v-for="(item,index) in answerList" :key="index">
			<div class="answer-item-avatar">
				<Avatar icon="ios-person" size="large" shape="square"/>
				<p class="answer-item-name">{{ item.name }}</p>
			</div>
			<div class="answer-item-content">
				{{ item.value }}
			</div>
		</div>
	</div>
</template>

<script>
    export default {
        name: 'BaseAnsList',
        props: ['ansList'],
        data() {
            return {
				answerList:[]
            }
        },
        methods: {

        },
        mounted() {
			console.log(this.ansList)
			this.answerList = this.ansList || []

        },
        watch: {
            ansList: {
                deep: true,
                handler(val) {
                    this.answerList = val
                }
            }
        }

    }
</script>

<style lang="less">
	.base-ans-list-container{
		width: 100%;
		margin: 20px;
		padding: 20px;
		max-height: 500px;
		background-color: #e9e9e9;
		display: flex;
		flex-direction: column;
		overflow: auto;
	
		.answer-item{
			display: flex;
			margin-top: 15px;
			
			&-avatar{
				min-width: 8%;
				padding-top: 2px;
				font-size: 14px;
			}
			
			&-name{
				word-break: break-all;
				max-width: 50px;
			}
			
			&-content{
				background-color: #ccffea;
				padding: 10px;
				font-size: 14px;
				margin-left: 20px;
				width: 100%;
				border-radius: 5px;
			}
		}
	}
</style>

