<script setup name="emergencySupplyPoint">
	import Details from './emergencySupplyPointDetails.vue'
	import { list, del } from '@/api/emergencySupport'

	const columns = [
		{
			title: '序号',
			customRender: ({ text, record, index }) => `${index + 1}`
		},
		{
			title: '所属市州',
			dataIndex: 'cityState'
		},
		{
			title: '企业名称',
			dataIndex: 'enterpriseName'
		},
		{
			title: '法人代表',
			dataIndex: 'legalRepresentative'
		},
		{
			title: '应急企业类型',
			dataIndex: 'enterpriseType'
		},
		...(hasPerm(['emergencySupplyPointView', 'emergencySupplyEdit', 'emergencySupplyPointDel'])
			? [
					{
						title: '操作',
						dataIndex: 'action',
						align: 'center',
						width: 200
					}
			  ]
			: [])
	]
	const loadData = (parameter) => {
		return list({ ...parameter, ...searchForm.value })
		// return Promise.resolve([])
	}
	const addShow = ref(false)

	const openForm = () => {
		addShow.value = true
	}
	const editData = ref(null)
	const action = ref(null)
	const view = (data) => {
		action.value = 'view'
		editData.value = data
		addShow.value = true
	}

	const edit = (data) => {
		action.value = 'edit'
		editData.value = data
		addShow.value = true
	}
	const onDel = (data) => {
		del([{ id: data.id }]).then((resp) => {
			console.log(resp)
			refresh()
		})
	}

	const tableRef = ref()
	const refresh = () => {
		tableRef.value.refresh()
	}
	const searchForm = ref({
		enterpriseName: null
	})
	const formRef = ref()
	const search = () => {
		refresh()
	}
	const reset = () => {
		formRef.value.resetFields()
	}
	const add = () => {
		action.value = 'add'
		addShow.value = true
	}
	const chooseShow = ref(false)
	const type = ref(null)
	const handleOk = () => {}
</script>

<template>
	<a-card :bordered="false">
		<s-table ref="tableRef" :columns="columns" :data="loadData" bordered :row-key="(record) => record.id">
			<template #operator class="table-operator">
				<a-space>
					<a-form ref="formRef" :model="searchForm" layout="inline">
						<a-form-item label="应急网点名称" name="enterpriseName">
							<a-input v-model:value="searchForm.enterpriseName" />
						</a-form-item>
					</a-form>

					<a-button type="primary" @click="search">
						<template #icon><plus-outlined /></template>
						查询
					</a-button>
					<a-button @click="reset">
						<template #icon><plus-outlined /></template>
						重置
					</a-button>
					<a-button v-if="hasPerm('emergencySupplyPointAdd')" @click="add">
						<template #icon><plus-outlined /></template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a @click="view(record)" v-if="hasPerm('emergencySupplyPointView')">查看</a>
						<a-divider
							type="vertical"
							v-if="hasPerm(['emergencySupplyPointView', 'emergencySupplyPointEdit'], 'and')"
						/>
						<a @click="edit(record)" v-if="hasPerm('emergencySupplyPointEdit')">编辑</a>
						<a-divider type="vertical" v-if="hasPerm(['emergencySupplyPointDel', 'emergencySupplyPointEdit'], 'and')" />
						<a-popconfirm
							v-if="hasPerm('emergencySupplyPointDel')"
							title="确认删除这条记录?"
							ok-text="Yes"
							cancel-text="No"
							@confirm="onDel(record)"
						>
							<a>删除</a>
						</a-popconfirm>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Details v-model:visible="addShow" :edit-data="editData" :action="action" @on-save="refresh" />
	<!--	<a-modal v-model:visible="chooseShow" title="选择类型" @ok="handleOk">-->
	<!--		<div style="display: flex; justify-content: center; align-items: center">-->
	<!--			<a-select ref="select" style="width: 80%" v-model:value="type">-->
	<!--				<a-select-option value="jack">应急加工企业</a-select-option>-->
	<!--				<a-select-option value="disabled">应急配送企业</a-select-option>-->
	<!--				<a-select-option value="s">应急仓储企业</a-select-option>-->
	<!--			</a-select>-->
	<!--		</div>-->
	<!--	</a-modal>-->
</template>

<style scoped></style>
