<script setup name="prepare">
import excelCop from '@/components/excel.vue'
import treeCop from '@/components/tree.vue'
// import tableCop from './components/table.vue'
import { ref, nextTick, onActivated, onMounted, reactive } from 'vue'
import request from '@/api/axios.js'
import {ElMessage} from 'element-plus'
import CurrentScatterChart from './components/current-scatter-chart.vue'
/**配置参数 */
const treeHeight = ref(window.innerHeight - 150 + 'px') //tree高度
const excelHeight = ref(window.innerHeight - 150 + 'px') //excel高度
const tableHeight = ref(window.innerHeight - 150 + 'px')

/**submit */
const funSubmit = async () => {
	if (!excelCheckIds.value.length) {
		ElMessage.error('请勾选要执行的项')
		return false
	}
	// tableShowId.value = '1'
	// tableName.value = obj.name

	// let res = null
	let chartRes = {
		scatterhs: [[]],
		scatterls: [[]],
		sjgl: [[]],
		llgl: [[]],
		cpz: [[]]
	}
	let chartResponse = null
	// tableLoading.value = true
	// res = await request.get('/datas', { params: { filename: obj.id } })
	chartResponse = await request.post('/analysis/powerbeam', { filename: excelCheckIds.value.join() })
	// if(res.code === 200){
	// 	tableColumn.value = res.data.title.map(o => {
	// 		return {
	// 			prop: o.key,
	// 			width: o.des==='时间'? 100: 80,
	// 			label: o.des,
	// 		}
	// 	})
	// 	tableData.value = res.data.data
	// 	tableLoading.value = false
	// }else{
	// 	tableLoading.value = false
	// }

	if (chartResponse && chartResponse.code === 200) {
		// activeTab.value = '2'
		nextTick(() => {
			chartRes = chartResponse.data
			seriesData.value = [
				{
					name: "拟合功率",
					type: "line",
					symbol: "line", //设定为实心点
					symbolSize: 0, //设定实心点的大小
					smooth: true, //这个是把线变成曲线
					data: chartRes.curve,
					xAxisIndex: 0,
				},
				{
					type: 'effectScatter',
					showEffectOn: "emphasis",
					rippleEffect: {
						scale: 1
					},
					name: '数据散点',
					data: chartRes.scatter,
					xAxisIndex: 0,
					yAxisIndex: 0,
				},
			]
		})
	}
}
/**excel 开始 */
const excelCheckIds = ref([])
const funExcelChange = async (obj) => { //点击excel项时
	return false
}
const funExcelCheckChange = ({ checkArr, data }) => {   //bug 
	excelCheckIds.value = checkArr
	funSubmit()
}
/**excel fitData */
const excelFitList = ref([])
/**prepare tree 开始 */
const actTreeNode = ref(null) //当前激活的treeNode
const funRepeatMap = (arr, type='prepare') => {
	return arr.map(o => {
		if (o.children) {
			const findIndex = o.children.findIndex(p => !!p.path)
			if (findIndex !== -1) {
				o.childs = o.children
				o.children = []
				if(!actTreeNode.value && type === 'process'){ //判断当且仅有process获取tree时 赋值
					actTreeNode.value = o
				}
			}
		}
		return {
			...o,
			children: o.children ? funRepeatMap(o.children, type) : []
		}
	})
}
/**process tree 开始 */
const processTreeData = ref([])
const funGetProcessTree = async (flag = true) => { //flag控制是否获取tree的第一项 true为可获取
	actTreeNode.value = null
	const res = await request.get("/allfilelist")
	excelFitList.value = []
	processTreeData.value = funRepeatMap(res.data, 'process') //flag控制对actTreeNode赋值
	if(actTreeNode.value){
		funProcessCurrentChange({current: actTreeNode.value, currentNode: null})
		// const child = actTreeNode.value.childs[0]
		// const obj = {
		// 	id: child.path,
		// 	interval: child.interval,
		// 	path: child.path,
		// 	station: child.station,
		// 	time: child.time,
		// 	type: child.type,
		// 	windturbine: child.windturbine,
		// 	name: child.path
		// }
		// funExcelChange(obj)
	}
}
const funProcessCurrentChange = ({ current, currentNode }) => {
	if (current.childs) {
		excelFitList.value = current.childs.map(o => {
			return {
				id: o.path,
				interval: o.interval,
				path: o.path,
				station: o.station,
				time: o.time,
				type: o.type,
				windturbine: o.windturbine,
				name: o.path
			}
		})
	} else {
		excelFitList.value = []
	}
}
const funTreeCheckChange = ({ current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {  //tree change  -> excel change
	funProcessCurrentChange({ 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.path)
				}
			}
		}
	}
	excelCheckIds.value = checkIds
	funSubmit()
}

/**table 开始 */
const tableShowId = ref('')
const tableColumn = ref([])
const tableLoading = ref(false)
const tableName = ref('')
const tableData = ref([])
/**table 结束 */
/**chart Data */
const xAxisData = ref([])
const chartRef = ref() //chart 的ref
const seriesData = ref([])
const dataSet = ref('')
/**tab  */
const activeTab = ref('1')
/**created */
// funGetTree()
// funGetProcessTree()
/**mounted */
onMounted(() => {
	tableHeight.value = window.innerHeight - 150 + 'px'
	excelHeight.value =(window.innerHeight - 150) + 'px'
	treeHeight.value = (window.innerHeight - 150) + 'px'
	window.addEventListener('resize', () => {
		tableHeight.value = window.innerHeight - 150 + 'px'
		excelHeight.value = (window.innerHeight - 150) + 'px'
		treeHeight.value = (window.innerHeight - 150)  + 'px'
	})
	/**test */
	// funExcelChange({
	// 	id: 1,
	// 	name: 'excel',
	// 	type: 'fitting',
	// })
})
/**activated */
onActivated(() => {
	funGetProcessTree()
})
</script>
<template>
	<div class="bg-white py-[10px] px-[10px]">
		<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="processTreeData" type="light" :height="treeHeight" @checkChange="funTreeCheckChange"
            :show-checkbox="true" @currentChange="funProcessCurrentChange" @refresh="funGetProcessTree"></tree-cop>
				</el-col>
				<el-col :span="3">
					<excel-cop :data="excelFitList" :checkIds="excelCheckIds" :showCheckbox="true" :height="excelHeight" @excelChange="funExcelChange" @checkChange="funExcelCheckChange">
					</excel-cop>
				</el-col>
				<el-col :span="16">
					<div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
						<!-- <el-tabs v-model="activeTab"> -->
							<!-- <el-tab-pane label="表格数据" name="1">
							</el-tab-pane>
							<el-tab-pane label="图表展示" name="2">
							</el-tab-pane>
							<table-cop v-show="activeTab === '1'" :data="tableData" :loading="tableLoading" :column="tableColumn"
								:height="tableHeight" :tableId="tableShowId" :tableName="tableName"></table-cop> -->
							<div
								:style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
								class="p-[10px]">
								<CurrentScatterChart ref="chartRef" width="100%" :height="`calc( ${tableHeight} - 20px )`" :chartTitle="''"
									:xAxisData="xAxisData" :yAxisData="{ splitLine: { show: false } }" :seriesData="seriesData"
									:showLegend="true" :brushSelected="false" :dataSet="dataSet"/>
							</div>
						<!-- </el-tabs> -->
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>