<script setup name="prepare">
import searchCop from './components/search.vue'
import excelCop from '@/components/excel.vue'
import treeCop from '@/components/tree.vue'
import tableCop from './components/table.vue'
import { ref,onActivated, onMounted } from 'vue'
import request from '@/api/axios.js'
import {baseURL} from '@/api/axios.js'
import { ElMessage } from 'element-plus'
/**配置参数 */
const treeHeight = ref((window.innerHeight - 270) / 2  + 'px') //tree高度
const excelHeight = ref(window.innerHeight - 260 + 'px') //excel高度
const tableHeight = ref(window.innerHeight - 260 + 'px')
/**excel 开始 */
const excelCheckboxShow = ref(false)
const excelCheckIds = ref([])
const excelList = ref([])
const funExcelChange = async (obj) => { //点击excel项时
	tableShowId.value = obj.id
	tableName.value = obj.name
	let res = null
	tableLoading.value = true
	if (obj.type === 'prepare') {
		res = await request.get('/power/prepare/show', { params: { id: obj.id } })
	} else if (obj.type === 'process') {
		res = await request.get('/power/process/show', { params: { id: obj.id } })
	}
	if(res.code === 200){
		tableColumn.value = res.data.title.map(o => {
			return {
				prop: o.key,
				label: o.des,
				width: o.des==='时间'? 100: 80,
			}
		})
		tableData.value = res.data.data
		tableLoading.value = false
	}else{
		tableLoading.value = false
	}
}
const funExcelCheckChange = ({ checkArr, data }) => {   //bug 
	excelCheckIds.value = checkArr
}
/**prepare tree 开始 */
const treeData = ref([])
const funRepeatMap = (arr, type = 'prepare') => {
	return arr.map(o => {
		if (o.children) {
			const findIndex = o.children.findIndex(p => !!p.type)
			if (findIndex !== -1) {
				o.childs = o.children
				o.children = []
				if(!actTreeNode.value && type === 'fitting'){ //判断当且仅有process获取tree时 赋值
					actTreeNode.value = o
				}
			}
		}
		return {
			...o,
			children: o.children ? funRepeatMap(o.children, type) : []
		}
	})
}
const funGetTree = async () => {
	const res = await request.get("/power/prepare/tree")
	treeData.value = funRepeatMap(res.data)
	excelList.value = []
}
const funCurrentChange = ({ current, currentNode }) => {
	excelCheckboxShow.value = true
	if (current.childs) {
		excelList.value = current.childs.map(o => {
			return {
				id: o.id,
				interval: o.interval,
				path: o.path,
				prepareid: o.prepareid,
				station: o.station,
				time: o.time,
				type: o.type,
				windturbine: o.windturbine,
				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
			}
		})
	} else {
		excelList.value = []
	}
}
const funTreeCheckChange = ({ current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {  //tree change  -> excel change
	funCurrentChange({ current, currentNode: '' })
	const checkIds = []
	if (checkedNodes.length) {
		for (const node of checkedNodes) {
			if (node.childs && node.childs.length) {
				for (const child of node.childs) {
					checkIds.push(child.id)
				}
			}
		}
	}
	excelCheckIds.value = checkIds
}

/**process tree 开始 */
const processTreeData = ref([])
const actTreeNode = ref(null)
const funGetProcessTree = async () => {
	actTreeNode.value = null
	const res = await request.get("/power/process/tree")
	processTreeData.value = funRepeatMap(res.data, 'fitting')
	excelList.value = []
	if(actTreeNode.value){
		funProcessCurrentChange({current: actTreeNode.value, currentNode: null})
		const child = actTreeNode.value.childs[0]
		const obj = {
			id: child.id,
			interval: child.interval,
			path: child.path,
			prepareid: child.prepareid,
			station: child.station,
			time: child.time,
			type: child.type,
			windturbine: child.windturbine,
			name: child.path.substring(child.path.indexOf(child.station + '_') + (child.station + '_').length)
		}
		funExcelChange(obj)
	}
}
const funProcessCurrentChange = ({ current, currentNode }) => {
	excelCheckboxShow.value = false
	if (current.childs) {
		excelList.value = current.childs.map(o => {
			return {
				id: o.id,
				interval: o.interval,
				path: o.path,
				prepareid: o.prepareid,
				station: o.station,
				time: o.time,
				type: o.type,
				windturbine: o.windturbine,
				name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
			}
		})
	} else {
		excelList.value = []
	}
}

/**table 开始 */
const tableShowId = ref('')
const tableColumn = ref([])
const tableLoading = ref(false)
const tableName = ref('')
const tableData = ref([])
const funExport = async () => {
	const a = document.createElement('a')
	a.href = baseURL + '/power/process/download?id=' + tableShowId.value
	a.download = ''
	a.click()
}
/**table 结束 */
/**search 开始 */
const funSubmit = async (query) => {
	if (!excelCheckIds.value.length) {
		ElMessage.error('请勾选要预处理的项')
		return false
	}
	const params = {
		...query,
		ids: excelCheckIds.value.join(',')
	}
	const res = await request.get('/power/process/data', { params: params })
	if (res.code === 200) {
		ElMessage.success(res.msg)
		funGetProcessTree()
	}
}
/**created */
// funGetTree()
// funGetProcessTree()
/**mounted */
onMounted(() => {
	tableHeight.value = window.innerHeight - 260 + 'px'
	excelHeight.value = window.innerHeight - 260 + 'px'
	treeHeight.value = (window.innerHeight - 270) / 2 + 'px'
	window.addEventListener('resize', () => {
		tableHeight.value = window.innerHeight - 260 + 'px'
		excelHeight.value = window.innerHeight - 260 + 'px'
		treeHeight.value = (window.innerHeight - 270) / 2  + 'px'
	})
})
/**activated */
onActivated(async () => {
	await funGetTree()
	funGetProcessTree()
})
</script>
<template>
	<div class="bg-white py-[10px] px-[10px]">
		<search-cop class="mb-[20px]  shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
		</search-cop>
		<div class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[20px] pb-[10px]">
			<div class="text-[14px] absolute top-[-7px] text-[#838383] left-[20px]">数据展示</div>
			<el-row :gutter="10">
				<el-col :span="5">
					<tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true" :height="treeHeight"
						@currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
					<tree-cop class="mt-[10px]" :data="processTreeData" :height="treeHeight"
						@currentChange="funProcessCurrentChange" @refresh="funGetProcessTree"></tree-cop>
				</el-col>
				<el-col :span="3">
					<excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList" :height="excelHeight"
						@excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
				</el-col>
				<el-col :span="16">
					<div>
						<table-cop class="" :data="tableData" :loading="tableLoading" :column="tableColumn"
							:height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport"></table-cop>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>