<template>
	<view class="customer-section">
		<view class="section-head">
			<text class="section-title">客户信息</text>
		</view>
		<view class="section-card">
			<view class="phone-row">
			<view class="phone-input">
				<u-icon name="phone" color="#9AA7B8" size="34"></u-icon>
				<input
					class="phone-field"
					type="number"
					:value="phoneNumber"
					placeholder="请输入客户手机号"
					placeholder-style="color:#C7CDD3"
					maxlength="11"
					@input="onPhoneInput"
				/>
			</view>
			<view class="search-btn" hover-class="app-tap-hover" @click="$emit('search')">查询</view>
		</view>
		<view class="user-card" v-if="targetUser">
			<image class="user-avatar" :src="targetUser.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
			<view class="user-detail">
				<view class="user-nickname">{{ targetUser.nickName }}</view>
				<view class="user-phone">{{ targetUser.userName }}</view>
			</view>
			<view class="user-tag" v-if="isRealNameVerified">
				<u-icon name="checkmark-circle-fill" color="#3AC17C" size="26"></u-icon>
				<text>已实名</text>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomerSearchCard',
		props: {
			phoneNumber: {
				type: String,
				default: ''
			},
			targetUser: {
				type: Object,
				default: null
			}
		},
		computed: {
			isRealNameVerified() {
				const authTypes = this.targetUser && this.targetUser.authTypes
				if (!authTypes || !Array.isArray(authTypes)) return false
				return authTypes.some((tag) => tag == 1 || tag === '1')
			}
		},
		methods: {
			onPhoneInput(e) {
				this.$emit('update:phoneNumber', e.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './agent-order-theme.scss';

	.customer-section {
		@include ao-section;
	}

	.section-head {
		@include ao-section-head;
	}

	.section-title {
		@include ao-section-title;
	}

	.section-card {
		@include ao-card;
		padding: 24rpx;
	}

	.phone-row {
		display: flex;
		align-items: center;
	}

	.phone-input {
		@include ao-field-box;
		flex: 1;
	}

	.phone-field {
		flex: 1;
		margin-left: 14rpx;
		font-size: 30rpx;
		color: $ao-text;
	}

	.search-btn {
		@include ao-primary-btn;
		margin-left: 16rpx;
		flex-shrink: 0;
	}

	.user-card {
		display: flex;
		align-items: center;
		padding: 22rpx 0 0;
		margin-top: 20rpx;
		border-top: 1rpx solid $ao-border;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
		background: #E0E7EF;
	}

	.user-detail {
		margin-left: 20rpx;
		flex: 1;
		min-width: 0;
	}

	.user-nickname {
		font-size: 30rpx;
		font-weight: 600;
		color: $ao-ink;
		margin-bottom: 6rpx;
	}

	.user-phone {
		font-size: 24rpx;
		color: $ao-text-secondary;
	}

	.user-tag {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: $ao-success;
		flex-shrink: 0;

		text {
			margin-left: 6rpx;
		}
	}
</style>
