<template>
	<view class="app">
		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" :show-bar='false'
			active-color='#26A888'></u-tabs>
		<u-empty v-if="appointmentlist==0" text="暂无"></u-empty>
		<view class="record" v-for="(item,index) in appointmentlist" :key="index" v-else>
			<view class="top">
				<span>{{item.formName}}</span>
				<span v-if="item.bookingStatus=='1'&&item.approvalStatus=='1'">已完成
				</span>
				<span v-if="item.approvalStatus=='0'&&item.bookingStatus=='1'">待批准</span>
				<span v-if="item.bookingStatus=='0'">未完成</span>
				<span v-if="item.bookingStatus=='2'">已取消</span>
			</view>
			<view class="recorddata">
				<view class="recorditem">
					{{item.packageName}}
				</view>

				<!-- <view class="recorditem"
					v-if="item.bookingStatus=='0'||item.bookingStatus=='1'||item.bookingStatus=='2'">
					申请时间：{{item.applyTime}}
				</view> -->
				<view class="recorditem" v-if="item.bookingStatus=='1'&&item.completeTime">
					完成时间：{{item.completeTime}}
				</view>
				<view class="recorditem">
					预约时间：{{item.bookingTime}}
				</view>
				<view class="recorditem" v-if="item.bookingStatus=='2'">
					取消时间：{{item.cancelTime}}
				</view>
			</view>
			<view class="evaluate" @tap="evaluatetime(item)" v-if="item.bookingStatus=='0'&&item.approvalStatus=='0'">
				<view class="evaluatedata">
					取消预约
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import {
		list,
		cancel
	} from '@/api/pagesC/myappointment/myappointment.js'
	export default {
		data() {
			return {
				tabslist: [{
					name: '全部',
					completed: '',
				}, {
					name: '已完成',
					completed: '2',
				}, {
					name: '未完成',
					completed: '1',
				}, ],
				tabscurrent: 0,
				query: {
					pageNum: 1,
					pageSize: 10,
					identity: '',
					completed: '',
				},
				appointmentlist: [],
			}
		},
		onShow() {
			const value = uni.getStorageSync('userinfo');
			this.query.identity = value.cardNo
			this.info();
		},
		methods: {
			info() {
				list(this.query).then(res => {
					this.appointmentlist = res.rows
				})
			},
			evaluatetime(item) {
				cancel(item.bookingNo).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '取消预约成功',
							type: 'success',
							duration: '1500'
						})
						this.info();
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							duration: '1500'
						})
					}
				})
			},
			//点击tabs
			tabschange(index) {
				this.tabscurrent = index
				if (index == '1') {
					this.query.completed = '1'
					this.info();
				} else if (index == '2') {
					this.query.completed = '2'
					this.info();
				} else if (index == '0') {
					this.query.completed = ''
					this.info();
				}
			},
		}
	}
</script>

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