<template>
    <div class="dataAnalysisAgcAna" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="dataAnalysisAgcAnaMain">
            <div class="main_top">
                <p class="topPsty">AGC曲线偏差分析</p>
                <search-cop @submit="funSubmit">
                </search-cop>
            </div>
            <div class="main">
                <div class="tableDataMain">
                    <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 v-show="activeTab === '2'"
                            :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"
                                @getSelected="funChartSelect" />
                        </div>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="prepare">
    import searchCop from './components/search.vue'
    import tableCop from '@/components/generatingCapacityComponent/table.vue'
    import {
        ElMessage
    } from 'element-plus';
    import {
        onMounted,
        ref,
        onActivated,
        watch
    } from 'vue'
    import {
        useStore
    } from 'vuex';
    import CurrentScatterChart from './components/current-scatter-chart.vue'
    import httpRequest from '@/utils/request.js'
    import dayjs from 'dayjs';
    /**配置参数 */
    const tableHeight = ref(window.innerHeight - 180 + 'px')
    const treeHeight = ref(window.innerHeight - 180 + 'px') //tree高度
    const excelHeight = ref(window.innerHeight - 180 + 'px') //excel高度
    /**excel 开始 */
    const excelList = ref([])
    const funExcelChange = async (obj) => { //点击excel项时
        activeTab.value = '1'
        tableShowId.value = obj.id
        tableName.value = obj.name
        tableLoading.value = true
        const res = await httpRequest.get('/power/prepare/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
        }
    }
    /**tree 开始 */
    const treeData = ref([])
    const funRepeatMap = (arr) => {
        return arr.map(o => {
            if (o.children) {
                const findIndex = o.children.findIndex(p => !!p.type)
                if (findIndex !== -1) {
                    o.childs = o.children
                    o.children = []
                }
            }
            return {
                ...o,
                children: o.children.length ? funRepeatMap(o.children) : []
            }
        })
    }
    const funGetTree = async () => {
        const res = await httpRequest.get("/power/prepare/tree")
        treeData.value = funRepeatMap(res.data)
        excelList.value = []
    }
    const funCurrentChange = ({
        current,
        currentNode
    }) => {
        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 tableName = ref('')
    const tableColumn = ref([])
    const tableLoading = ref(false)
    const tableData = ref([])
    /**tab  */
    const activeTab = ref('1')
    /**chart Data */
    const xAxisData = ref([])
    const chartRef = ref() //chart 的ref
    const seriesData = ref([])
    const dataSet = ref('')
    const funChartSelect = async (batch) => {
        return false
    }
    /**submit */
    const funSubmit = async (params) => {
        activeTab.value = '2'
        tableShowId.value = ''
        tableName.value = 'AGC曲线分析'
        tableLoading.value = true
        const res = await httpRequest.get('/agc/deviate', {
            params: params
        })
        tableColumn.value = [{
                prop: 'ts',
                label: '时间',
                width: 100,
            },
            {
                prop: 'ygsdxz',
                label: '有功设定限值',
                width: 80,
            },
            {
                prop: 'sfyg',
                label: '实发有功',
                width: 80,
            },
            {
                prop: 'llgl',
                label: '理论功率',
                width: 80,
            },
            {
                prop: 'pcsx',
                label: '偏差上限',
                width: 80,
            },
            {
                prop: 'pcxx',
                label: '偏差下限',
                width: 100,
            },
        ]
        const tableArr = []
        const tsArr = []
        const ygsdxz = []
        const sfyg = []
        const llgl = []
        const pcsx = []
        const pcxx = []
        res['有功设定限值'].values.map((o, index) => {
            tsArr.push(dayjs(o.ts).format('YYYY-MM-DD HH:mm:ss'))
            ygsdxz.push(Number(o.value).toFixed(2))
            sfyg.push(Number(res['实发有功'].values[index].value).toFixed(2))
            llgl.push(Number(res['理论功率'].values[index].value).toFixed(2))
            pcsx.push(Number(res['偏差上限'].values[index].value).toFixed(2))
            pcxx.push(Number(res['偏差下限'].values[index].value).toFixed(2))
            tableArr.push({
                ts: dayjs(o.ts).format('YYYY-MM-DD HH:mm:ss'),
                ygsdxz: Number(o.value).toFixed(2),
                sfyg: Number(res['实发有功'].values[index].value).toFixed(2),
                llgl: Number(res['理论功率'].values[index].value).toFixed(2),
                pcsx: Number(res['偏差上限'].values[index].value).toFixed(2),
                pcxx: Number(res['偏差下限'].values[index].value).toFixed(2),
            })
        })
        xAxisData.value = tableArr.map(o => o.ts)
        seriesData.value = [{
                name: "有功设定限值",
                type: "line",
                symbol: "line", //设定为实心点
                symbolSize: 0, //设定实心点的大小
                smooth: false, //这个是把线变成曲线
                data: ygsdxz,
                xAxisIndex: 0,
            },
            {
                name: "实发有功",
                type: "line",
                symbol: "line", //设定为实心点
                symbolSize: 0, //设定实心点的大小
                smooth: false, //这个是把线变成曲线
                data: sfyg,
                xAxisIndex: 0,
            },
            {
                name: "理论功率",
                type: "line",
                symbol: "line", //设定为实心点
                symbolSize: 0, //设定实心点的大小
                smooth: false, //这个是把线变成曲线
                data: llgl,
                xAxisIndex: 0,
            },
            {
                name: "偏差上限",
                type: "line",
                symbol: "line", //设定为实心点
                symbolSize: 0, //设定实心点的大小
                smooth: false, //这个是把线变成曲线
                data: pcsx,
                xAxisIndex: 0,
                lineStyle: {
                    opacity: 0
                },
                areaStyle: {
                    color: '#ccc',
                },
                symbol: 'none'
            },
            {
                name: "偏差下限",
                type: "line",
                symbol: "line", //设定为实心点
                symbolSize: 0, //设定实心点的大小
                smooth: false, //这个是把线变成曲线
                data: pcxx,
                xAxisIndex: 0,
                lineStyle: {
                    opacity: 0
                },
                areaStyle: {
                    color: '#fff',
                    opacity: 1
                },
                symbol: 'none'
            },
        ]
        tableData.value = tableArr
        tableLoading.value = false
        tableShowId.value = '1'


        // if (res.code === 200) {
        // if(res.data.sjgl?.length){
        // 	for(const wtObj of res.data.sjgl){
        // 		seriesData.value.push(
        // 			{
        // 				name: wtObj.obj.windturbine + "\n实际功率",
        // 				type: "line",
        // 				symbol: "line", //设定为实心点
        // 				symbolSize: 0, //设定实心点的大小
        // 				smooth: true, //这个是把线变成曲线
        // 				data: wtObj.sjgl || [],
        // 				xAxisIndex: 0,
        // 			},
        // 		)
        // 		wtData.value.push(wtObj.obj)
        // 	}
        // }
        // }
    }
    /**created */
    // funGetTree()
    const theme = ref(null)
    const echartsTheme = ref('')
    const store = useStore()
    watch(() => store.state.theme, (newVal, oldVal) => {
        theme.value = newVal
        echartsTheme.value = !newVal ? 'dark' : ''
        funSubmit()
    }, {
        deep: true
    })
    /**mounted */
    onMounted(() => {
        theme.value = store.state.theme
        echartsTheme.value = !theme.value ? 'dark' : ''
        tableHeight.value = window.innerHeight - 180 + 'px'
        excelHeight.value = window.innerHeight - 180 + 'px'
        treeHeight.value = window.innerHeight - 180 + 'px'
        window.addEventListener('resize', () => {
            tableHeight.value = window.innerHeight - 180 + 'px'
            excelHeight.value = window.innerHeight - 180 + 'px'
            treeHeight.value = window.innerHeight - 180 + 'px'
        })
    })
    /**activated */
    onActivated(() => {
        // funGetTree()
        // funSubmit()
    })
</script>
<style lang="less" scoped>
    .dataAnalysisAgcAna {
        height: 100%;

        .dataAnalysisAgcAnaMain {
            height: 100%;

            .main_top {
                height: 40px;
                display: flex;
                align-items: center;

                .topPsty {
                    position: relative;
                    top: 5px;
                    padding: 7px 20px;
                    font-size: 12px;
                    font-weight: 600;
                    margin-left: 10px;
                    border-radius: 3px;
                }
            }

            .main {
                display: flex;
                justify-content: space-between;
                // width: calc(100% - 40px);
                width: 100%;

                .tableDataMain {
                    padding: 10px;
                    border-radius: 10px;
                    width: calc(100% - 20px);
                    position: relative;

                    .butten_com {
                        position: absolute;
                        right: 20px;
                        z-index: 111111;
                    }
                }

            }
        }


    }

    .themeDark {

        .dataAnalysisAgcAnaMain {
            .main_top {

                .topPsty {
                    color: #1C99FF;
                    background: #1E2126;
                }
            }

            .main {
                background: #13171e;

                .treeDataMain {
                    background: transparent;
                }

                .excelDataMain {
                    background: #313233;
                }

                .tableDataMain {
                    margin-top: 5px;
                    background: #212223;
                }
            }

        }

    }

    .themeLight {
        padding: 0;

        .dataAnalysisAgcAnaMain {
            .main_top {

                .topPsty {
                    color: #2778FF;
                    background: #FFFFFF;
                }
            }

            .main {
                background: #E6E8F2;

                .treeDataMain {
                    background: transparent;
                }

                .excelDataMain {
                    background: #F4F6FB;
                }

                .tableDataMain {
                    background: #fff;
                    margin-top: 5px;
                }
            }
        }

    }
</style>