<!--详情 顶部-->
<template>
	<el-row :gutter="20" class="info">
		<el-col :span="10">
<!--			详情图片-->
			<el-image  :src="state.info.image" fit="contain" />
		</el-col>
		<el-col :span="14">
<!--			标题-->
			<h1>{{state.info.title}}	</h1>
<!--			简介-->
			<div class="introduction" v-if="state.info.tag">		<span style="font-weight: 700">作者:</span>			{{state.info.tag}}			</div>
			<div class="introduction" v-if="state.info.stockQuantity">		<span style="font-weight: 700">库存:</span>			{{state.info.stockQuantity}}			</div>
			<div class="introduction" v-if="state.info.price">
				<span style="font-weight: 700">价格:</span>			<span style="color:red">{{state.info.price}}	</span>		</div>
			<!--操作-->
			<div class="operate">
				<!--        加入购物车-->
<!--				<el-button type="primary" @click="handleCart">加入购物车</el-button>-->
        <!--        立即购买-->
        <el-button type="primary" @click="handleBuy" v-if="state.info.price">立即购买</el-button>
				<!--        收藏-->
				<el-button style="width: 220px" type="primary" @click="handleFavorite">
					{{state.info.isFavorite? '已收藏':'未收藏'}}
				</el-button>
			</div>
		</el-col>
	</el-row>
<!--	抽屉-->
	<el-drawer
		v-model="buyDrawer"
		title="购买"
	>
		<el-form
			ref="formRef"
			style="max-width: 600px"
			:model="state.buyForm"
			label-width="auto"
			label-position="top"
		>
			<el-form-item prop="title"	label="商品名称"	>
				<el-input disabled v-model="state.buyForm.title" />
			</el-form-item>

			<el-form-item prop="title"	label="商品单价(元)"	>
				<el-input disabled v-model="state.buyForm.price" />
			</el-form-item>

			<el-form-item prop="total"	label="购买数量"	>
				<el-input-number
					v-model="state.buyForm.quantity" :min="1" :max="10" @change="handleChange" />
			</el-form-item>
			<el-form-item prop="title"	label="总价"	>
				<el-input-number disabled
					v-model="state.buyForm.totalAmount" />
			</el-form-item>
			<el-form-item prop="addressId"	label="选择收货地址"	>
				<el-select v-model="state.buyForm.addressId" placeholder="Select" style="width: 240px">
					<el-option
						v-for="item in state.cateList"
						:key="item.id"
						:label="item.city"
						:value="item.id"
					/>
				</el-select>

			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="buySubmitForm(formRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</el-drawer>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import type { FormInstance } from 'element-plus'
const buyDrawer = ref(false)
const formRef = ref<FormInstance>()
import { useRoute } from 'vue-router';
const route = useRoute();
const itemId = route.params.id;
const  state =reactive(<any>{
	info:{},
	buyForm:{
		itemId:itemId,
		title:"",
		quantity:1,
		totalAmount:0
	},
	cateList:[]
})

// 深度监听 route.params.id
watch(	() => route.params.id,
	(newId) => {
		window.location.href = `/info/${newId}`
	},
	{ deep: true }
);

function init() {
	frontRequest.get(`/api/item/${itemId}`).then(response =>{
		state.info = response.data
	})

	frontRequest.get(`api/address/page`).then(response =>{
		state.cateList = response.data.list
	})

}
onMounted(()=>{
	init()
})

/**
 * 用户收藏
 */
function handleFavorite() {
	if (state.info.isFavorite){
		frontRequest.post("/api/behavior/delete",{itemId:itemId,type:1}).then(res =>{
			ElMessage.success("取消成功")
			init()
		})
	}else {
		frontRequest.post("/api/behavior",{itemId:itemId,type:1}).then(res =>{
			ElMessage.success("收藏成功")
			init()
		})
	}
}
/**
 * 购买按钮提交
 * @param formEl
 */
const buySubmitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			console.log(state.buyForm)
			frontRequest.post("/api/order",state.buyForm).then(res =>{
        ElMessage.success("购买成功")
        buyDrawer.value = false
      })
		}
	})
}

/**
 * 购买按钮
 */
const handleBuy = () => {
	buyDrawer.value = true
	state.buyForm.title = state.info.title
	state.buyForm.id = state.info.id
	state.buyForm.price = state.info.price
	state.buyForm.totalAmount = (state.info.price * state.buyForm.quantity).toFixed(2);

}

/**
 * 添加数量
 */
const handleChange = () => {
	state.buyForm.totalAmount = (state.info.price * state.buyForm.quantity).toFixed(2);


}
</script>
<style scoped>
.info{
	background: linear-gradient(to bottom, #dfe8f6, #e0e0e0); /* 清新渐变背景 */
	background-color: #fdfdfe;
	height: 500px;
  padding: 20px;
	h1{
		color: #11192d;
		font-size: 38px;
		font-weight: 600;
		margin-bottom: 20px;
	}
	.introduction{
		font-size: 14px;

		margin-bottom: 20px;
	}
	.tag{
		margin-bottom: 20px;
	}
}
:deep(.el-image){
	border-radius: 10px;
	height: 420px;
	margin-left: 30px;
}

</style>
