<template>
    <div class="steady-detail">
        <!-- <el-descriptions title="" border direction="vertical">
            <el-descriptions-item label="设备名称">121212</el-descriptions-item>
            <el-descriptions-item label="设备编号">18100000000</el-descriptions-item>
            <el-descriptions-item label="所属项目">苏州市</el-descriptions-item>
        </el-descriptions> -->
        <JiBianLvLiShi :queryByCodeId="xiebBoCode" :devId="devId"  v-if="!loading" />

<!--        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">-->
<!--&lt;!&ndash;            <el-tab-pane lazy label="拓扑图" name="one">&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="content">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-image&ndash;&gt;-->
<!--&lt;!&ndash;                        fit="contain"&ndash;&gt;-->
<!--&lt;!&ndash;                        style="height: calc(100% - 50px)"&ndash;&gt;-->
<!--&lt;!&ndash;                        :src="topologyDiagramFilePath"&ndash;&gt;-->
<!--&lt;!&ndash;                        :preview-src-list="[topologyDiagramFilePath]"&ndash;&gt;-->
<!--&lt;!&ndash;                    >&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-image>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-tab-pane lazy label="实时畸变率" name="two">&ndash;&gt;-->
<!--&lt;!&ndash;                <JiBianLvShiShi :queryByCodeId="xiebBoCode" :devId="devId" v-if="activeName == 'two'" />&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-tab-pane lazy label="历史畸变率" name="three">&ndash;&gt;-->
<!--&lt;!&ndash;                <JiBianLvLiShi :queryByCodeId="xiebBoCode" :devId="devId" v-if="activeName == 'three'" />&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-tab-pane lazy label="实时谐波含量" name="four">&ndash;&gt;-->
<!--&lt;!&ndash;                <XieBoHanLiangShiShi :queryByCodeId="jiBianLvCode" :devId="devId" v-if="activeName == 'four'" />&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-tab-pane lazy label="历史谐波含量" name="five">&ndash;&gt;-->
<!--&lt;!&ndash;                <XieBoHanLiangLiShi :queryByCodeId="jiBianLvCode" :devId="devId" v-if="activeName == 'five'" />&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--        </el-tabs>-->
    </div>
</template>
<script>
import { queryFisrtThdContent, queryTopologyDiagram } from '@/api/app/steady'
import { queryByCode } from '@/api/app/setting'
import JiBianLvLiShi from './comp/jiBianLvLiShi'
import JiBianLvShiShi from './comp/jiBianLvShiShi'
import XieBoHanLiangLiShi from './comp/xieBoHanLiangLiShi'
import XieBoHanLiangShiShi from './comp/xieBoHanLiangShiShi'
export default {
    components: {
        JiBianLvShiShi,
        JiBianLvLiShi,
        XieBoHanLiangLiShi,
        XieBoHanLiangShiShi,
    },
    data() {
        return {
            activeName: 'one',
            tableData: [],
            实时谐波含量数据: [],
            topologyDiagramFilePath: '',
            xiebBoCode: '',
            jiBianLvCode: '',
            loading:true
        }
    },
    props: {
        devId: {
            type: String,
            default: '',
        },
    },
    created() {
        this.init()
    },
    methods: {
        queryTopologyDiagram() {
            queryTopologyDiagram(this.devId).then((res) => {
                console.log(res)
                this.topologyDiagramFilePath = res.data.filePath
                console.log(this.topologyDiagramFilePath)
            })
        },
        xiebojibianlvTimeChange(e) {
            console.log(e)
        },

        init() {
            queryByCode('Harmonic_Type').then((res) => {
                this.xiebBoCode = res.data.id
                this.loading = false
            })
            // queryByCode('LMT').then((res) => {
            //     this.jiBianLvCode = res.data.id
            // })
            // this.handleClick()
        },
        handleClick(tab, event) {
            setTimeout(() => {
                if (this.activeName == 'one') {
                    // this.queryTopologyDiagram()
                } else if (this.activeName == 'three') {
                    // this.实时谐波含量()
                }
            }, 100)
        },
        async 实时谐波含量() {
            const res = await queryFisrtThdContent({
                devId: this.devId,
                statisticalName: 'H14VLmt',
            })
            this.实时谐波含量数据 = []
            res.data.forEach((item) => {
                const arr = this.实时谐波含量数据.map((item2) => item2.phase)
                if (arr.indexOf(item.phase) == -1) {
                    this.实时谐波含量数据.push({
                        name: item.phase,
                        phase: item.phase,
                        originData: [item],
                        data: [],
                        type: 'bar',
                    })
                } else {
                    this.实时谐波含量数据.forEach((item1) => {
                        if (item1.phase == item.phase) {
                            item1.originData.push(item)
                        }
                    })
                }
            })
            this.实时谐波含量数据.forEach((item) => {
                item.originData.forEach((item1) => {
                    switch (item1.statMethod) {
                        case 'cp95':
                            item.data[0] = item1.statisticalData
                            break
                        case 'max':
                            item.data[1] = item1.statisticalData
                            break
                        case 'min':
                            item.data[2] = item1.statisticalData
                            break
                        case 'avg':
                            item.data[3] = item1.statisticalData
                            break
                        default:
                            break
                    }
                })
            })
            let series = [
                {
                    name: 'cp95',
                    type: 'bar',
                    data: [],
                },
                {
                    name: 'max',
                    type: 'bar',
                    data: [],
                },
                {
                    name: 'min',
                    type: 'bar',
                    data: [],
                },
                {
                    name: 'avg',
                    type: 'bar',
                    data: [],
                },
            ]
            this.实时谐波含量数据.forEach((item, index) => {
                item.data.forEach((item2, index2) => {
                    series[index2].data.push(item2)
                })
            })

            console.warn(this.实时谐波含量数据)
            let chartDom = document.getElementById('实时谐波含量')
            let myChart = echarts.init(chartDom)
            let option
            option = {
                title: {
                    text: '实时谐波含量',
                    // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    data: ['cp95', 'max', 'min', 'avg'],
                },
                xAxis: {
                    type: 'category',
                    data: this.实时谐波含量数据.map((item) => item.phase),
                },
                yAxis: {
                    type: 'value',
                },
                series: series,
            }
            option && myChart.setOption(option)
window.echartsArr.push(myChart)
        },
        indexMethod(index) {
            return 'L' + (index + 1)
        },
        goBack() {
            this.$router.push({
                path: '/app/steady',
            })
        },
    },
}
</script>
<style lang="scss">
.el-page-header {
    background: #fff;
}

.steady-detail {
    flex: 1;
    .content {
        overflow: auto;
        display: flex;
        align-items: center;
        justify-content: center;
       // height: calc(100vh - 198px);
    }
}
</style>
