<template>
	<up-popup :show="show" @close="close" round="20" mode="bottom">
	    <view class="head">
	        <text></text>
	        <text class="title">请选择</text>
	        <up-icon name="close-circle-fill" color="#333" size="20"></up-icon>
		</view>
		<view class="content">
			<view class="category">
				<view class="category_item" @tap="itemClick(item,index)" :class="{active:index===category.active}" v-for="(item,index) in category.list" :key="index">{{item.name}}</view>
			</view>
			<up-radio-group v-model="goodsValue" @change="groupChange" style="width: 100%;display: initial;">
				<view class="goodsList">
					<view class="goodsItem" @tap="goodsClick(item,index)" v-for="(item,index) in category.goodsList" :key="index">
						<view>{{item.name}}</view>
						<up-radio
						  :key="item.id"
						  :name="item.id"
						  @change="groupChange"
						>
						</up-radio>
					</view>
				</view>
			</up-radio-group>
		</view>
		<view class="bomBtn">
			<view class="affirm" @tap="affirm">确定</view>
		</view>
	</up-popup>
</template>

<script setup>
import { reactive,ref,onMounted } from 'vue';
import {
	$tbShopCategory,
	$tbProductV2
} from "@/http/yskApi/goods.js"
	const props=defineProps({
		show:{
			type:Boolean,
			default:false
		}
	})
	const emits=defineEmits(['itemClick','close', "affirm"])
	const category=reactive({
		list:[],
		goodsList:[],
		active: 0,
		query: {
			page: 0,
			size: 999,
			categoryId: '',
			sort: "createdAt,desc",
		}
	})
	let goodsValue = ref('');
	let show=ref(false)
	
	function itemClick(item,index){
		category.active = index;
		category.query.categoryId = item.id;
		getGoodsList()
	}
	function goodsClick (item,index) {
		goodsValue.value = item.id;
	}
	function groupChange ( n ) {
		console.log(n)
	}
	function getCategoryList () {
		$tbShopCategory({
			page:0,size:200
		}).then(res=>{
			category.list = res.content;
			category.query.categoryId = res.content[0].id
			getGoodsList()
		})
	}
	function getGoodsList () {
		$tbProductV2(category.query).then(res => {
			console.log(res);
			category.goodsList = res.content.map(v => {
				return {
					...v,
					isSellNone: false,
					checked: false,
					showDetail: false
				}
			})
		})
	}
	function open(){
		show.value = true;
		getCategoryList();
	}
	
	function close(){
		show.value = false;
		category.active = 0;
		goodsValue.value = "";
		emits('close')
	}
	/**
	 * 确认
	 */
	function affirm() {
		console.log(goodsValue.value)
		// let params = {
		// 	coverImg: vdata.imgUrlList,
		// 	consId: itemData.value.consId,
		// 	amount: vdata.stockNumber,
		// 	shopId: uni.getStorageSync("shopId"),
		// }
		// tbConsInfoFlowfrmLoss(params).then((res) => {
		// 	show.value = false;
		// 	vdata.imgUrlList = [];
		// 	vdata.stockNumber = 1;
		// })
	}
	defineExpose({
		open,close,affirm
	})
</script>

<style lang="scss">
	.head{
		display: flex;
		padding: 32rpx 28rpx;
		align-items: center;
		justify-content: space-between;
		.title{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}
	}
	.content{
		display: flex;
		height: 672rpx;
		.category{
			min-width: 316rpx;
			height: 100%;
			overflow-y: auto;
			background: #F9F9F9;
			.category_item{
				padding: 22rpx 24rpx;
				border-left: 8rpx solid transparent;
			}
			.active{
				border-left: 8rpx solid #318AFE;
				background-color: #fff;
			}
		}
		.goodsList{
			height: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			.goodsItem{
				width: 100%;
				padding: 22rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.bomBtn{
		padding: 16rpx 38rpx 32rpx 38rpx;
		background-color: #fff;
		.affirm{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #318AFE;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>