<template>
	<view style="width: 100%;height: 100%;">
		<view style="height: 100rpx;width: 100%;display: flex;align-items: center;justify-content: center;background-color: #FFFFFF;">
			<u-search placeholder="搜索用户姓名" v-model="keyword" :show-action='false' style="width: 90%;" search-icon-color="red" @search="search"></u-search>
		</view>
		<view style="padding: 20rpx 28rpx;">
			<u-collapse v-for="(item, index) in followList" :item-style="itemStyle" :key="index" accordion>
				<u-collapse-item>
					<!-- 标题 -->
					<view slot="title" style="font-size: 30rpx;">
						<text style="font-weight: bold;margin-right: 20rpx;">{{item.title}}</text>
						<text style="color: #666666;">{{item.sum}}</text>
					</view>
					<!-- 面板内容 -->
					<view v-for="(nitem,nindex) in item.content" style="display: flex;align-items: center;padding: 10rpx 0;" @click="xq" :key='index'>
						<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png" mode="aspectFit" style="height: 68rpx;width: 68rpx;border-radius: 50%;margin-right: 20rpx;"></image>
						<text style="font-size: 28rpx;margin: 28rpx;color: #000000;">{{nitem.name}}</text>
						<text style="font-size: 28rpx;">{{nitem.position}}</text>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索
				keyword:'',
				
				itemStyle: {
					marginBottom: '20rpx',
					background: '#FFFFFF',
					padding: '28rpx',
					boxshadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.04)',
					borderRadius: '12px',
				},
				followList: [{
					title: '咨询患者',
					sum: '',
					content: [{
						name: '张三1',
						position: '不知道什么病'
					}, {
						name: '张三2',
						position: '癌症'
					}, {
						name: '张三3',
						position: '羊癫疯'
					}]
				}, {
					title: '门诊患者',
					sum: '',
					content: [{
						name: '张三4',
						position: '不知道什么病'
					}, {
						name: '张三5',
						position: '癌症'
					}, {
						name: '张三6',
						position: '羊癫疯'
					}]
				}, {
					title: '关注患者',
					sum: '',
					content: [{
						name: '张三7',
						position: '不知道什么病'
					}, {
						name: '张三8',
						position: '癌症'
					}, {
						name: '张三9',
						position: '羊癫疯'
					}]
				}, {
					title: '服务包患者',
					sum: '',
					content: [{
						name: '张三.',
						position: '不知道什么病'
					}, {
						name: '张三...',
						position: '癌症'
					}, {
						name: '张三...',
						position: '羊癫疯'
					}]
				}]
			}
		},
		methods: {
			//搜索
			search(e){
				console.log(e)
			},
			//详情
			xq(e){
				console.log(e)
				uni.navigateTo({
					url:'/pages/patient/patientxq'
				})
			}
			
			
		},
		onShow() {
			for (var a = 0; a < this.followList.length; a++) {
				// console.log(this.followList[a]);
				this.followList[a].sum = this.followList[a].content.length
				console.log(this.followList[a].sum)
			}
		}
	}
</script>

<style>
	.list {
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		padding: 28rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		border-radius: 12px;
	}
</style>
