<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 my-bg-main color-fff  left-top" @click="chooseUser">切换</view>
		</template>
		<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.telephone||'未绑定手机号'}}</view>
			</view>
			<view>
				<my-button @click="toOrder" :height="60" plain shape="circle">他的订单</my-button>
			</view>
		</view>
		<view class="u-flex u-m-t-20 u-row-between">
			<view class="">
				<view class="font-bold">{{user.amount}}</view>
				<view class="color-666 u-m-t-10">余额</view>
			</view>
			<view class="">
				<view class="font-bold">{{user.totalScore}}</view>
				<view class="color-666 u-m-t-10">积分</view>
			</view>
			<view class="">
				<view class="font-bold">0.00</view>
				<view class="color-666 u-m-t-10">已消费</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',
					totalScore:'0.00'
				}
			}
		}
	})
	
	function toOrder(){
		go.to('PAGES_ORDER_INDEX',{
			userId:props.user.id||'',
			type:'user'
		})
	}

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

<style lang="scss" scoped>
	.change {
		padding: 4rpx 16rpx;
		border-radius: 0 0 16rpx 0;
		z-index: 2;
	}
</style>