<template>
    <div class="dataFileProcess" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="dataFileProcessMain">
            <div class="main_top">
                <p class="topPsty">风电数据处理</p>
                <search-cop @submit="funSubmit">
                </search-cop>
            </div>
            <div class="main">
                <div class="treeDataMain">
                    <tree-cop :data="treeData" :height="treeHeight" :show-checkbox="true"
                        @currentChange="funCurrentChange" @refresh="funGetTree" @checkChange="funTreeCheckChange">
                    </tree-cop>
                    <tree-cop :data="processTreeData" :height="treeHeight" @currentChange="funProcessCurrentChange"
                        @refresh="funGetProcessTree">
                    </tree-cop>
                </div>
                <div class="excelDataMain">
                    <excel-cop :data="excelList" :showCheckbox="excelCheckboxShow" :height="excelHeight" :theme="theme"
                        @excelChange="funExcelChange" @checkChange="funExcelCheckChange" :checkIds="excelCheckIds">
                    </excel-cop>
                </div>
                <div class="tableDataMain">
                    <table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading" :theme="theme"
                        :height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport">
                    </table-cop>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup name="prepare">
    import searchCop from './search.vue'
    import excelCop from '@/components/generatingCapacityComponent/excel.vue'
    import treeCop from '@/components/generatingCapacityComponent/tree.vue'
    import tableCop from '@/components/generatingCapacityComponent/table.vue'
    import {
        ref,
        onActivated,
        onMounted,
        watch
    } from 'vue'
    import {
        useStore
    } from 'vuex';
    import httpRequest from '@/utils/request.js'
    // import {
    //     baseURL
    // } from '@/api/axios.js'
    import {
        ElMessage
    } from 'element-plus'
    /**配置参数 */
    const treeHeight = ref((window.innerHeight - 135) / 2 + 'px') //tree高度
    const excelHeight = ref(window.innerHeight - 125 + 'px') //excel高度
    const tableHeight = ref(window.innerHeight - 125 + '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 httpRequest.get('/power/prepare/show', {
                params: {
                    id: obj.id
                }
            })
        } else if (obj.type === 'process') {
            res = await httpRequest.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 : 70,
                }
            })
            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 httpRequest.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.checkedNodes.length) {
            let checkArr = checkedNodes.checkedNodes
            checkArr.forEach(it => {
                if (it.childs && it.childs.length) {
                    it.childs.forEach(iv => {
                        checkIds.push(iv.id)
                    })
                }
            })
        }
        excelCheckIds.value = checkIds
    }

    /**process tree 开始 */
    const processTreeData = ref([])
    const actTreeNode = ref(null)
    const funGetProcessTree = async () => {
        actTreeNode.value = null
        const res = await httpRequest.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)
                }
            })
            if (excelList.value.length > 0) {
                funExcelChange(excelList.value[0])
            }
        } 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.href = '/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 httpRequest.get('/power/process/data', {
            params: params
        })
        if (res.code === 200) {
            ElMessage.success(res.msg)
            funGetProcessTree()
        }
    }
    /**created */
    // funGetTree()
    // funGetProcessTree()
    const theme = ref(null)
    const store = useStore()
    watch(() => store.state.theme, async (newVal, oldVal) => {
        theme.value = newVal
        await funGetTree()
        funGetProcessTree()
    }, {
        deep: true
    })
    /**mounted */
    onMounted(async () => {
        await funGetTree()
        funGetProcessTree()
        theme.value = store.state.theme
        tableHeight.value = window.innerHeight - 125 + 'px'
        excelHeight.value = window.innerHeight - 125 + 'px'
        treeHeight.value = (window.innerHeight - 135) / 2 + 'px'
        window.addEventListener('resize', () => {
            tableHeight.value = window.innerHeight - 125 + 'px'
            excelHeight.value = window.innerHeight - 125 + 'px'
            treeHeight.value = (window.innerHeight - 135) / 2 + 'px'
        })
    })
    /**activated */
    // onActivated(async () => {
    //     await funGetTree()
    //     funGetProcessTree()
    // })
</script>

<style lang="less">
    .dataFileProcess {
        height: 100%;

        .dataFileProcessMain {
            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% - 50px);
                width: 100%;

                .treeDataMain,
                .excelDataMain,
                .tableDataMain {
                    padding: 10px;
                    border-radius: 10px;
                }

                .treeDataMain {
                    width: calc(20% - 20px);

                }

                .excelDataMain {
                    width: calc(13% - 20px);
                }

                .tableDataMain {
                    width: calc(66% - 20px);
                }

            }
        }


    }

    .themeDark {

        .dataFileProcessMain {
            .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;

        .dataFileProcessMain {
            .main_top {

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

            .main {
                background: #E6E8F2;

                .treeDataMain {
                    background: transparent;
                }

                .excelDataMain {
                    background: #F4F6FB;
                }

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

    }
</style>