<template>
	<div>
		<div>
			<el-input v-model="text" :rows="3" type="textarea" />
			<el-divider />
		</div>

		<div>
			<el-text class="mx-1" size="large">组件方式-配置</el-text>
			<SearchBox ref="searchBarRef" formName="search" 
			:formData="query" 
			@showPopupUser="showPop" 
			showResetButton @reset="reset"></SearchBox>
			<el-divider />
		</div>


		<div>
			<el-text class="mx-1" size="large">组件方式-高代码</el-text>
			<SearchBox ref="searchBarRef" :formItem="formItem" 
			:formData="query" @showPop="showPop"></SearchBox>
			<el-divider />
		</div>


		<div>
			<el-text class="mx-1" size="large">代码方式-单行-小于4个查询条件-不要重置、高级查询</el-text>
			<el-card :body-style="cardBodyStyle">
				<el-form :model="query" label-width="auto" label-position="right">
					<el-row :gutter="10">
						<el-col :span="5">
							<el-form-item label="姓名" style="margin-bottom: 0px; ">
								<el-input v-model="query.name" clearable placeholder="请输入" style="width:100%; ">
									<template #append>
										<el-button @click="showPop">
											<el-icon>
												<Search />
											</el-icon></el-button>
									</template>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="合同类型" style="margin-bottom: 0px; ">
								<el-select v-model="query.contractType" clearable style="width:100%; ">
									<el-option v-for="(option,index) in options" :key="index" :value="option.dicCode"
										:label="option.dicName" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>

			</el-card>


			<el-divider />
		</div>






		<div>
			<el-text class="mx-1" size="large">代码方式-多行-大于4个查询条件-需要重置、高级查询</el-text>
			<el-card :body-style="cardBodyStyle">
				<el-form :model="query" label-width="auto" label-position="right">
					<el-row :gutter="10" style="margin-bottom: 5px;">
						<el-col :span="5">
							<el-form-item label="姓名" style="margin-bottom: 0px; ">
								<el-input v-model="query.name" clearable placeholder="请输入" style="width:100%; ">
									<template #append>
										<el-button @click="showPop">
											<el-icon>
												<Search />
											</el-icon></el-button>
									</template>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="年龄" style="margin-bottom: 0px; ">
								<el-input v-model="query.age" clearable placeholder="请输入" style="width:100%; ">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="性别" style="margin-bottom: 0px; ">
								<el-select v-model="query.sex" clearable style="width:100%; ">
									<el-option v-for="(option,index) in dicList['SEX']" :key="index"
										:value="option.dicCode" :label="option.dicName" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="合同类型" style="margin-bottom: 0px; ">
								<el-select v-model="query.contractType" clearable style="width:100%; ">
									<el-option v-for="(option,index) in dicList['CONTRACT_TYPE']" :key="index"
										:value="option.dicCode" :label="option.dicName" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item style="margin-bottom: 0px;margin-top: 5px;margin-left: 10px; width: 100%;"
								label="">
								<el-button type="primary" link @click="reset">重置</el-button>
								<el-button type="primary" link @click="show">高级查询
									<el-icon v-if="showAdv">
										<ArrowUp />
									</el-icon>
									<el-icon v-else>
										<ArrowDown />
									</el-icon>
								</el-button>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row v-if="showAdv" :gutter="10" style="margin-bottom: 5px;">
						<el-col :span="5">
							<el-form-item label="性别" style="margin-bottom: 0px; ">
								<el-radio-group v-model="query.sex" style="width:100%; ">
									<el-radio v-for="(option,i) in dicList['SEX']" :key="i"
										:label="option.dicName">{{option.dicCode}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="生日" style="margin-bottom: 0px; ">
								<el-date-picker v-model="query.birthDate" type="date" clearable
									value-format="YYYY-MM-DD" format="YYYY-MM-DD" style="width:100%; " />
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="添加日期" style="margin-bottom: 0px; ">
								<el-date-picker v-model="query.addDate" type="daterange" clearable range-separator="至"
									start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
									format="YYYY-MM-DD" style="width:100%; "></el-date-picker>
							</el-form-item>
						</el-col> 
					</el-row>

					<el-row v-if="showAdv" :gutter="10" style="margin-bottom: 5px;">
						<el-col :span="10">
							<el-form-item label="添加时间" style="margin-bottom: 0px; ">
								<el-date-picker v-model="query.addTime"
									type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
									value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
									style="width: 350px; " />
							</el-form-item>
						</el-col>
						 
					</el-row>


				</el-form>

			</el-card>


			<el-divider />
		</div>





		<PopupUser ref="PopupUserRef" @receiveFromChild="selectUser"></PopupUser>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onActivated,
		onMounted,
		getCurrentInstance,
		computed
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	//vue3组件缓存   onActivated用于不缓存的组件
	onActivated(() => {
		// query.value.name = 'lee'
	})

	onMounted(() => {
		getContractType()
		getDicList()
	})


	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)

	const text = computed(() => JSON.stringify(query.value))
	import SearchBox from '@/components/SearchBox.vue';
	const searchBarRef = ref(null)
	const formItem = ref([{
			prop: 'name',
			type: 'input',
			label: '姓名',
			searchButton: true,
			searchCallback: 'showPop'
		},
		{
			prop: 'age',
			type: 'input',
			label: '年龄',
		},
		{
			prop: 'sex',
			type: 'radio',
			label: '性别',
			options: [{
					label: '男',
					value: '1'
				},
				{
					label: '女',
					value: '0'
				},
				{
					label: '未知',
					value: '2'
				}
			]
		},
		{
			prop: 'birthDate',
			type: 'date',
			label: '生日'
		},
		{
			prop: 'type',
			type: 'select',
			label: '类型',
			optionLabel: 'key',
			optionValue: 'val',
			options: [{
					key: '职工',
					val: '1'
				},
				{
					key: '经理',
					val: '2'
				},
				{
					key: '外协',
					val: '0'
				}
			]
		},
		{
			prop: 'contractType',
			type: 'select',
			label: '合同类型',
			dicType: 'CONTRACT_TYPE',
		}, {
			prop: 'contractFlag',
			type: 'radio',
			label: '合同标记',
			dicType: 'CONTRACT_FLAG',
		},
		{
			prop: 'contractType1',
			type: 'select',
			label: '合同类型',
			url: 'framework/Common/querySelector?type=CONTRACT_TYPE',
			param: {},
			optionLabel: 'dicName',
			optionValue: 'dicCode',
		},
		{
			prop: 'addDate',
			type: 'daterange',
			label: '添加日期'
		},
		{
			prop: 'addTime',
			type: 'datetimerange',
			label: '添加时间'
		},



	])

	const searchForm = (val) => {
		query.value = searchBarRef.value.form
		console.log(JSON.stringify(query.value))
	}

	/**
	 *   查询
	 */

	const query = ref({})
	// const query = ref( {{
	// 		name: '',
	// 		age: '',
	// 		sex: '',
	// 		birthDate: '',
	// 		addTime: ['', ''],
	// 		addDate: ['', ''],
	// 		contractType: '',
	// 	}})




	const tableData = ref([])

	const handleSearch = (val) => {
		query.value = searchBarRef.value.form
		console.log(JSON.stringify(query.value))
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		var url = 'exp/Search/structurePage'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询
	 */
	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		current.value = val
		getTableData()
	}
	/**
	 * 分页
	 */

	import PopupUser from '@/components/PopupUser.vue'
	const PopupUserRef = ref(null)
	const showPop = () => {
		PopupUserRef.value.open()
	}
	const selectUser = (user) => {
		query.value.name = user.userDesc
	}


	const reset = () => {
		Object.keys(query.value).map(key => {
			query.value[key] = ''
		})
	}


	const options = ref([])
	const getContractType = () => {
		var url = 'framework/Common/querySelector'
		var param = {
			type: 'CONTRACT_TYPE'
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				options.value = response.data.data
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}


	const dicList = ref([])
	const getDicList = () => {
		var url = 'framework/Common/querySelectorList'
		var param = {
			type: JSON.stringify(['SEX', 'CONTRACT_TYPE'])
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') { 
				console.log(JSON.stringify(response.data.data))
				dicList.value = response.data.data 
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}




	const showAdv = ref(false)
	const show = () => {
		showAdv.value = !showAdv.value
	}
</script>

<style>
</style>