<template>
	<div>
		<el-card class="!border-none mb-4" shadow="never">
			<el-form class="mb-[-16px]" :model="queryParams" inline>
				<el-form-item label="商品名称" prop="store_name">
					<el-input class="w-[280px]" v-model="queryParams.store_name" 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>
		</el-card>
		<el-card class="!border-none" v-loading="pager.loading" shadow="never">
			<el-button v-perms="['activity_zone/add']" type="primary" @click="showProductModal()">
				<template #icon>
					<icon name="el-icon-Plus" />
				</template>
				新增
			</el-button>
			<div class="mt-4">
				<el-table :data="pager.lists" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column label="ID" prop="id" show-overflow-tooltip />
					<el-table-column label="商品ID" prop="product_id" show-overflow-tooltip />
					<el-table-column label="商品" prop="store_name" show-overflow-tooltip />
					<el-table-column label="单位" prop="unit_name" show-overflow-tooltip />
					<el-table-column label="操作" width="120" fixed="right">
						<template #default="{ row }">
							<el-button v-perms="['activity_zone/delete']" type="danger" link
								@click="handleDelete(row.id)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="flex mt-4 justify-end">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<el-dialog v-model="showProduct" title="选择商品" width="70%">
			<productPop :activityZoneFormId="queryParams.form_id" @onBindStore="onBindProduct"></productPop>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="activityZoneLists">
	import { usePaging } from '@/hooks/usePaging'
	import { useDictData } from '@/hooks/useDictOptions'
	import { apiActivityZoneLists, apiActivityZoneDelete, apiActivityZoneAdd } from '@/api/activity_zone'
	import feedback from '@/utils/feedback'
	import productPop from './component/productPop.vue'

	const showProduct = ref(false) // 选择商品列表是否显示
	
	const route = useRoute()

	// 查询条件
	const queryParams = reactive({
		form_id: route.query.id,
		store_name: '',
	})

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

	// 表格选择后回调事件
	const handleSelectionChange = (val : any[]) => {
		selectData.value = val.map(({ id }) => id)
	}
	
	// 选择商品
	const onBindProduct = async(e: any[], formId: any) => {
		let data = {
			form_id: formId,
			product_ids: []
		}
	    e.forEach((item: any) => {
	        if (!data.product_ids.find((t: any) => t.id == item.id)) {
	            data.product_ids.push(item.id)
	        }
	    })
		await apiActivityZoneAdd(data)
	    showProduct.value = false
		getLists()
	}
	
	const showProductModal = () => {
		showProduct.value = true
	}

	// 获取字典数据
	const { dictData } = useDictData('activity_zone')

	// 分页相关
	const { pager, getLists, resetParams, resetPage } = usePaging({
		fetchFun: apiActivityZoneLists,
		params: queryParams
	})
	
	// 删除
	const handleDelete = async (id : number | any[]) => {
		await feedback.confirm('确定要删除？')
		await apiActivityZoneDelete({ id })
		getLists()
	}

	getLists()
</script>