<template>
	<page-layout :is-platform="ctx.isPlatform" :title="pageTitle" :show-back="true">
		<view class="page">
			<view v-if="!list.length && !loading" class="empty">暂无获客记录</view>
			<view v-for="item in list" :key="item.id" class="row">
				<view class="user">
					<text class="name">{{ (item.user && item.user.nickname) || '用户' }}</text>
					<text class="mobile">{{ (item.user && item.user.mobile) || '' }}</text>
				</view>
				<text class="time">{{ item.created_at_text || '' }}</text>
			</view>
		</view>
	</page-layout>
</template>

<script>
import PageLayout from '../components/PageLayout.vue';
import { getSalespersonManageContext, resolveManageMode } from '../common/context.js';

export default {
	components: { PageLayout },
	data() {
		return {
			ctx: getSalespersonManageContext('clinic'),
			salespersonId: 0,
			nickName: '',
			list: [],
			loading: false,
		};
	},
	computed: {
		pageTitle() {
			return this.nickName ? `获客 - ${this.nickName}` : '获客记录';
		},
	},
	onLoad(options) {
		this.ctx = getSalespersonManageContext(resolveManageMode(options));
		this.salespersonId = Number(options.salesperson_id || 0);
		this.nickName = decodeURIComponent(options.nick_name || '');
		this.loadList();
	},
	methods: {
		async loadList() {
			if (!this.salespersonId) return;
			this.loading = true;
			try {
				const wrap = await this.ctx.api.getUserBindList({
					salesperson_id: this.salespersonId,
					page: 1,
					pageSize: 50,
				});
				this.list = (wrap && wrap.ok && wrap.data && wrap.data.items) ? wrap.data.items : [];
			} finally {
				this.loading = false;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.page { padding: 24rpx; }
.empty { text-align: center; color: #999; padding: 80rpx 0; }
.row {
	display: flex; justify-content: space-between; align-items: center;
	background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 12rpx;
}
.name { display: block; font-size: 28rpx; font-weight: 600; }
.mobile { font-size: 24rpx; color: #999; }
.time { font-size: 24rpx; color: #bbb; }
</style>
