<template>
	<div class="pageBox">
		<a-form>
			<a-form-item label="所属市州" name="cityState">
				<a-select allowClear v-model:value="searchData.cityState" placeholder="请选择所属市州">
					<a-select-option v-for="dic in modalData.cityList" :key="dic.id" :value="dic.dictLabel">{{
						dic.dictLabel
					}}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="应急分类" name="emergencyCategory">
				<a-input readonly v-model:value="searchData.emergencyCategory" placeholder="请填写应急分类" />
			</a-form-item>
			<a-form-item label="企业名称" name="enterpriseName">
				<a-input allowClear v-model:value="searchData.enterpriseName" placeholder="请填写企业名称" />
			</a-form-item>
			<a-form-item>
				<a-button type="primary" @click="queryData">查询</a-button>
				<a-upload :file-list="fileList" :before-upload="upFile" @remove="handleRemove">
					<a-button> 导入 </a-button>
				</a-upload>
				<a-button class="add" type="success" @click="btnEven('add')">新增</a-button>
				<a-button class="reset" @click="resetForm">重置</a-button>
			</a-form-item>
		</a-form>
		<a-table
			:size="'mini'"
			:columns="columns"
			:pagination="pagination"
			:data-source="tableData"
			:scroll="{ x: 1500, y: 550 }"
		>
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
				<template v-if="column.key === 'operation'">
					<a-button size="small" type="primary" @click="btnEven('look', record)">查看</a-button>
					<a-button info size="small" type="primary" @click="btnEven('edit', record)">编辑</a-button>
					<a-button danger size="small" type="primary" @click="btnEven('delete', record)">删除</a-button>
				</template>
			</template>
		</a-table>
		<addModule :modalData="modalData" v-if="modalData.type" @closeModel="closeModel" />
	</div>
</template>
<script setup>
	import { Modal, message } from 'ant-design-vue'
	import addModule from './moduleView/yjccqyAdd.vue'
	import { ref, reactive, createVNode, toRefs } from 'vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import upDataApi from '@/api/emergencySupport/importFile.js'
	import api from '@/api/emergencySupport/emergencySupportCenter.js'
	const dicList = JSON.parse(localStorage.getItem('DICT_TYPE_TREE_DATA'))
	// 获取市州

	let modalData = reactive({
		id: '',
		type: '',
		cityList: [],
		visible: false
	})
	let fileList = reactive({})
	const formRef = ref()
	let searchData = reactive({
		size: 5,
		current: 1,
		emergencyCategory: '应急仓储企业'
	})
	let pagination = reactive({
		total: 0,
		current: 1,
		pageSize: searchData.size,
		onChange: pageChange
	})
	let tableData = ref([])
	let { total, pageSize } = toRefs(pagination)
	const columns = [
		{ title: '序号', width: 60, key: 'INDEX', align: 'center' },
		{ title: '所属市州', dataIndex: 'cityState', key: 'cityState', align: 'center' },
		{ title: '企业名称', dataIndex: 'enterpriseName', align: 'center' },
		{ title: '法人代表', width: 160, dataIndex: 'legalRepresentative', align: 'center' },
		{ title: '小麦原粮日库存', width: 160, dataIndex: 'xmylrkc', align: 'center' },
		{ title: '其他原粮日库存', width: 160, dataIndex: 'qtylrkc', align: 'center' },
		{ title: '操作', width: 260, key: 'operation', align: 'center' }
	]
	dicList.map((item) => {
		if (item.dictValue == 'xzqh') {
			item.children.map((el) => {
				if (el.name == '青海省') {
					modalData.cityList = el.children
				}
			})
		}
	})

	onMounted(() => {
		queryData()
	})

	// 查询
	function queryData() {
		api.getYjccqyList(searchData).then((res) => {
			total.value = res.total
			tableData.value = res.records
			pagination.current = res.current
		})
	}

	// 表单按钮事件
	function btnEven(type, data) {
		if (type == 'delete') {
			Modal.confirm({
				title: '提示',
				top: '200px',
				centered: true,
				okText: '确认',
				cancelText: '取消',
				icon: createVNode(ExclamationCircleOutlined),
				content: '确认删除该条数据？',
				onOk() {
					api.deleteData([{ id: data.id }]).then((res) => {
						queryData()
						message.success('删除成功', 3)
					})
				}
			})
		} else {
			modalData.type = type
			modalData.visible = true
			modalData.id = data.id ? data.id : ''
		}
	}
	function upFile(file) {
		let formData = new FormData()
		formData.append('file', file)
		var fileNames = file.name.split('.')
		var fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
		var extList = ['xls']
		if (!extList.find((item) => item == fileType)) {
			message.warning('请上传.xls类型的图片！')
			reject(false)
		}
		upDataApi.uploadFile(formData).then((res) => {
			console.log(111, res)
		})
	}
	// 分页
	function pageChange(page, val) {
		searchData.current = page
		searchData.size = val
		queryData()
	}
	function closeModel(data) {
		modalData.visible = false
		modalData.type = null
		if (data) {
			queryData()
		}
	}
	// 重置
	function resetForm() {
		formRef.value.resetFields()
	}
</script>
<style lang="less" scoped>
	.pageBox {
		.ant-form {
			padding: 15px 30px 0 30px;
			overflow: hidden;
			.ant-form-item {
				width: 22%;
				float: left;
				margin-right: 2%;
				.ant-btn {
					margin-right: 15px;
				}
				.add {
					color: #fff;
					background: #67c23a;
				}
				.reset {
					color: #fff;
					background: #909399;
				}
			}
			.ant-form-item:last-child {
				width: auto;
			}
		}
		.ant-table {
			.ant-table-tbody {
				.ant-table-cell:last-child {
					.ant-btn {
						margin-left: calc((100% - 66px) / 8);
					}
					.ant-btn:nth-child(2) {
						background: #e6a23c;
						border-color: #e6a23c;
					}
				}
			}
		}
	}
</style>
