<template>
	<view class="friend-item">
		<view class="checkbox">
			<view class="checkbox__inner" :class="getClass">
				<view class="checkbox__inner-icon" v-if="props.checked"></view>
			</view>
		</view>
		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"
			:size="80"></head-image>
		<view class="friend-info">
			<view class="friend-name">{{ friend.nickName}}</view>
			<!-- <view class="friend-online">
				<image v-show="friend.onlineWeb" class="online" src="/static/im/image/online_web.png"
					title="电脑设备在线" />
				<image v-show="friend.onlineApp" class="online" src="/static/im/image/online_app.png"
					title="移动设备在线" />
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	import headImage from "../../components/head-image.vue";

	const props = defineProps({
		friend: String,
		checked: Boolean
	})

	const getClass = computed(() => {
		let str = '';
		if(props.checked) str+=' is-checked ';
		return str
	})
</script>

<style scope lang="scss">
	.friend-item {
		height: 100rpx;
		display: flex;
		margin-bottom: 1rpx;
		position: relative;
		padding: 10rpx;
		padding-left: 20rpx;
		align-items: center;
		background-color: white;
		white-space: nowrap;
		border-bottom: 1px solid #eee;

		.checkbox{
			margin-right: 20rpx;
		}

		.friend-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 25rpx;
			text-align: left;

			.friend-name {
				font-size: 30rpx;
				font-weight: 600;
				line-height: 60rpx;
				white-space: nowrap;
				overflow: hidden;
			}
			
			.friend-online {
				.online {
					padding-right: 4rpx;
					width: 32rpx;
					height: 32rpx;
				
				}
			}
		}
	}

	.checkbox__inner.is-checked {
      border-color: #007aff;
      background-color: #007aff;
    }
    .checkbox__inner.disabled{
      border-color: #babbbe;
      background-color: #babbbe;
    }
    .checkbox__inner {
      flex-shrink: 0;
      box-sizing: border-box;
      position: relative;
      width: 16px;
      height: 16px;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      background-color: #fff;
      z-index: 1;
      border-radius: 50%;
    }
    .checkbox__inner.is-checked .checkbox__inner-icon {
      opacity: 1;
      transform: rotate(45deg);
    }

    .checkbox__inner .checkbox__inner-icon {
      position: absolute;
      top: 2px;
      left: 5px;
      height: 7px;
      width: 3px;
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      opacity: 0;
      transform-origin: center;
      transform: rotate(45deg);
      box-sizing: content-box;
    }
</style>