<template>
	<div class="sel-search-module">
		<div class="input-wrap">
			<app-search-module placeholder="请输入名称" :isBtn="true" @search="searchFn" />
		</div>
		<!-- 列表 -->
		<div class="list-wrap">
			<!-- 多选 -->
			<block v-if="multi">
				<checkbox-group @change="checkboxChange">
					<div class="list" v-for="(item, index) in list" :key="index">
						<div class="checkbox-wrap">
							<checkbox class="ljd-checkbox" :value="item.value" :checked="item.checked" />
						</div>
					</div>
				</checkbox-group>
			</block>
			<!-- 单选 -->
			<block v-else>
				<radio-group @change="radioChange">
					<label class="list" v-for="(item, index) in list" :key="index">
						<div class="checkbox-wrap">
							<radio :value="index + ''" :checked="item.checked" />
						</div>
						<!-- 图片块 -->
						<slot name="img" :item="item">
							<block v-if="isMember">
								<div class="list-img">
									<app-avatar-module :src="item.avatarUrl" :width="120" />
								</div>
							</block>
						</slot>
						<!-- 列表详情块 -->
						<slot name="detail" :item="item">
							<block v-if="isMember">
								<div class="list-right">
									<div class="list-name">{{ item.userName }}</div>
									<div>手机号: {{ item.mobile }}</div>
									<div>会员等级: {{ item.userAsset.memberLevel }}</div>
									<div>最后访问: {{ item.visitTimeFormat }}</div>
								</div>
							</block>
						</slot>
					</label>
				</radio-group>
			</block>
		</div>
		<!-- 按钮 -->
		<div class="app-footer">
			<div class="admin-button-com middle blue" @click="confirmFn">确认</div>
		</div>
	</div>
</template>

<script>
import AppSearchModule from '@/components/module/app-search'
import AppAvatarModule from '@/components/module/app-avatar'
export default {
	name: 'sel-search-module',
	components: {
		AppSearchModule,
		AppAvatarModule
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		multi: {
			type: Boolean,
			default: false
		},
		// 是否是选择用户
		isMember: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			radioData: null,
			checkboxArr: null
		}
	},
	methods: {
		// 单选
		radioChange(e) {
			this.radioData = this.list[e.detail.value]
			// this.selData = []
		},
		// 多选
		checkboxChange(e) {
			console.log(e)
		},
		// 搜索
		searchFn(e) {
			this.$emit('search', e)
		},
		// 确认
		confirmFn() {
			// if (this.multi) {
			// this.$emit('change', this.checkboxArr)
			// } else {
			this.$emit('change', this.radioData)
			// }
		}
	}
}
</script>

<style lang="scss" scoped>
	.sel-search-module {
		padding-top: 130px;
		padding-bottom: 120px;
	}
	.input-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: calc(100% - 50px);
		background-color: #fff;
		padding: 22px 20px 22px 30px;
	}
	// 列表
	.list-wrap {
		width: 100%;
		background-color: #fff;
		.list {
			width: calc(100% - 60px);
			margin: 0 30px;
			padding: 10px 0 20px;
			@include disFlex(center, flex-start);
			border-bottom: 2px solid $borderColor;
			.list-img {
				margin: 0 20px;
			}
			.list-right {
				color: $fontColor3;
				.list-name {
					color: #333;
					font-size: 30px;
					margin-bottom: 10px;
				}
			}
		}
	}
	// 按钮
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 160px;
			margin-right: 30px;
		}
	}
</style>
