<template>
	<view class="app">
		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" :show-bar='false'
			active-color='#26A888'></u-tabs>
		<view class="" v-if="tabscurrent==0">
			<!-- tabscurrent==0?servicelist:tabscurrent==1?noFileLists:tabscurrent==2?FileList:'' -->
			<view class="record" v-for="(item,indexc) in servicelist" :key="indexc">
				<view class="top">
					<span>{{item.formName}}</span>
					<span>{{item.performanceCount}}/{{item.serviceFreq}}</span>
					<span v-if="item.orderEvaluateInfo==null">未评价</span>
					<span v-if="item.orderEvaluateInfo">已评价</span>
				</view>
				<view class="recorddata">
					<view class="recorditem">
						{{item.packageName}}
					</view>
					<view class="recorditem">
						履约时间：{{item.performanceTime}}
					</view>
					<view class="recorditem recordbottom">
						下次履约时间：
						<span v-if="item.performanceNextTime!=null">{{item.performanceNextTime}}</span>
					</view>
				</view>
				<view class="evaluate" @tap="evaluatetime(item)" v-if="item.orderEvaluateInfo==null">
					<view class="evaluatedata">
						立即评价
					</view>
				</view>
				<view class="evaluate" v-else>
					<span>{{item.orderEvaluateInfo.createTime}}</span>
					<span>
						<u-rate v-model="item.orderEvaluateInfo.compositeScore" size="50" active-color="#FFA115"
							inactive-color="#b2b2b2" gutter="20" disabled></u-rate></span>
				</view>
			</view>
		</view>
		<view class="" v-for="(item,indexa) in noFileLists" :key="indexa">
			<view class="record" v-if="tabscurrent==1&&item.orderEvaluateInfo==null">
				<view class="top">
					<span>{{item.formName}}</span>
					<span>{{item.performanceCount}}/{{item.serviceFreq}}</span>
					<span v-if="item.orderEvaluateInfo==null">未评价</span>
					<span v-if="item.orderEvaluateInfo">已评价</span>
				</view>
				<view class="recorddata">
					<view class="recorditem">
						{{item.packageName}}
					</view>
					<view class="recorditem">
						履约时间：{{item.performanceTime}}
					</view>
					<view class="recorditem recordbottom">
						下次履约时间：
						<span v-if="item.performanceNextTime!=null">{{item.performanceNextTime}}</span>
					</view>
				</view>
				<view class="evaluate" @tap="evaluatetime(item)" v-if="item.orderEvaluateInfo==null">
					<view class="evaluatedata">
						立即评价
					</view>
				</view>
				<view class="evaluate" v-else>
					<span>{{item.orderEvaluateInfo.createTime}}</span>
					<span><u-rate v-model="item.orderEvaluateInfo.compositeScore" size="50" active-color="#FFA115"
							inactive-color="#b2b2b2" gutter="20" disabled></u-rate></span>
				</view>
			</view>
		</view>
		<view class="" v-for="(item,indexb) in FileList" :key="indexb">
			<view class="record" v-if="item.orderEvaluateInfo!=null&&tabscurrent==2">
				<view class="top">
					<span>{{item.formName}}</span>
					<span>{{item.performanceCount}}/{{item.serviceFreq}}</span>
					<span v-if="item.orderEvaluateInfo==null">未评价</span>
					<span v-if="item.orderEvaluateInfo">已评价</span>
				</view>
				<view class="recorddata">
					<view class="recorditem">
						{{item.packageName}}
					</view>
					<view class="recorditem">
						履约时间：{{item.performanceTime}}
					</view>
					<view class="recorditem recordbottom">
						下次履约时间：<span v-if="item.performanceNextTime!=null">{{item.performanceNextTime}}</span>
					</view>
				</view>
				<view class="evaluate" @tap="evaluatetime(item)" v-if="item.orderEvaluateInfo==null">
					<view class="evaluatedata">
						立即评价
					</view>
				</view>
				<view class="evaluate" v-else>
					<span>{{item.orderEvaluateInfo.createTime}}</span>
					<span><u-rate v-model="item.orderEvaluateInfo.compositeScore" size="50" active-color="#FFA115"
							inactive-color="#b2b2b2" gutter="20" disabled></u-rate></span>
				</view>

			</view>
		</view>

		<u-empty v-if="servicelist.orderEvaluateInfo==0" text="暂无"></u-empty>
		<u-popup v-model="evaluateshow" mode="bottom" length="45%" border-radius="30" :closeable='true'>
			<view class="evaluateserver">
				立即评价
			</view>
			<view class="star">
				<view class="evaluatstar">
					<span>评分</span>
					<u-rate size="50" active-color="#FFA115" inactive-color="#b2b2b2" gutter="20" :count="count"
						v-model="list.compositeScore"></u-rate>
				</view>
			</view>
			<view class="star">
				<view class="evaluatstar">
					<span>评价</span>
					<u-input v-model="list.evaluateContent" type="textarea" placeholder="请输入" />
				</view>
			</view>
			<view class="submits">
				<span @tap="cancel()">取消</span>
				<span @tap="submit(item)">提交</span>
			</view>
		</u-popup>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	import {
		record,
		add
	} from '@/api/pagesC/servicerecord/servicerecord.js'
	export default {
		data() {
			return {
				count: 5,
				value: 2,
				tabslist: [{
					name: '全部',
					orderStatus: '',
				}, {
					name: '未评价',
					orderStatus: '1',
				}, {
					name: '已评价',
					orderStatus: '2',
				}, ],
				servicelist: [],
				tabscurrent: 0,
				value: 4,
				evaluateshow: false,
				list: {
					compositeScore: '',
					evaluateContent: '',
					patientId: '',
					openId: '',
					orderNo: '',
					orderSource: 'FAMILY_DOCTOR',
					evaluateChannel: 'WE_CHAT_APPLET',
					evaluateSatisfaction:'',
				},
				query: {
					pageNum: 1,
					pageSize: 10,
					identity: '',
					isEvaluate: '',
				},
				FileList: [],
				noFileLists: [],
			}
		},
		onShow() {
			const value = uni.getStorageSync('userinfo');
			this.query.identity = value.cardNo
			this.info()
		},
		watch: { //监听
			'list.compositeScore'() {
				if (this.list.compositeScore == 5) {
					this.list.evaluateSatisfaction = 'VERYSATISFIED'
				} else if (this.list.compositeScore == 4) {
					this.list.evaluateSatisfaction = 'SATISFIED'
				} else if (this.list.compositeScore == 3) {
					this.list.evaluateSatisfaction = 'COMMONLY'
				} else if (this.list.compositeScore == 2) {
					this.list.evaluateSatisfaction = 'DISSATISFIED'
				} else if (this.list.compositeScore == 1) {
					this.list.evaluateSatisfaction = 'VERYDISSATISFIED'
				}
			},
		},
		methods: {
			cancel() {
				this.evaluateshow = false
			},
			submit(item) {
				console.log(this.list, '45')
				add(this.list).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '评价成功',
							type: 'success',
							duration: '1500'
						})
						this.evaluateshow = false;
						this.info()
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							duration: '1500'
						})
					}
				})
			},
			info() {
				this.FileList = []
				this.noFileLists = []
				this.servicelist = []
				record(this.query.identity).then(res => {
					if (res.code == 200) {
						res.data.forEach(e => {
							if (e.orderEvaluateInfo) {
								this.FileList.push(e)
							} else {
								this.noFileLists.push(e)
							}
						})
						this.servicelist = res.data
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							duration: '1500'
						})
					}

				})
			},
			//点击tabs
			tabschange(index) {
				this.tabscurrent = index;
			},
			// 立即评价
			evaluatetime(item) {
				console.log(item, '58')
				this.evaluateshow = true;
				this.list = item
				this.list.orderNo = item.performanceNo
				this.list.patientId = uni.getStorageSync('patientId');
				this.list.openId = uni.getStorageSync('openid');
				this.list.orderSource = 'FAMILY_DOCTOR'
				this.list.evaluateChannel = 'WE_CHAT_APPLET'
			}

		}
	}
</script>

<style lang="scss">
	@import './servicerecord.scss'
</style>