<template>
	<view class="appraise-block">
		<view class="title">{{order + `. ` + option.question}}</view>
		<view class="option" v-for="(item, index) in option.answer" @click="selected(index)"
			:class="{active: current == index}">
			{{orderNumber[index] + `. ` + item}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			option: {
				type: Object,
				required: true
			},
			order: {
				type: Number || String,
				default: 1
			}
		},
		data() {
			return {
				orderNumber: ['A', 'B', "C", "D", "E", "F", "G"],
				current: undefined
			}
		},
		methods: {
			selected(index) {
				this.current = index
				this.$emit('selected', {
					order: this.order,
					index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appraise-block {
		margin-top: 40rpx;

		.title {
			color: #000;
			font-size: 30rpx;
		}

		.option {
			color: #666363;
			font-size: 28rpx;
			background-color: #f2f3f4;
			padding: 20rpx 40rpx;
			margin: 30rpx 0;
			border-radius: 10rpx;
			position: relative;
			transition: all .3s;
		}

		.active {
			// background-color: rgba(3, 3, 3, 0.1);
			color: black;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 50rpx;
				height: 50rpx;
				background-image: url("~@/static/images/selected.png");
				background-size: cover;
				background-color: transparent;
				background-repeat: no-repeat;
			}
		}
	}
</style>
