<template>
	<view class="xkl-com-bg">
		<view style="height: 20rpx;"></view>
		<view>
			<navigator :url="`/pages/order/pre?id=${goodsItem.id}&num=1`"
				class="u-flex"
				style="background-color: #ffffff;padding: 20rpx;margin-bottom: 20rpx; border-radius: 10rpx;font-size: 30rpx;">
				<u--image width="220rpx" height="220rpx" :src="goodsItem.cover[0]" radius="16rpx"></u--image>
				<view style="padding: 20rpx;width: 100%;">
					<view style="color: #232323;">{{goodsItem.name}}</view>
					<view style="height: 10rpx;"></view>
					<view>
						<text>单价：</text>
						<text style="color: crimson;">
							{{goodsItem.current_price}}元
						</text>
					</view>
					<view style="height: 10rpx;"></view>
					<view class="u-flex u-flex-between">
						<view>
							<text>购买数量：</text>
							<text style="color: crimson;">1</text>
						</view>
						<view style="color: #7999C3;">下单</view>
					</view>
				</view>
			</navigator>
			<navigator :url="`/pages/order/pre?id=${goodsItem.id}&num=${item.need_num}`"
				v-for="(item,index) in levelItems" :key="index" class="u-flex"
				style="background-color: #ffffff;padding: 20rpx;margin-bottom: 20rpx; border-radius: 10rpx;font-size: 30rpx;">
				<u--image width="220rpx" height="220rpx" :src="goodsItem.cover[0]" radius="16rpx"></u--image>
				<view style="padding: 20rpx;width: 100%;">
					<view class="u-flex u-flex-between">
						<view style="color: #232323;">{{goodsItem.name}}</view>
						<view>
							<text style="font-size: 28rpx;color: #999999;">升级到</text>
							<text style="color: #26418A;font-size: 32rpx;font-weight: 700;">v{{item.level}}</text>
						</view>
					</view>
					<view style="height: 10rpx;"></view>
					<view>
						<text>单价：</text>
						<text style="color: crimson;">
							{{goodsItem.current_price}}元
						</text>
					</view>
					<!-- <view style="height: 10rpx;"></view>
					<view>
						<text>总价：</text>
						<text style="color: crimson;">
							{{item.total_price}}元
						</text>
					</view> -->
					<view style="height: 10rpx;"></view>
					<view class="u-flex u-flex-between">
						<view>
							<text>所需数量：</text>
							<text style="color: crimson;">
								{{item.need_num}}
							</text>
						</view>
						<view style="color: #7999C3;">下单</view>
					</view>
				</view>
			</navigator>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	let self;
	export default {
		data() {
			return {
				levelItems: [],
				goodsItem: {
					id: '',
					cover: [],
					name: '',
					original_price: '',
					current_price: '',
					pre_price: '',
					integral: '',
					sales: '',
					stock: '',
					note: ''
				},
			}
		},
		onLoad() {
			self = this;
		},
		onShow(option) {
			self.getGoodsLevel();
		},
		onPullDownRefresh() {
			self.getGoodsLevel();
			
			uni.stopPullDownRefresh();
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				self.show = false
				// console.log('close');
			},
			getGoodsLevel() {
				self.$http.get('/shop/v10/goods/level').then(({
					data
				}) => {
					self.goodsItem = data.goods;
					self.levelItems = data.level;
				})
			},
		}
	}
</script>

<style lang="scss">

</style>