<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<!-- 按钮 -->
		<view class="head">
			<view class="head_left">
				<text :class="keyword==1?'active':''" @click="toSearch(1)">全部({{infoList.all_num}})</text>
				<text :class="keyword==2?'active':''" @click="toSearch(2)">高分({{infoList.high_score}})</text>
				<text :class="keyword==3?'active':''" @click="toSearch(3)">低分({{infoList.low_score}})</text>
			</view>

			<view class="head_right">
				<view class="score">
					<u-icon name="star-fill" color="#FB8C00" size="36"></u-icon>
					<text>{{infoList.patient_score}}</text>
				</view>
				<text>患者评分</text>
			</view>
		</view>

		<!-- 列表 -->
		<!-- 空页 -->
		<view class="empty" v-if="userList.length<=0">
			<image src="/static/empty/orders.png" mode="aspectFit"></image>
			<view class="text">
				暂无评价
			</view>
		</view>

		<view class="items" v-for="(item,index) in userList" :key="item.id">
			<image :src="item.avator || '/static/mine/avatar_1.png'" mode=""></image>
			<view class="items_right">
				<view class="item_name">
					<view class="title">
						<text>{{item.nickname || '微信用户'}}</text>
						<u-rate :count="count" v-model="item.score" :disabled="true" active-color="#FB8C00"
							inactive-color="#E2E8F0" size="20"></u-rate>
					</view>
					<view class="time">
						{{item.created_at}}
					</view>
				</view>
				<view class="info">
					{{item.comment}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		commentList,
		commentListTop
	} from '../../request/api/api'
	export default {
		data() {
			return {
				doctorID: "",
				userList: [],
				infoList: [],
				keyword: 1,
				count: 5
			}
		},
		onLoad(e) {
			this.doctorID = e.id
		},
		methods: {
			// 患者评价
			getUser() {
				commentList({
					method: "post",
					data: {
						su_id: this.doctorID,
						store_id: uni.getStorageSync('store_id'),
						keyword: this.keyword
					}
				}).then((res) => {
					// console.log(res, 'user');
					if (res.data.errcode == 0) {
						this.userList = res.data.data.list
					}
				})
			},

			// 顶部
			getInfo() {
				commentListTop({
					method: "post",
					data: {
						su_id: this.doctorID,
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'ss');
					if (res.data.errcode == 0) {
						this.infoList = res.data.data
					}
				})
			},
			// 搜索
			toSearch(e) {
				this.keyword = e
				this.getUser();
			},
		},
		mounted() {
			this.getUser();
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.head {
			width: 750rpx;
			height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 32rpx;
			margin-bottom: 10rpx;

			.head_left {
				.active {
					padding: 10rpx 20rpx;
					background: #536DFE;
					border-radius: 28rpx;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				text {
					padding: 10rpx 20rpx;
					border-radius: 28rpx;
					background: #F1F5F9;
					height: 44rpx;
					line-height: 44rpx;
					font-size: 24rpx;
					color: #475569;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					margin: 0 20rpx 0 0;
				}
			}

			.head_right {

				.score {
					text {
						height: 50rpx;
						font-size: 36rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FB8C00;
						line-height: 42rpx;
					}
				}

				text {
					height: 28rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #94A3B8;
				}
			}
		}

		.empty {
			width: 440rpx;
			height: 393rpx;
			margin: 10rpx auto;
			text-align: center;

			image {
				width: 100%;
				height: 100%;
				z-index: 10;
			}
		}

		.items {
			width: 706rpx;
			display: flex;
			margin: 10rpx auto;
			background-color: #fff;
			justify-content: space-between;
			padding: 10rpx 10rpx;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.items_right {
				width: 602rpx;


				.item_name {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #475569;

						.iconfont {
							color: #FB8C00;
							font-size: 26rpx;
							margin-left: 10rpx;
						}
					}

					.time {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #94A3B8;
					}
				}

				.info {
					display: -webkit-box;
					line-height: 40rpx;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					overflow: hidden;
					margin: 16rpx 0 0 0;
				}
			}
		}
	}
</style>
