<!-- 自定义radio组件 -->
<template>
	<view class="CustomRadioItem" @click="changeCheckHandle">
		<image v-if="isAnonymous" src="@/static/components/customRadioItem/goods_checkbox_pressed.png" mode="" class="anonymity-img"></image>
		<image v-if="!isAnonymous" src="@/static/components/customRadioItem/goods_checkbox_normal.png" mode="" class="anonymity-img"></image>
		<slot>
			<text>{{ radioTitle }}</text>
		</slot>
	</view>
</template>

<script>
	export default {
		name: 'CustomRadioItem',
		props: {
			radioTitle: {
				type: String,
				default: ''
			},
			// 是否选中
			checked: {
				type: Boolean,
				default: false
			}
		},
		model: {
			prop: 'checked',
			event: 'change'
		},
		data() {
			return {
				isAnonymous: false
			};
		},
		watch: {
			checked: function (nVal) {
				this.isAnonymous = nVal
			}
		},
		mounted () {
			this.isAnonymous = this.checked
		},
		updated() {
			this.isAnonymous = this.checked
		},
		methods: {
			changeCheckHandle () {
				this.isAnonymous = !this.isAnonymous
				this.$emit('change', this.isAnonymous);
			}
		}
	}
</script>

<style lang="scss" scoped>
.CustomRadioItem {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #564F5F;
	
	.anonymity-img{
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}
}
</style>
