<template>
	<div>
		<el-form class="mb-[-16px]" :model="queryParams" inline>
			<el-form-item label="商品名称" prop="store_name">
				<el-input class="w-[200px]" v-model="queryParams.store_name" @keydown.enter="productList" clearable
					placeholder="请输入商品名称" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="resetPage">查询</el-button>
				<el-button @click="resetParams">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="mt-4" v-loading="pager.loading">
			<el-table :data="pager.lists" @selection-change="handleSelectionChange" :height="300">
				<el-table-column type="selection" width="55" />
				<el-table-column label="商品ID" prop="id" show-overflow-tooltip />
				<el-table-column label="商品图片" prop="image" min-width="80">
					<template #default="{ row }">
						<el-image style="width: 50px; height: 50px" :src="row.image" :preview-teleported="true" />
					</template>
				</el-table-column>
				<el-table-column label="商品名称" prop="store_name" min-width="200" show-overflow-tooltip />
				<el-table-column label="分类" prop="cate_name" min-width="120" show-overflow-tooltip />
				<el-table-column label="单位" prop="unit_name" min-width="80" show-overflow-tooltip />
				<el-table-column label="商品价格" prop="price" min-width="100" show-overflow-tooltip />
				<el-table-column label="仓库库存" prop="stock" min-width="100" show-overflow-tooltip />
			</el-table>
		</div>
		<div class="flex mt-4 justify-end">
			<pagination v-model="pager" @change="getLists" />
		</div>
		<el-button class="w-full mt-4" type="primary" @click="bindStore">添加商品</el-button>
	</div>
</template>

<script lang="ts" setup name="systemStoreLists">
	import { usePaging } from '@/hooks/usePaging'
	import { apiStoreProductLists } from '@/api/store_product'

	import { ElMessage } from 'element-plus'
	import { defineProps } from 'vue';

	const props = defineProps({
		activityZoneFormId: Number
	});

	// 查询条件
	const queryParams = reactive({
		store_name: '',
		is_warehouse: 1,
		activity_zone_form_id: props.activityZoneFormId
	})

	// 选中数据
	const selectData = ref<any[]>([])
	const datas = ref()

	// 表格选择后回调事件
	const handleSelectionChange = (val : any[]) => {
		selectData.value = val.map(({ id }) => id)
	}

	const productList = (e) => {
		getLists()
		e.preventDefault();
	}
	const { pager, getLists, resetParams, resetPage } = usePaging({
		fetchFun: apiStoreProductLists,
		params: queryParams
	})
	getLists()

	const emits = defineEmits(['onBindStore'])
	// 绑定用户
	const bindStore = () => {
		const list = pager.lists.filter((item) => selectData.value.includes(item.id))
		if (!list.length) return ElMessage.error('请先选择商品')
		emits('onBindStore', list, queryParams.activity_zone_form_id)
	}
</script>