<template>
	<view class="page-detail" v-if="f">
		<CustNavBar></CustNavBar>
		<view class="foods-basic">
			<view class="foods-cover">
				<image class="cover" :src="f.cover" mode=""></image>
			</view>
			<view class="foods-info-wrapper">
				<view class="foods-name">
					<text>{{f.title}}</text>
				</view>
				<view class="sale-control flex-center justify-between">
					<view class="sale-count">
						<text>销量{{f.saleCount}} </text>
					</view>
					<view class="sale-price">
						<text class="unit">￥</text>
						<text
							class="price">{{f.coupon ? (((f.price+f.coupon)/100).toFixed(2)) : (f.price/100).toFixed(2)}}</text>
						<text v-if="f.coupon && f.coupon != 0" class="coupon-price">{{(f.price/100).toFixed(2)}}</text>
					</view>
				</view>
				<view class="coupon-info">
					{{f.couponDesc}}
				</view>
			</view>
		</view>
		<view class="foods-detail-content" v-html="f.content"></view>
		<AddToCart :id="id || 0" />
	</view>
</template>

<script lang="ts" setup>
	import { foodsDetail } from '../../service/api';
	import { ref } from "vue";
	import { FoodsModel } from '../../service/models';
	import { AddToCart } from '../../components'
	const props = defineProps<{
		id ?: any
	}>();
	const f = ref<FoodsModel>()
	foodsDetail(Number(props.id || 1)).then((foods) => {
		uni.setNavigationBarTitle({
			title: foods.title
		})
		f.value = foods
	})
</script>

<style lang="scss">
	.page-detail {
		background-color: $uni-color-primary;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 10px;

		img,
		image,
		umi-image {
			max-width: 100%;
			height: auto;
		}

		.foods-basic {
			position: relative;
		}

		.foods-cover {
			.cover {
				display: block;
				width: 100%;
				height: 340px;
			}
		}

		.coupon-info {
			color: #999;
			font-size: 13px;
			margin-top: 10px;
		}

		.foods-info-wrapper {
			padding: 15px;
			position: absolute;
			background-color: #fff;
			border-radius: 10px;
			left: 20px;
			right: 20px;
			bottom: -60px;
		}

		.foods-detail-content {
			background-color: #fff;
			margin: 80px 20px 20px;
			border-radius: 10px;
			padding: 15px 15px 50px;
		}

		.foods-name {
			font-weight: bold;
			font-size: 18px;
		}

		.sale-count {
			color: #999;
			font-size: 13px;
			margin: 4px 0;
		}

		.sale-price {
			.unit {
				font-size: 12px;
			}

			.price {
				font-size: 18px;
				color: $uni-color-primary;
				font-weight: bold;
			}
		}

		.coupon-price {
			text-decoration: line-through;
			font-size: 12px;
			margin-left: 5px;
		}


	}
</style>