<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="record">
			<view class="top">
				<span>大生化</span>
				<span>(1/2)</span>
				<span>未评价</span>
			</view>
			<view class="recorddata">
				<view class="recorditem">
					高血压个性服务包
				</view>
				<view class="recorditem">
					履约时间：2023-12-12<span>08:30</span>
				</view>
				<view class="recorditem recordbottom">
					下次履约时间：2023-12-12<span>08:30</span>
				</view>
			</view>
			<view class="evaluate" @tap="evaluatetime">
				<view class="evaluatedata">
					立即评价
				</view>
			</view>
		</view>

		<view class="record">
			<view class="top">
				<span>大生化</span>
				<span>(2/2)</span>
				<span>已评价</span>
			</view>
			<view class="recorddata">
				<view class="recorditem">
					高血压个性服务包
				</view>
				<view class="recorditem">
					履约时间：2023-12-12<span>08:30</span>
				</view>
				<view class="recorditem recordbottom">
					下次履约时间：2023-12-12<span>08:30</span>
				</view>
			</view>
			<view class="evaluate">
				<span>2023-12-20</span>
				<span>08:30:33</span>
				<span><u-rate v-model="value" size="50" active-color="#FFA115" inactive-color="#b2b2b2" gutter="20"
						disabled></u-rate></span>
			</view>
		</view>
		<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"></u-rate>
				</view>
			</view>
			<view class="star">
				<view class="evaluatstar">
					<span>评价</span>
					<u-input v-model="cancelAppointmentReason" type="textarea" placeholder="请输入" />
				</view>
			</view>
			<view class="submits">
				<span>取消</span>
				<span>提交</span>
			</view>
		</u-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '全部',
					orderStatus: '',
				}, {
					name: '未评价',
					orderStatus: 'WAIT_PAY',
				}, {
					name: '已评价',
					orderStatus: 'WAIT_RECEIVED_GOODS',
				}, ],
				tabscurrent: 0,
				value: 4,
				evaluateshow: false,

			}
		},
		methods: {
			//点击tabs
			tabschange(index) {
				// console.log(this.tabslist)
				this.tabscurrent = index;
				// this.orderStatus = this.tabslist[index].orderStatus
				// this.goodsOrderinfo();
			},
			// 立即评价
			evaluatetime() {
				this.evaluateshow = true;
			}

		}
	}
</script>

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