<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9" :zIndex="999">
		<view class="u-p-32 box u-font-28">
			<view class="u-flex u-relative u-row-center">
				<view class="u-font-32">报损</view>
				<view class="u-absolute close">
					<up-icon @click="close" :size="16" color="#000" name="close-circle-fill"></up-icon>
				</view>
			</view>
			<view class="u-m-t-48">
				<view>商品名称</view>
				<view class="u-m-t-16 color-999" style="">{{data.name}}</view>
				<view class="u-m-t-38">
					<view class="u-m-b-32">
						<view class="u-flex ">
							报损数量
						</view>
						<view class="u-m-t-16">
							<up-input v-model="form.number" type="number"></up-input>
						</view>
					</view>
					<view class="u-m-b-32">
						<view class="u-flex u-row-between">
							<view>备注</view>
						</view>
						<view class="u-m-t-16">
							<up-textarea :height="42" v-model="form.remark" placeholder="请输入备注"></up-textarea>
						</view>
					</view>
					<view class="u-m-b-32">
						<view class="u-flex u-row-between">
							<view>上传图片</view>
						</view>
						<view class="u-m-t-16">
							<my-up-upload :maxCount="1" :multiple="false" v-model="form.coverImg"></my-up-upload>
						</view>
					</view>
					<view class="u-m-t-60">
						<my-button type="primary" shape="circle" @tap="save">
							<view class="u-font-32">
								保存
							</view>
						</my-button>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { reactive, ref, watch } from 'vue';
	import { productReportDamage } from '@/http/api/product.js'
	import infoBox from '@/commons/utils/infoBox.js'
	
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		goods: {
			type: Object,
			default: () => {
				skuList: []
			}
		}
	})
	const data = ref(props.goods)
	const emits = defineEmits(['update:show', 'save'])
	const form = reactive({
		remark: '',
		number: 1,
		coverImg: []
	})
	let popShow = ref(props.show)
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = props.goods
			form.remark = ''
			form.number = 1
			form.coverImg = []
		}
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
	}

	function open() {

	}

	async function save() {
		if (form.number <= 0) {
			return infoBox.showToast('请输入正确的报损数量')
		}
		if (!form.remark) {
			return infoBox.showToast('请输入备注')
		}
		let par = {
			...form,
			productId:props.goods.id,
			imgUrls:form.coverImg[0]?form.coverImg[0].serveUrl:''
		}
		delete par.coverImg
		const res= await productReportDamage(par)
		infoBox.showToast('提交成功！')
		popShow.value=false
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-m-t-16 .u-textarea{
		border-width: 1px!important;
	}
	.box {
		width: 556rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}

	.close {
		position: absolute;
		right: 0;
	}

	.number {
		color: #EE4646;
	}
</style>