<script setup name="search">
import { onMounted, reactive, ref } from 'vue'
import request from '@/api/axios.js'
import SubmitBtn from '@com/SubmitBtn.vue'

const queryForm = reactive({
	station: '',
	lineIds: [],
	wtIds: [],
	type: '1',
	st: Date.now() - 30 * 24 * 60 * 60 * 1000,
	et: Date.now(),
})
/**场站 */
const stationList = ref([])
const funGetStation = async () => {
	const res = await request.get("/base/station")
	stationList.value = res.data
}
const funStationChange = (stationId) => {
	if (stationId) {
		funGetWind(stationId)
	} else {
		queryForm.wtIds = []
		windList.value = []
	}
	funSubmit()
}
/**项目 */
const windList = ref([])
const funGetWind = async (stationId) => {
	const res = await request.get("/base/project", {params: { stationId }})
	windList.value = res.data
	queryForm.wtIds = []
}
const funWindChange = (windArr) => {
	if (windArr?.length) {
		funGetLine(windArr)
	} else {
		queryForm.lineIds = []
		lineList.value = []
	}
	funSubmit()
}
/**期次 */
const lineList = ref([])
const funGetLine = async (wtIds) => {
	const res = await request.get("/base/line", {params: { projectId: wtIds.join() }})
	lineList.value = res.data
	queryForm.lineIds = []
}
/**导出 */
const emits = defineEmits(['submit'])
const funSubmit = async () => {
	const query = {
		station: queryForm.station,
		line: queryForm.lineIds.join(),
		project: queryForm.wtIds.join(),
		type: '',
		st: new Date(queryForm.st).formatDate('yyyy-MM-dd'),
		et: new Date(queryForm.et).formatDate('yyyy-MM-dd'),
	}
	emits('submit', query)
}
const funType = (type) => {
	queryForm.type = type
	queryForm.station = ''
	queryForm.lineIds = []
	queryForm.wtIds = []
	const query = {
		station: queryForm.station,
		line: queryForm.lineIds.join(),
		project: queryForm.wtIds.join(),
		type: queryForm.type,
		st: new Date(queryForm.st).formatDate('yyyy-MM-dd'),
		et: new Date(queryForm.et).formatDate('yyyy-MM-dd'),
	}
	emits('submit',query)
}
/**created */
funGetStation()
funType('1')
</script>
<template>
	<div class="pl-[20px] flex items-center h-[80px] relative">
		<div class="absolute top-[-7px] left-[20px] text-[#838383] text-[14px]">操作面板</div>
		<el-form class="" :inline="true" :model="queryForm">
			<el-form-item label="场站" class="!mb-0">
				<el-select v-model="queryForm.station" class="w-[150px]" @change="funStationChange">
					<el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="期次" class="!mb-0">
				<el-select multiple class="w-[150px]" clearable v-model="queryForm.wtIds" @change="funWindChange" collapse-tags>
					<el-option v-for="item in windList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="线路" class="!mb-0">
				<el-select multiple class="w-[150px]" clearable v-model="queryForm.lineIds" @change="funSubmit" collapse-tags>
					<el-option v-for="item in lineList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始时间" class="!mb-0">
				<el-date-picker type="date" class="!w-[150px]" v-model="queryForm.st" @change="funSubmit" ></el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间" class="!mb-0">
				<el-date-picker type="date" class="!w-[150px]" v-model="queryForm.et" @change="funSubmit" ></el-date-picker>
			</el-form-item>
			<el-form-item class="!mb-0">
				<submit-btn v-prevdbclick:5000="funSubmit" desc="执行"></submit-btn>
			</el-form-item>
			<el-form-item class="!mb-0">
				<submit-btn @click="funType('1')" :type="queryForm.type==='1'? 'success': 'default'" desc="风场"></submit-btn>
				<submit-btn @click="funType('2')" :type="queryForm.type==='2'? 'success': 'default'" desc="期次"></submit-btn>
				<submit-btn @click="funType('3')" :type="queryForm.type==='3'? 'success': 'default'" desc="集电线路"></submit-btn>
			</el-form-item>
		</el-form>
	</div>
</template>