<template>
	<el-row :gutter="20">
		<el-col :span="24">
			<el-card shadow="hover">
				<el-form :inline="true" :model="state.page">
					<el-form-item label="企业名称">
						<el-input
							style="width: 150px"
							placeholder="请输入企业名称"
							v-model="state.page.companyName"
						></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="handleQuery"><i class="el-icon-search"></i> 查询</el-button>
						<el-button @click="handleReset"><i class="el-icon-refresh"></i> 重置</el-button>
						<!--						<el-button type="success" @click="handleAdd"><i class="el-icon-plus"></i> 新增</el-button>-->
					</el-form-item>
				</el-form>
			</el-card>
		</el-col>
	</el-row>

	<el-row gutter="20">
		<el-table :data="state.getData" stripe style="width: 100%">
			<!-- 基础信息 -->
			<el-table-column
				prop="id"
				label="企业ID"
				width="80"
				align="center"
				header-align="center"
				sortable
			/>

			<el-table-column
				prop="companyName"
				label="企业名称"
				width="260"
				align="center"
				header-align="center"
			/>
			<el-table-column
				prop="industry"
				label="行业"
				align="center"
				header-align="center"
			/>
			<el-table-column
				prop="registeredCapital"
				label="注册资本"

				align="center"
				header-align="center"
			/>

			<el-table-column
				prop="establishmentDate"
				label="成立日期"
				width="120"
				align="center"
				header-align="center"
			/>

			<el-table-column
				prop="registrationAddres"
				label="注册地址"
				width="300"
				align="center"
				header-align="center"
			/>

			<!-- 操作 -->
			<el-table-column
				fixed="right"
				label="操作"
				align="center"
				header-align="center"
				min-width="220">
				<template #default="scope">
					<el-button  type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination background layout="prev, pager, next" :total="state.page.total" @current-change="handlePageChange"/>
	</el-row>
</template>
<script setup>
import {reactive, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'  // 引入需要的组件

import {useRouter} from 'vue-router'

const router = useRouter()
const state = reactive({
	page: {
		companyName:""
	},
	getData: []
})

// 初始化数据
function init() {
	adminRequest.get(`/items`, {params: state.page}).then((res) => {
		state.getData = res.data.list
		state.page = res.data.page
	})
}

// 组件挂载后加载数据
onMounted(() => {
	init(state.page.current)
})


function handleReset() {
	state.page.job_title = ''
	state.page.city = ''
	handleQuery()
}

// 查询
function handleQuery() {
	state.page.page = 1
	init()
}

// 删除确认逻辑
function handleDelete(id) {
	ElMessageBox.confirm(
		'确认删除该企业？', // 提示信息
		'删除企业', // 弹框标题
		{
			type: 'warning', // 设置为警告类型
			confirmButtonText: '确定',
			cancelButtonText: '取消'
		}
	).then(() => {
		// 用户点击确定后执行删除操作
		adminRequest.delete(`/items/${id}`).then(() => {
			init() // 删除后重新加载数据
			ElMessage.success('删除成功') // 提示删除成功
		})
	}).catch(() => {
		// 用户点击取消后的逻辑
		ElMessage.info('取消删除')
	})
}

// 分页改变时加载数据
function handlePageChange(page) {
	state.page.current = page
	init()
}
</script>
<style scoped>
/* 表头样式 */
.el-table ::v-deep .el-table__header th {
	background-color: #f5f7fa; /* 表头背景色 */
	font-weight: bold; /* 表头字体加粗 */
	color: #303133; /* 表头字体颜色 */
}
</style>
