<template>
	<view class="u-font-28 default-box-padding u-relative bg-fff border-r-12 u-overflow-hide">
		<template v-if="orderInfo.status=='unpaid'">
			<view class="change u-absolute  color-fff  left-top" @click="chooseUser">切换</view>
		</template>
		<template v-if="user.id">
			<view class="u-flex	u-row-between u-m-t-20 border-bottom u-p-b-20">
				<view class="u-flex">
					<up-avatar :size="30" :src="user.headImg"></up-avatar>
					<view class="color-666 u-m-l-30">{{user.phone||'未绑定手机号'}}</view>
				</view>
				<view>
					<my-button @click="toOrder" :height="60" plain shape="circle">他的订单</my-button>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="u-flex	u-row-between u-m-t-20 border-bottom u-p-b-24">
				<view class="u-flex">
					<up-avatar :size="30" :src="user.headImg"></up-avatar>
					<view class="color-666 u-m-l-30">{{'服务员下单'}}</view>
				</view>
				<view>
					<my-button width="128" height="48" @click="toOrder" :height="60" plain shape="circle">
						<text class="u-font-24 no-wrap">他的订单</text>
					</my-button>
				</view>
			</view>
		</template>
		<view class="u-flex u-m-t-24 u-row-between u-font-28">
			<view class="">
				<view class="font-bold ">{{user.amount||0}}</view>
				<view class="color-666 u-m-t-8 u-font-24">余额</view>
			</view>
			<view class="">
				<view class="font-bold">{{user.accountPoints||0}}</view>
				<view class="color-666 u-m-t-8 u-font-24">积分</view>
			</view>
			<view class="">
				<view class="font-bold u-text-center">{{user.orderNumber||0}}</view>
				<view class="color-666 u-m-t-8 u-font-24">订单数量</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import go from '@/commons/utils/go.js'
	const props = defineProps({
		orderInfo: {
			type: Object,
			default: () => {
				status:''
			}
		},
		user: {
			type: Object,
			default: () => {
				return {
					id:'',
					headImg:'',
					telephone:'',
					amount:'0.00',
					accountPoints:'0.00'
				}
			}
		}
	})
	function toOrder(){
		go.to('PAGES_ORDER_INDEX',{
			userId:props.user.userId||'',
			type:'user'
		})
	}

	function chooseUser() {
		go.to('PAGES_CHOOSE_USER')
	}
</script>

<style lang="scss" scoped>
	.change {
		padding: 2rpx 22rpx 4rpx 14rpx;
		border-radius: 18rpx 0rpx 18rpx 0rpx;
		background: linear-gradient( 139deg, #74B0FF 0%, #318AFE 100%);
		z-index: 2;
	}
</style>