<template>
	<view class="mask u-fixed position-all u-flex u-col-bottom" v-if="show" @tap="close">
		<view class="bg-fff w-full" @tap.stop="nullFunction">
			<view class="u-p-30">
				<view class="font-bold u-text-center u-font-32">选择团购券分类</view>
				<view class="u-m-t-32 u-flex">
					<view class="u-flex-1 u-p-r-16">
						<view class="u-m-b-12">分类名称</view>
						<uni-easyinput v-model="goods.query.name" placeholder="请输入团购券分类名称" />
					</view>
					<!-- <view class="u-flex-1 u-p-l-16">
						<view class="u-m-b-12">商品分类</view>
						<uni-data-picker :clear-icon="false" :map="{text:'name',value:'id'}" placeholder="请选择分类"
							popup-title="请选择分类" :localdata="category" v-model="goods.query.categoryId">
						</uni-data-picker>
					</view> -->
				</view>
				
				<view class="u-m-t-32 u-flex u-row-right">
					<view class="u-flex-1 u-p-r-16">
						<my-button type="cancel" plain @tap="resetQuery">重置</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button @tap="getGoods">查询</my-button>
					</view>
				</view>
			</view>

			<scroll-view :scroll-x="false" scroll-y="true" :style="computedStyle()">
				<view class="u-p-l-30 u-p-r-30">
					<view class="u-flex u-row-between no-wrap">
						<view>
							<my-radio   @change="radioAllChange" v-model="goods.allChecked" shape="square" :size="20"></my-radio>
						</view>
						<view>名称</view>
						<view>状态</view>
					</view>
					<view class="u-m-t-12 u-flex u-row-between" v-for="(item,index) in goods.list" :key="index">
						<my-radio @change="radioChange" v-model="item.checked" shape="square" :size="20"></my-radio>
						<view>
							{{item.name}}
						</view>
						<view>
							<my-switch v-model="item.status" disabled></my-switch>
							 <!-- {{item.status}} -->
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="u-p-30">
				<my-pagination :totalElements="goods.totalElements" :size="goods.query.size" @change="pageChange"></my-pagination>
				<view class="u-m-t-20 u-flex">
					<view class="u-flex-1 u-p-r-16">
						<my-button type="cancel" plain @tap="close">取消</my-button>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<my-button @tap="confrim">确定</my-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, onMounted, ref, watch } from 'vue';
	import myButton from '@/components/my-components/my-button';
	import myRadio from '@/components/my-components/my-radio';
	import mySwitch from '@/components/my-components/my-switch';
	import myPagination from '@/components/my-components/my-pagination'
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		},
		height: {
			type: [Number, String],
			default: '40vh'
		}
	})

	function nullFunction() {

	}

	const show = ref(props.modelValue)

	function open(arr) {
		show.value = true
		if(arr){
			for(let i in goods.list){
				console.log(arr.includes(goods.list[i].id));
				goods.list[i].checked=arr.includes(goods.list[i].id)
			}
		}
		
	}

	function close() {
		show.value = false
	}

	

	function resetQuery() {
		Object.assign(goods.query, $quey)
	}

	function computedStyle() {
		return `height:${typeof props.height==='string'?props.height:props.height+'rpx'};`
	}

	const emits = defineEmits(['update:modelValue','confirm'])
	
	const $quey = {
		name: '',
		page: 0,
		size: 10,
	}
	const query = reactive({
		...$quey
	})
	const goods=reactive({
		list:[],
		allChecked:false,
		totalElements:0,
		query:{
			...$quey
		}
	})
	function getGoods() {
		// $coupon.get(goods.query).then(res=>{
		// 	goods.list=res.content.map(v=>{
		// 		return {...v,checked:false}
		// 	})
		// 	goods.allChecked=false
		// 	goods.totalElements=res.totalElements
		// })
	}
	getGoods()
	
	function pageChange(page){
		goods.query.page=page-1
		getGoods()
	}
	function radioChange(newval){
		goods.allChecked=goods.list.filter(v=>v.checked).length!=0
	}
	function radioAllChange(newval){
		goods.list.forEach(i=>{i.checked=newval})
	}
	function confrim(){
		const arr= goods.list.filter(v=>v.checked)
		console.log(arr);
		emits('confirm',arr)
	}
	defineExpose({open,close})
</script>

<style lang="scss" scoped>
	.mask {
		background: rgba(51, 51, 51, 0.5);
		z-index: 900;
	}
	.coverImg{
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}
</style>