<template>
	<up-popup :show="popShow" @close="close" @open="open" mode="center" :round="9">
		<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">
				<up-form labelPosition="left" :model="data" :rules="rules" ref="refForm" errorType="toast">
				<view>商品名称</view>
				<view class="u-m-t-16" v-if="isSku">{{data.name}}</view>
				<view class="u-m-t-38">
					<template v-if="!isSku">
						<view class="u-m-b-32" >
							<view class="u-flex u-row-between">
								<view>{{data.name}}</view>
								<view class="u-font-24">
									<text>变动数量：</text>
									<text class="number">{{data.stockNumber-data._stockNumber}}</text>
								</view>
							</view>
							<view class="u-m-t-16">
								<up-form-item prop="stockNumber">
									<up-input v-model="data.stockNumber" type="number">
										<template #suffix>
											<view>{{data.unitName||''}}</view>
										</template>
									</up-input>
								</up-form-item>
								
							</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.note" placeholder="请输入备注"></up-textarea>
							</view>
						</view>
					</template>
					<template v-else>
						<scroll-view scroll-y="true" style="max-height: 30vh;">
							<view class="u-m-b-32" v-for="(item,index) in data.skuList" :key="index">
								<view class="u-flex u-row-between">
									<view>{{item.name}}</view>
									<view class="u-font-24">
										<text>变动数量：</text>
										<text class="number">{{item.stockNumber-item._stockNumber}}</text>
									</view>
								</view>
								<view class="u-m-t-16">
									<up-input v-model="item.stockNumber">
										<template #suffix>
											<view>{{data.unitName||''}}</view>
										</template>
									</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.note" placeholder="请输入备注"></up-textarea>
								</view>
							</view>
						</scroll-view>
					</template>

					<view class="u-m-t-60">
						<my-button type="primary" shape="circle" @tap="save">
							<view class="u-font-32">
								保存
							</view>
						</my-button>
						<view class="u-m-t-30">
							<template v-if="!recoders.show">
								<view class="color-999 u-font-24 u-flex u-row-center u-col-center">
									<view class="u-flex" @click="changeShowRecoders(true)">
										<view class="u-m-r-6">查看记录</view>
										<up-icon name="arrow-down" :size="12"></up-icon>
									</view>
								</view>
							</template>

							<template v-else>
								<scroll-view scroll-y="true" style="max-height: 30vh;">
									<my-step :list="recoders.list"></my-step>
								</scroll-view>
								<view class="color-999 u-font-24 u-flex u-row-center u-col-center">
									<!-- <view class="u-flex" @click="changeShowRecoders(false)"> -->
									<view class="u-flex" @click="toRecodes">
										<view class="u-m-r-6">全部记录</view>
										<up-icon name="arrow-right" :size="12"></up-icon>
									</view>
								</view>
							</template>

						</view>

					</view>
				</view>
				</up-form>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch,
		onMounted,
		computed 
	} from 'vue';
	import {
		returnSkuSnap,
		returnTypeEnum,
		returnCategory
	} from '@/pageProduct/util.js'
	import {
		$tbShopUnit,$getProductStockDetail
	} from '@/http/yskApi/goods.js'
	import go from '@/commons/utils/go.js'
	const refForm = ref(null)
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		category: {
			type: Array,
			default: () => []
		},
		goods: {
			type: Object,
			default: () => {
				return{
					id:'',
					skuList: []
				}
			}
		}
	})
	const rules =reactive({
		'stockNumber': [{
				type: 'number',
				required: true,
				message: '请填写库存',
				trigger: ['blur', 'change']
			}
		]
	}) 
	function toRecodes(){
		console.log(props.goods.id);
		go.to('PAGES_PRODUCT_INVOICING_LIST',{
			productId:props.goods.id
		})
	}
	function changeShowRecoders(show) {
		recoders.show = show
	}
	const recoders = reactive({
		list: [],
		show: true,
		active: 0
	})

	const data = ref(props.goods)
	const emits = defineEmits(['update:show', 'save'])
	const form = reactive({
		note: ''
	})
	let popShow = ref(props.show)
	watch(() => props.show, (newval) => {
		popShow.value = newval
		if (newval) {
			data.value = props.goods
			getProductStockDetail()
		}
	})
	async function getProductStockDetail(){
		const {content}=await $getProductStockDetail({
			page:0,
			size:2,
			productId:props.goods.id,
			column:'/api/tbProductStockDetail/stock/count',
			shopId:uni.getStorageSync('shopId'),
			createdAt:[]
		})
		console.log(content);
		recoders.list=content.map(v=>{
			return {
				...v,
				title:v.createdAt,
				content:v.type+':'+Math.abs(v.stockNumber) 
			}
		})
	}
	const isSku = computed(() => {
		// return data.value.typeEnum == '多规格'
		return false
	})
	watch(() => popShow.value, (newval) => {
		emits('update:show', newval)
	})

	function close() {
		popShow.value = false
		form.note=''
	}

	function open() {

	}
	function save() {
		refForm.value.validate().then(valid => {
			if (valid) {
				emits('save', {
					...data.value,
				})
			} else {
				console.log(err);
			}
		}).catch(() => {
			// 处理验证错误  
		});
	}
	// function save() {
	// 	const skuSnap = returnSkuSnap(data.value)
	// 	let typeEnum = returnTypeEnum(data.value.typeEnum)
	// 	let lowPrice = undefined
	// 	typeEnum = typeEnum ? typeEnum : 'normal'
	// 	const findCategory = returnCategory(data.value.categoryName, props.category)
	// 	console.log(typeEnum);
	// 	console.log(findCategory);
	// 	const categoryId = findCategory ? findCategory.id : ''
	// 	if (typeEnum == 'normal') {
	// 		// 单规格
	// 		lowPrice = data.value.skuList[0].salePrice
	// 	}
	// 	emits('save', {
	// 		...data.value,
	// 		lowPrice,
	// 		typeEnum,
	// 		images: data.value.images ? data.value.images : [data.value.coverImg],
	// 		categoryId,
	// 		skuSnap: JSON.stringify(skuSnap)
	// 	})
	// }
</script>

<style lang="scss" scoped>
	.box {
		width: 556rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
	}

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

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