<style lang="scss">
	.navigationLog {}
</style>

<template>
	<div class="app-container navigationLog">
		<!-- {{queryParams}} -->
		<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="日期" prop="logBookTime">
				<el-date-picker v-model="queryParams.logBookTime" type="date" value-format="YYYY/MM/DD"
					:disabled-date="disabledDate" placeholder="选择日期" :clearable="false" @change="handleQuery"
					:disabled="editable">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery" :disabled="editable">搜索
				</el-button>
				<el-button icon="Refresh" @click="resetQuery" :disabled="editable">今日</el-button>
				<el-button icon="Download" @click="handleExport" :disabled="editable||loading">打印</el-button>
				<el-button icon="Edit" @click="handleEdit" v-show="!editable" :disable="loading">编辑</el-button>
				<el-button icon="Close" @click="handleCancle" v-show="editable">取消</el-button>
				<el-button icon="Document" @click="handleSave" v-show="editable">保存</el-button>
			</el-form-item>
		</el-form>

		<div v-loading="loading">
			<Table1 ref="table1" v-model:form="form" :rules="rules" :editable="editable"
				:logBookTime="queryParams.logBookTime" class="print" />
		</div>



		<el-dialog v-model="dialogVisible" fullscreen :show-close="false" lock-scroll>
			<Table1 v-model:form="form" :rules="rules" :editable="false" :logBookTime="queryParams.logBookTime"
				class="bg-white" style="color:#000" />
		</el-dialog>

	</div>
</template>

<script setup name="navigationLog">
	import Table1 from "./table1"

	const {
		proxy
	} = getCurrentInstance();
	const form = ref({})

	const loading = ref(true)
	const showSearch = ref(true)
	const editable = ref(false)
	const rules = ref({})
	const logBookTime = ref("")
	const table1 = ref(null)
	const dialogVisible = ref(false)
	const queryParams = ref({
		logBookTime: null,
	})

	onMounted(() => {
		queryParams.value.logBookTime =proxy.$route.query.logBookTime|| proxy.parseTime(new Date(), `{y}/{m}/{d}`)
		loading.value = false;
	})

	const disabledDate = (time) => {
		return time.getTime() > Date.now();
	};

	const getList = () => {

	}

	/** 搜索按钮操作 */
	const handleQuery = function() {
		console.log(proxy.$route)
		proxy.$router.push({
			path:`${proxy.$route.fullPath}`,
			query:{
				logBookTime:queryParams.value.logBookTime
			}
		})
		form.value = {}
		getList();
	}

	function resetQuery() {
		proxy.resetForm("queryRef");
		queryParams.value.logBookTime = proxy.parseTime(new Date(), `{y}/{m}/{d}`)
		handleQuery();
	}


	function handleAdd() {
		form.value = {}
		editable.value = true
	}

	function handleEdit() {
		editable.value = true
	}

	function handleSave() {
		submitForm()
	}

	function handleCancle() {
		proxy.$modal.confirm(`是否取消更改？`).then(() => {
			editable.value = false
			getList();
		})
	}

	function submitForm() {
		proxy.$modal.success("提交成功")
		getList();
		editable.value = false;
	}

	function handleExport() {
		document.body.innerHTML = proxy.$refs.table1.$el.outerHTML
		setTimeout(() => {
			window.print()
			window.location.reload()
		}, 1000)

		// dialogVisible.value = true
		// nextTick(() => {
		// 	setTimeout(() => {
		// 		// window.print()
		// 		dialogVisible.value = false
		// 	}, 2000)
		// })
	}
</script>