<template>

	<loading-state ref="pageView" @request="request">
		<view>
			<image :src="data.picUrl" style="width: 100vw;height: 100vw;background-color: #FFFFFF;"></image>
			<view
				style="margin-top: 9px;margin-left: 9px;margin-right: 9px;border-top-left-radius: 13px;border-top-right-radius: 13px;display: flex;flex-direction: column;align-items: center;background-color: #FFFFFF;padding-top: 11px;">
				<image src="../../static/goods_price_bg.png"
					style="width: 90vw;height: 16vw;border-radius: 10px;position: absolute;"></image>
				<view
					style="display: flex;flex-direction: row;justify-content: space-between;width: 80vw;position: relative;height: 16vw;align-items: center;color: white;">
					<view>
						<text style="font-size: 14px;font-weight: 600;">￥</text>
						<text style="font-size: 24px;margin-left: 7px;font-weight: 500;">{{data.price}}</text>
					</view>
					<view>价值</view>
				</view>

				<view
					style="left: 25px;font-size: 18px;width: 90vw;margin: 10px 0px;font-weight: 600;margin-left: 18px;">
					{{data.name}}
				</view>
			</view>

			<view style="display: flex;flex-direction: column;align-items: center;margin-left: 9px;margin-right: 9px;">
				<view
					style="border-bottom-left-radius: 13px;border-bottom-right-radius: 13px;background-color: #f9f9f9;width: 100%;display: flex;flex-direction: row;">
					<image src="../../static/guige.png"
						style="width: 21px;height: 21px;margin-left: 12px;margin-top: 9px;margin-bottom: 12px;"></image>
					<view
						style="height: 21px;line-height: 21px;margin-top: 9px;font-size: 13px;color: #666666;margin-left: 5px;">
						规格：
						{{data.remarks}}
					</view>
				</view>
			</view>
		</view>
	</loading-state>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					sid: ''
				},
				data: {
					picUrl: '',
					name: '',
					price: '',
					remarks: ''
				}
			}
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.request()
		},
		methods: {
			request() {
				let _this = this
				_this.$api.goodsDetail(this.page.sid).then((resp) => {
					console.log(resp);
					_this.data = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			}
		}
	}
</script>

<style>
	uni-page-body,
	page {
		background: #f3f4f6;
	}
</style>