<template>
	<view @click="$emit('update:show', false)" :class="{ 'show': show }" class="cu-goodA cu-modal bottom-modal">
		<view @click.stop="" class="cu-dialog-my padding-lr padding-bottom bg-white">
			<view @click="$emit('update:show', false)" style="position: absolute;z-index: 50;right: 20upx;top: 20upx;" class="action ">
				<text :style="{ color: cancelColor }" class="cuIcon-close text-xxl"></text>
			</view>
			<!-- 商品图片 -->
			<image
				class="cu-detailimg padding-xs bg-white radius"
				:src="value.img | lazyImage"
				mode="aspectFit"
			></image>
			<view class="padding-lr flex align-center" style="height: 150upx;">
				<view style="height: 150upx;width: 220upx;"></view>
				<view>
					<view v-if="value.type==1" class="text-red text-price"><cu-price :value="value.price" size="64" /></view>
					<view v-else class="text-red">
						{{value.point_price}}积分
					</view>	
					<view class="text-grey">{{value.name}}</view>
				</view>
			</view>
			<view class="padding-tb flex justify-between align-center border">
				<view>数量</view>
				<cu-stepper @change="val=>$emit('changeNum',val)" :value="num" min="1"  />
			</view>
			<view class="cu-footer padding-top flex">
				<view @click="addcart" style="flex: 1;background:linear-gradient(to right, #ffd01e, #ff8917) ;" class=" btns-left text-center text-white">
					<text v-if="addcartLock" class="cuIcon-loading2 cuIconfont-spin "></text>
					加入购物车
				</view>
				<view @click="buyclicked" style="flex: 1;background: linear-gradient(to right, #ff6034, #ee0a24);" class="btns-right text-center text-white">
					<text v-if="buyclickedLock" class="cuIcon-loading2 cuIconfont-spin "></text>
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import cuPrice from './cu-price.vue';
import cuStepper from './cu-stepper.vue';
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		},
		value: {
			type: Object,
			default: () => ({})
		},
		number:{
			type:Number,
			default:1
		}
	},
	components: {
		cuPrice,
		cuStepper
	},
	computed:{
		num(){
			let value=this.number || 1;
			return value 
		}
	},
	data() {
		return {
			addcartLock:false,
			buyclickedLock:false
		};
	},
	methods:{
		async addcart(){
			this.addcartLock=true;
			await this.$emit('addcart');
			this.addcartLock=false;
		},
		async buyclicked(){
			this.buyclickedLock=true;
			await this.$emit('buyclicked')
			this.buyclickedLock=false;
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-goodA {
	text-align: start;
	.border {
		position: relative;
		&::after {
			content: '';
			border-bottom: 1upx solid #ccc;
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			transform: scaleY(0.5);
		}
	}
	.cu-footer {
		.btns-left,
		.btns-right {
			line-height: 80upx;
		}
		.btns-left {
			border-radius: 40upx 0 0 40upx;
		}
		.btns-right {
			border-radius: 0 40upx 40upx 0;
		}
	}
	.cu-dialog-my {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100vw;
		.cu-detailimg {
			width: 200upx;
			height: 200upx;
			position: absolute;
			top: -51upx;
			z-index: 1111;
		}
	}
}
</style>
