<template>
	<div class="basic-data-container">
		<el-card class="card-container">
			<template #header>
				<div class="card-header">
					<span>基础信息</span>
				</div>
			</template>

			<div class="content-wrapper">
				<!-- 同步按钮区域 -->
				<div class="head-container" style="margin-bottom: 10px;">
					<el-button type="primary" @click="handleSync" :loading="syncLoading">
						<el-icon>
							<Refresh />
						</el-icon>
						同步基础数据
					</el-button>
				</div>

				<!-- 搜索表单 -->
				<el-form :model="searchForm" :inline="true" style="margin-bottom: 10px;">
					<el-form-item label="品名名称">
						<el-input v-model="searchForm.goodsName" placeholder="请输入品名名称" clearable style="width: 200px;" />
					</el-form-item>
					<!-- <el-form-item label="品名编码">
						<el-input v-model="searchForm.goodsCode" placeholder="请输入品名编码" clearable style="width: 200px;" />
					</el-form-item> -->
					<el-form-item label="号型名称">
						<el-input v-model="searchForm.modelName" placeholder="请输入号型名称" clearable style="width: 200px;" />
					</el-form-item>
					<!-- <el-form-item label="号型编码">
						<el-input v-model="searchForm.modelCode" placeholder="请输入号型编码" clearable style="width: 200px;" />
					</el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="handleSearch">查询</el-button>
						<el-button @click="handleReset">重置</el-button>
					</el-form-item>
				</el-form>

				<!-- 表格容器 -->
				<div class="table-wrapper">
					<el-table
						:header-cell-style="{ backgroundColor: '#f5f7fa', color: '#000', fontSize: '16px', fontWeight: '600' }"
						:data="tableData" border style="width: 100%;" height="100%">
						<el-table-column type="index" label="序号" align="center" width="70" />
						<el-table-column prop="goodsName" label="品名名称" align="center" min-width="150" />
						<el-table-column prop="goodsCode" label="品名编码" align="center" min-width="120" />
						<el-table-column prop="modelName" label="号型名称" align="center" min-width="120" />
						<el-table-column prop="modelCode" label="号型编码" align="center" min-width="150" />
						<el-table-column prop="skuCode" label="SKU编码" align="center" min-width="140" />
						<el-table-column prop="jldw" label="计量单位" align="center" min-width="100" />
						<el-table-column prop="boxNum" label="箱数" align="center" min-width="80" />
					</el-table>
				</div>

				<!-- 分页固定在底部 -->
				<div class="pagination-wrapper">
					<el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size"
						:page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { getAction } from '@/api/manage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'

export default defineComponent({
	name: 'BasicData',
	components: {
		Refresh
	},
	setup() {
		// 搜索表单
		const searchForm = reactive({
			goodsCode: '',
			goodsName: '',
			modelName: '',
			modelCode: ''
		})

		// 表格数据
		const tableData = ref([])

		// 同步按钮loading状态
		const syncLoading = ref(false)

		// 分页配置
		const pagination = reactive({
			current: 1,
			size: 10,
			total: 0
		})

		// API URL配置
		const apiUrl = reactive({
			page: '/goodsInfo/goodsInfo/page',
			sync: '/platform/syncGoods'
		})

		// 加载数据
		const loadData = () => {
			const params = {
				pageNo: pagination.current,
				pageSize: pagination.size
			}

			// 添加搜索条件
			if (searchForm.goodsCode) {
				params.goodsCode = searchForm.goodsCode
			}
			if (searchForm.goodsName) {
				params.goodsName = searchForm.goodsName
			}
			if (searchForm.modelName) {
				params.modelName = searchForm.modelName
			}
			if (searchForm.modelCode) {
				params.modelCode = searchForm.modelCode
			}

			getAction(apiUrl.page, params).then(res => {
				// 根据实际返回数据，成功状态码为99200
				if (res.code !== 99200) {
					ElMessage.error(res.message || '数据加载失败')
					return
				}
				tableData.value = res.data?.records || []
				pagination.total = parseInt(res.data?.totalRows) || 0
			}).catch(error => {
				ElMessage.error('数据加载失败')
				console.error('Load data error:', error)
			})
		}

		// 搜索
		const handleSearch = () => {
			pagination.current = 1
			loadData()
		}

		// 重置搜索
		const handleReset = () => {
			searchForm.goodsCode = ''
			searchForm.goodsName = ''
			searchForm.modelName = ''
			searchForm.modelCode = ''
			handleSearch()
		}

		// 分页大小改变
		const handleSizeChange = (val) => {
			pagination.size = val
			pagination.current = 1
			loadData()
		}

		// 页码改变
		const handleCurrentChange = (val) => {
			pagination.current = val
			loadData()
		}

		// 同步商品数据
		const handleSync = () => {
			syncLoading.value = true
			getAction(apiUrl.sync).then(res => {
				if (res.code !== 99200) {
					ElMessage.error(res.message || '同步失败')
					return
				}
				ElMessage.success('同步成功')
				// 同步成功后刷新数据
				loadData()
			}).catch(error => {
				ElMessage.error('同步失败')
				console.error('Sync error:', error)
			}).finally(() => {
				syncLoading.value = false
			})
		}

		// 初始化
		onMounted(() => {
			loadData()
		})

		return {
			searchForm,
			tableData,
			pagination,
			syncLoading,
			loadData,
			handleSearch,
			handleReset,
			handleSizeChange,
			handleCurrentChange,
			handleSync
		}
	}
})
</script>

<style scoped lang="scss">
.basic-data-container {
	height: 100%;

	.card-container {
		height: calc(100vh - 147px);

		:deep(.el-card__body) {
			height: calc(100% - 55px);
			padding: 20px;
			display: flex;
			flex-direction: column;
		}
	}

	.content-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.head-container {
		flex-shrink: 0;
		display: flex;
		margin-bottom: 10px;
	}

	.el-form {
		flex-shrink: 0;
	}

	.table-wrapper {
		flex: 1;
		overflow: hidden;
		min-height: 0;
		margin-bottom: 16px;

		:deep(.el-table) {
			height: 100%;

			.el-table__body-wrapper {
				overflow-y: auto;
			}
		}
	}

	.pagination-wrapper {
		flex-shrink: 0;
		padding: 12px 0 0 0;
		background-color: #fff;
		border-top: 1px solid #ebeef5;
		display: flex;
		justify-content: flex-end;
	}
}

.head-container {
	display: flex;
}

:deep(.el-input-number .el-input__inner) {
	text-align: left;
}

.card-header {
	height: 26px;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Times New Roman', Times, serif;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>