<template>
	<view class=" goods">
		<view class="u-flex">
			<view class="u-flex u-col-top">
				<image v-if="data.headImg" :src="data.headImg" class="img"></image>
				<view class="img" v-else></view>
			</view>
			<view class="u-p-l-30 u-flex-1" style="position: relative;">
				<view class="u-flex">
					<view class="color-000 font-bold" style="margin-right: 10rpx;">{{data.nickName}}</view>
					<image style="width: 24rpx;height: 24rpx;" v-if="data.sex==1" src="./men.png" mode=""></image>
					<image style="width: 24rpx;height: 24rpx;" v-if="data.sex==0" src="./women.png" mode=""></image>
				</view>
				<view class="u-m-t-30 color-666 ">
					{{data.phone||''}}
				</view>
				<view style="position: absolute;right: 0;top: 0;border-radius: 4rpx 4rpx 4rpx 4rpx;background: #EAF4FD;font-weight: 400;font-size: 20rpx;color: #318AFE;">
					会员等级{{data.isVip}}
				</view>
			</view>
			
		</view>
		
		<view class="info u-m-t-20 u-flex">
			<view class="u-flex-1  u-text-center" >
				<view class="font-bold color-000 pr-16" >{{data.amount||0.00}}</view>
				<view class="u-flex u-row-center" >
					<view class="color-999">余额</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="u-flex-1  u-text-center" >
				<view class="font-bold color-000 pr-16" >{{data.accountPoints||0}}</view>
				<view class="u-flex u-row-center" >
					<view class="color-999">积分</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<view class="u-flex-1  u-text-center" @click="toCoupon">
				<view class="font-bold color-000 pr-16" >{{data.couponNum||0}}</view>
				<view class="u-flex u-row-center" >
					<view class="color-999">优惠券</view>
					<view class="u-flex">
						<uni-icons type="right" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="u-m-t-24 u-flex u-row-between">
			<view></view>
			<view class="u-flex">
				<view class="btn-default btn" @click="toOrder">查看订单</view>
				<view class="btn-primary btn u-m-l-38" @click="moreOperate">更多操作</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import go from '@/commons/utils/go.js';
	const emits=defineEmits(['moreOperate'])
	const props = defineProps({
		index:{
			type:Number
		},
		data:{
			type:Object,
			default:()=>{
				return{}
			}
		},
		showDetail:{
			type:Boolean,
			default:false
		}
	})
	function toCoupon(){
		go.to('PAGES_USER_COUPON',{
			userId: props.data.id||'',
		})
	}
	function toOrder(){
		go.to('PAGES_ORDER_INDEX',{
			userId: props.data.userId||'',
			type:'user'
		})
	}
	
	function moreOperate(){
		emits('moreOperate',props.index)
	}
	
</script>

<style lang="scss" scoped>
	$imgSize: 126rpx;
	
	.pr-16{
		padding-right: 16px;
	}
	.info{
		background-color: rgb(250, 250, 250);
		padding: 20rpx;
	}
	.btn{
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
		border: 2rpx solid transparent;
	}
	.btn-primary{
		border-color:  $my-main-color;;
		color: $my-main-color;
	}
	.btn-default{
		border-color:  #F4F4F4;
		color: #666;
	}
	
	.img {
		width: $imgSize;
		height: $imgSize;
		background-color: #eee;
		border-radius: 16rpx;
	}

	.goods {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background-color: #fff;
		padding: 24rpx 28rpx 16rpx 28rpx;
		font-size: 28rpx;
		.skus{
			background: #F9F9F9;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			padding: 28rpx 42rpx;
			.sku{
				color: #000;
				font-weight: 700;
				padding: 6rpx 40rpx;
			}
			.skds{
				gap: 10rpx 50rpx;
			}
			.skd{
				padding: 14rpx 40rpx;
				background: #F0F2F5;
				border-radius: 4rpx;
				position: relative;
				color: #666;
				overflow: hidden;
				.tag{
					position: absolute;
					right: 0;
					top: 0;
					font-size: 12rpx;
					right: 0;
					padding: 2rpx 4rpx;
					border-radius: 0rpx 4rpx 4rpx 4rpx;
				}
				.tag-primary{
					background-color: $my-main-color;
					color: #fff;
				}
			}
			
			
		}
	}
</style>