<template>
	<div class="pricemoitorrecord">
		<a-space class="search">
			<!-- 库存点名称:<a-select
				v-model="SearchForm.siteName"
				style="width: 200px"
				label-in-value
				:options="SiteOptions"
			>
			</a-select> -->
			<div class="silt-title">
				<span style="width: 70px; margin-right: 12px; display: block; line-height: 30px">{{ '考核年度' }}</span>
				<a-select
					v-model:value="value"
					label-in-value
					style="width: 120px"
					:options="options"
					@change="handleChange"
				></a-select>
			</div>
			<div class="btnBox">
				<a-button type="primary" class="primarySele" @click="onSearch"> 查询 </a-button>
				<a-button class="snowy-buttom-left" @click="onReset"> 重置 </a-button>
				<a-button class="snowy-buttom-left" @click="showDrawer('large')"> 新增 </a-button>
			</div>
		</a-space>
		<div class="list">
			<a-table :dataSource="tableData" :pagination="tablePage" :columns="tableColumns" @change="onChangePage">
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.key === 'INDEX'">{{ index + 1 }}</template>
					<template v-else-if="column.key === 'locationSwitch'">
						<a-switch
							v-model:checked="record['locationSwitch']"
							@change="(ev) => onChangeRowPosSwitch(ev, record)"
						></a-switch>
					</template>
					<template v-else-if="column.key === '操作'">
						<a-button type="link" @click="">查看</a-button>
						<a-button type="link" @click="onbj">编辑</a-button>
						<a-button type="link" @click="ondelete">删除</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</div>
	<a-drawer
		v-model:visible="visible"
		class="custom-class"
		size="size"
		width="700px"
		title="新增考核指标管理"
		placement="right"
		@after-visible-change="afterVisibleChange"
	>
		<H1>考核指标管理</H1>
		<a-col>
			<a-form-item label="考核年度">
				<a-input placeholder="" />
			</a-form-item>
			<a-form-item label="考核名称">
				<a-input placeholder="" />
			</a-form-item>
			<a-form-item label="考核开始时间">
				<a-input placeholder="" />
			</a-form-item>
			<a-form-item label="考核结束时间">
				<a-input placeholder="" />
			</a-form-item>
		</a-col>
		<H1>考核等级设置</H1>
		<thead :gutter="24">
			<tr>
				<th>等级名称</th>
				<th>最小分值区间</th>
				<th>最大分值区间</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>优秀</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>良好</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>合格</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>不合格</td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
		<h1>考核指标设置</h1>
		<thead>
			<tr>
				<th>指标编号</th>
				<th>分值</th>
				<th>责任部门</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td>
					<button>查看</button>
					<button>删除</button>
				</td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</tbody>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button v-if="disabled !== true" type="primary" @click="onSubmit">保存</a-button>
		</template>
	</a-drawer>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'

	onMounted(() => {
		onSearch()
	})
	const router = useRouter()
	const size = ref('default')
	const tableColumns = [
		{ title: '序号', key: 'INDEX' },
		{ title: '年度考核', dataIndex: 'name' },
		{ title: '考核名称', dataIndex: 'address' },
		{ title: '考核开始时间', dataIndex: 'createUser' },
		{ title: '考核结束时间', dataIndex: 'createTime' },
		{ title: '操作', key: '操作' }
	]
	const options = ref([
		{
			value: 'jack',
			label: 'Jack'
		},
		{
			value: 'lucy',
			label: 'Lucy '
		}
	])

	const visible = ref(false)
	const afterVisibleChange = (bool) => {
		console.log('visible', bool)
	}
	//打开抽屉
	const showDrawer = () => {
		visible.value = true
	}

	const SiteOptions = []
	const tablePage = reactive({
		siteName: '',
		current: 1,
		size: 20
	})
	const username = ref('')
	const SearchForm = reactive({
		siteName: ''
	})
	const tableData = ref([{ locationSwitch: false }])
	function onSearch() {
		let fd = JSON.parse(JSON.stringify(SearchForm))
		fd.current = tablePage.current
		fd.size = tablePage.size
	}
	function onReset() {
		SearchForm.siteName = ''
		tablePage.current = 1
		onSearch()
	}
	const handleInput = () => {}

	function onViewRow() {
		router.push('/basic.info/pricemoitorrecordDetail')
	}
	function onChangePage(ev) {
		Object.assign(tablePage, ev)
		onSearch()
	}
</script>
<style lang="less" scoped>
	.search {
		padding-top: 20px;
		padding-left: 50px;
		margin-bottom: 32px;
		.btnBox {
			display: inline-block;
			width: 200px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	.silt-title {
		display: flex;
	}
	table {
		width: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		border: 1px solid #dddddd;
		padding: 8px;
		text-align: left;
		text-align: center;
		button {
			border: none;
			margin-left: 5px;
		}
	}
</style>
