<template>
    <div class=" analyze-apf" :style="{ height: pageHeight.height }" v-loading="loading">
        <APFTree @node-click="nodeClick" :height="60" @init="nodeClick" @deviceTypeChange="deviceTypeChange"></APFTree>
        <div class="analyze-apf-right" v-if="formInline.devId">
            <div ref="headerRef">
                <TableHeader :showSearch="false" ref="tableHeaderRef" @selectChange="selectChange"
                 >
                    <template v-slot:select>
                        <el-form-item label="时间">
                            <DatePicker ref="datePickerRef"    :timeKeyList="['3', '4', '5']"></DatePicker>
                        </el-form-item>
                        <el-form-item label="统计指标">
                            <el-select style="width: 200px" v-model.trim="formInline.statisticalId" filterable
                                @change="frequencyFlag" placeholder="请选择">
                                <el-option v-for="item in zblist" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="谐波次数" v-show="frequencyShow">
                            <el-select v-model.trim="formInline.frequency" filterable placeholder="请选择"
                                style="width: 100px">
                                <el-option v-for="item in 49" :key="item + 1" :label="item + 1"
                                    :value="item + 1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="值类型">
                            <el-select v-model.trim="formInline.valueType" filterable placeholder="请选择">
                                <el-option v-for="item in typelist" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template v-slot:operation>
                        <el-button type="primary" @click="search" icon="el-icon-Search">查询</el-button>
                    </template>
                </TableHeader>
            </div>

            <el-empty description="暂无数据" v-if="!echartsData" style="flex: 1"></el-empty>
            <template v-else>
                <div :style="echartHeight">
                    <MyEchart :options="echartsData" />
                </div>
            </template>
        </div>
        <el-empty v-else :style="echartHeight" description="请选择设备" class="analyze-apf-right" />
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
// import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import APFTree from '@/components/tree/govern/APFTree.vue'
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDevCapacity } from '@/api/cs-device-boot/capacity'
import { queryCommonStatisticalByTime } from '@/api/cs-harmonic-boot/stable'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
import TableHeader from '@/components/table/header/index.vue'
const timeControl = ref(false)


const tableHeaderRef = ref()
const headerRef = ref()
const pageHeight = mainHeight(80)
const echartHeight = ref(mainHeight(130))
const loading = ref(false)
const echartsData = ref<any>(null)
const datePickerRef = ref()
const formInline = reactive({
    statisticalId: '',
    valueType: '',
    startTime: '',
    endTime: '',
    devId: '',
    frequency: ''
})
const dataLists = ref<any[]>([])
const timeFlag = ref(true)
const frequencyShow = ref(false)
const devCapacity = ref(0)
const flag = ref(false)
const typelist = [
    {
        label: '平均值',
        value: 'avg'
    },
    {
        label: '最大值',
        value: 'max'
    },
    {
        label: '最小值',
        value: 'min'
    },
    {
        label: 'CP95值',
        value: 'cp95'
    }
]
const zblist = ref<any[]>([])

const init = () => {
    return new Promise((resolve, reject) => {
        queryByCode('Web_Apf').then(res => {
            queryCsDictTree(res.data?.id).then(res => {
                zblist.value = res.data.map((item: any) => {
                    return {
                        value: item.id,
                        label: item.name,
                        ...item
                    }
                })
                formInline.statisticalId = zblist.value[0]?.value
                formInline.valueType = typelist[0].value
                resolve(null)
            })
        })
    })
}
const exportSubjectName = ref('')
const deviceTypeChange = (val: any, obj: any) => {
    flag.value = true
    nodeClick(obj)
}
const nodeClick = async (e: anyObj) => {
    if ((e.level == 2 || e.level == 3)) {
        exportSubjectName.value = e.name || ''
        formInline.devId = e.id
        loading.value = true
        if (zblist.value.length === 0) {
            await init()
        }
        // getDevCapacity(formInline.devId)
        //     .then(res => {
        //         devCapacity.value = res.data

                search()
            // })
            // .catch(() => {
            //     loading.value = false
            // })
    }
}
const lineStyle = [
    { type: 'solid',  },
    { type: 'dashed',  },
    { type: 'dashed',  }
]
const search = () => {
    if (timeFlag.value) {
        datePickerRef.value && datePickerRef.value.setInterval(5)
        timeFlag.value = false
    }
    loading.value = true
    formInline.startTime = datePickerRef.value.timeValue[0]
    formInline.endTime = datePickerRef.value.timeValue[1]
    if (!frequencyShow.value) {
        formInline.frequency = ''
    }

    queryCommonStatisticalByTime(formInline)
        .then(({ data }: { data: any[] }) => {
            dataLists.value = data
            setEchart()
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}
const setEchart = () => {
    loading.value = true
    let data = JSON.parse(JSON.stringify(dataLists.value))
    if (data.length) {
        let list = processingOfData(data, 'unit')

        echartsData.value = {}
        let legend: any[] = []
        let xAxis: any[] = []
        let yAxis: any[] = []
        let series: any[] = []
        let color: any[] = []
        let title = ''
        data.forEach(item => {
            if (!xAxis.includes(item.time)) {
                xAxis.push(item.time)
            }
            // if (!legend.includes(item.anotherName)) {
            //     legend.push(item.anotherName)
            // }
        })
        let units = Object.keys(list)
        // console.log('🚀 ~ .then ~ units:', units)
        for (let unit in list) {
            let [min, max] = yMethod(list[unit].map((item: any) => item.statisticalData))
            yAxis.push({
                name: unit == 'null' ? '' : unit,
                type: 'value',
                // max: 10,
                min: min,
                max: max,
                // splitNumber: 5,
                // minInterval: 1,

                axisLine: {
                    show: true,
                    //symbol: ["none", "arrow"],
                    lineStyle: {
                        color: '#333'
                    }
                }
            })
            // processingOfData(list[unit], 'anotherName')
            let anotherList = processingOfData(list[unit], 'anotherName')
            for (let k in anotherList) {
                title = k
                let lineName = lineStyle[Object.keys(anotherList).indexOf(k)]
                let phaseList = processingOfData(anotherList[k], 'phase')
                for (let j in phaseList) {
                    color.push(j == 'A' ? '#DAA520' : j == 'B' ? '#2E8B57' : j == 'C' ? '#A52a2a' : '#0000CC')
                    legend.push(
                        j == 'T' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j
                    )
                    series.push({
                        name: j == 'T' ? k : j == 'A' ? `A相_${k}` : j == 'B' ? `B相_${k}` : j == 'C' ? `C相_${k}` : j,
                        symbol: 'none',
                        smooth: true,
                        type: 'line',

                        // data: phaseList[j].map(item => [
                        //     item.time,
                        //     Math.floor(item.statisticalData * 100) / 100,
                        //     unit,
                        //     lineName.type
                        // ]),
                        data: timeControl.value
                            ? completeTimeSeries(
                                phaseList[j].map(item => [
                                    item.time,
                                    Math.floor(item.statisticalData * 100) / 100,
                                    unit,
                                    lineName.type
                                ])
                            )
                            : phaseList[j].map(item => [
                                item.time,
                                Math.floor(item.statisticalData * 100) / 100,
                                unit,
                                lineName.type
                            ]),

                        lineStyle: lineName,
                        yAxisIndex: unit.indexOf(units)
                    })
                }
            }
        }

        echartsData.value = {
            exportFileName: {
                subject: exportSubjectName.value,
                feature: zblist.value.filter(item => item.id == formInline.statisticalId)[0]?.name || 'APF数据',
                date: formInline.endTime || formInline.startTime
            },
            title: {
                text: zblist.value.filter(item => item.id == formInline.statisticalId)[0].name
            },
            tooltip: {
                axisPointer: {
                    type: 'cross',
                    label: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    opacity: 0.35,
                    fontSize: 14
                },
                backgroundColor: 'rgba(0,0,0,0.55)',
                borderWidth: 0,
                formatter(params: any) {
                    const xname = params[0].value[0]
                    let str = `${xname}<br>`
                    params.forEach((el: any, index: any) => {
                        let marker = ''
                        if (el.value[3] == 'dashed') {
                            for (let i = 0; i < 3; i++) {
                                marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
                            }
                        } else {
                            marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
                        }

                        str += `${marker}${el.seriesName.split('(')[0]}：${el.value[1] != null ? el.value[1] + ' ' + (el.value[2] == 'null' ? '' : el.value[2]) : '-'
                            }<br>`
                    })
                    return str
                }
            },
            legend: {
                itemWidth: 20,
                itemHeight: 20,
                itemStyle: { opacity: 0 }, //去圆点
                type: 'scroll', // 开启滚动分页
                // top: 25
                // data: legend
            },
            grid: {
                left: '20px',
                right: '40px',
                bottom: '50px',
                top: '80px',
                containLabel: true
            },
            toolbox: {
                featureProps: {
                    myTool1: {
                        show: true,
                        title: '下载csv',
                        icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
                        onclick: () => {
                            exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
                        }
                    },
                    myTool2: {
                        show: true,
                        title: timeControl.value ? '关闭缺失数据' : '缺失数据',
                        icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
                        iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
                        onclick: () => {
                            setTimeControl()
                        }
                    }
                }
            },
            color: color,
            xAxis: {
                name: '',
                type: 'time',
                axisLabel: {
                    formatter: {
                        day: '{MM}-{dd}',
                        month: '{MM}',
                        year: '{yyyy}'
                    }
                }

                // boundaryGap: false,
                // data: xAxis,
                // axisLabel: {
                //     formatter: function (value: string) {
                //         return value.split(' ').join('\n')
                //     }
                // },
                // axisLine: {
                //     show: true,
                //     // symbol: ["none", "arrow"],
                //     lineStyle: {
                //         color: '#333'
                //     }
                // }
            },
            yAxis: yAxis,
            //  [
            //     {
            //         name: '畸变率:(%)',
            //         type: 'value',
            //         // max: 10,
            //         min: min1,
            //         max: max1,
            //         splitNumber: 5,
            //         minInterval: 1,

            //         axisLine: {
            //             show: true,
            //             //symbol: ["none", "arrow"],
            //             lineStyle: {
            //                 color: '#333'
            //             }
            //         }
            //     },
            //     {
            //         name: '电流:(A)',
            //         type: 'value',
            //         min: min,
            //         max: max,
            //         splitNumber: 5,
            //         minInterval: 1,
            //         splitLine: {
            //             show: false
            //         },
            //         axisLine: {
            //             show: true,
            //             //symbol: ["none", "arrow"],
            //             lineStyle: {
            //                 color: '#333'
            //             }
            //         }
            //     }
            // ],
            options: {
                series: series
            }
        }
    } else {
        echartsData.value = null
    }
    loading.value = false
}
const setTimeControl = () => {
    timeControl.value = !timeControl.value
    setEchart()
}

const processingOfData = (data: any, type: string) => {
    let groupedData: any = {}

    data.forEach(item => {
        if (!groupedData[item[type]]) {
            groupedData[item[type]] = []
        }
        groupedData[item[type]].push(item)
    })
    return groupedData
}
const frequencyFlag = () => {
    let name = zblist.value.filter(item => item.id == formInline.statisticalId)[0].name
    if (name.includes('含有率') || name.includes('幅值')) {
        frequencyShow.value = true
        formInline.frequency = 2
    } else {
        frequencyShow.value = false
    }
    tableHeaderRef.value && tableHeaderRef.value?.computedSearchRow()
}
const selectChange = (flag: boolean) => {
    setTimeout(() => {
        echartHeight.value = mainHeight(23 + headerRef.value.offsetHeight)
    }, 100)
}
</script>

<style lang="scss">
.analyze-apf {
    display: flex;

    &-right {
        height: 100%;
        overflow: hidden;
        flex: 1;
        // padding: 10px 10px 10px 0;
        display: flex;
        flex-direction: column;
    }
}
</style>
<style lang="scss" scoped>
.el-select {
    min-width: 100px;
}
</style>
