<template>
	<view class="  table u-font-28">
		<view class="u-flex u-row-between no-wrap title">
			<slot name="title">
				<view>
					<my-radio @change="radioAllChange" v-model="allChecked" shape="square" :size="20"></my-radio>
				</view>
				<view>商品信息</view>
				<view>规格</view>
				<view>售价</view>
				<view>销量/库存</view>
				<view>分类名称</view>
			</slot>
		</view>
		<view @click="changeChecked(item)" class="u-m-t-12 u-flex  u-p-24 u-row-between row"
			v-for="(item,index) in list" :key="index">
			<view class="">
				<my-radio @change="radioChange($event,item)" v-model="item.checked" shape="square"
					:size="20"></my-radio>
			</view>
			<view class="u-text-left u-flex-1 u-p-l-20">
				<view class="">{{item.name}}</view>
			</view>
			<view class="u-flex-1 u-p-l-4 u-p-r-4 box-size-border">
				{{item.type}}
			</view>
			<view class="u-flex-1">
				￥{{ item.lowPrice }}
			</view>
			<view class="u-flex-1">
				<!-- {{ item.realSalesNumber }}/{{ item.stockNumber }} -->
				{{ item.stockNumber }}
			</view>
			<view class="u-flex-1">
				{{item.categoryName}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive, ref
	} from 'vue';
	const props=defineProps({
		list:{
			type:Array,
			default:()=>[]
		}
	})
	let allChecked=ref(false)
	const emits=defineEmits(['selectAllChange'])
	function radioAllChange(e){
		emits('selectAllChange')
		console.log('selectAllChange');
	}
</script>

<style lang="scss">
	.table {
		background: #F9F9F9;
		border-radius: 8rpx;
		overflow: hidden;

		.title {
			padding: 12rpx 24rpx 12rpx 24rpx;
			background: #AEBAD2;
			border-radius: 8rpx 8rpx 0rpx 0rpx;
			color: #fff;
		}

		.row:nth-of-type(2n+1) {
			background: #F0F0F0;
		}
	}
</style>