<template>
    <div class="energyManage">
        <el-row :gutter="20">
            <el-col :md="24" :lg="{ span: 14, push: 5 }">
                <el-tabs v-model="activeName" @tab-change="handleClick">
                    <el-tab-pane label="风机列表" name="list">
                        <div class="centerContainer">
                            <div class="airBlowerList">
                                <!-- <div class="title">风机列表</div> -->
                                <el-table class="table" :data="tableData">
                                    <el-table-column
                                        v-for="item in tableColumn"
                                        :key="item.prop"
                                        :prop="item.prop"
                                        :label="item.label"
                                        align="center"
                                        :width="item.width"
                                    >
                                        <template #default="scope">
                                            <div v-if="item.prop === 'processedoperationmode'">
                                                <el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
                                                    >已锁定</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 20"
                                                    color="rgba(0,100,170,0.20)"
                                                    style="color: #0064aa"
                                                    >并网</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 10"
                                                    color="rgba(0,160,150,0.20)"
                                                    style="color: #00a096"
                                                    >维护</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 8"
                                                    color="rgba(255,126,0,0.20)"
                                                    style="color: #ff7e00"
                                                    >限功率运行</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 0"
                                                    color="rgba(153,153,153,0.20)"
                                                    style="color: #666666"
                                                    >离线</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 16"
                                                    color="rgba(6,180,41,0.20)"
                                                    style="color: #06b429"
                                                    >启动</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 6"
                                                    color="rgba(254,55,49,0.20)"
                                                    style="color: #fe3731"
                                                    >正常停机</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 1"
                                                    color="rgba(254,55,49,0.20)"
                                                    style="color: #fe3731"
                                                    >外部因素导致停机</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 2"
                                                    color="rgba(254,55,49,0.20)"
                                                    style="color: #fe3731"
                                                    >停机</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 11"
                                                    color="rgba(255,182,0,0.20)"
                                                    style="color: #ffb600"
                                                    >待机</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 1110"
                                                    color="rgba(153,153,153,0.20)"
                                                    style="color: #666666"
                                                    >解缆状态</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 1111"
                                                    color="rgba(254,55,49,0.20)"
                                                    style="color: #fe3731"
                                                    >电网故障停机</el-tag
                                                >
                                                <el-tag
                                                    v-if="scope.row.processedoperationmode === 33"
                                                    color="rgba(153, 153, 153, 0.2)"
                                                    style="color: #999999"
                                                    >通讯中断</el-tag
                                                >
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="风机曲线" name="chart">
                        <div class="centerContainer">
                            <div class="chartPart">
                                <div class="title">
                                    <span> 自动更新 </span>
                                    <el-switch v-model="autoUpdateChartSwitch" @change="changeUpdateChart"></el-switch>
                                </div>
                                <div class="lineChart">
                                    <div class="chart" ref="chartRef"></div>
                                </div>
                                <div class="info">
                                    <div class="infoItem" v-for="item in infoList" :key="item.label">
                                        <div class="label">{{ item.label }}</div>
                                        <div class="val">{{ item.value }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :md="12" :lg="{ span: 5, pull: 14 }">
                <div class="leftContainer">
                    <div class="overview">
                        <div class="title">AGC总览</div>
                        <div class="content">
                            <div class="rect">
                                <div class="left">
                                    <div class="img img1"></div>
                                    <div class="imgName">全场有功</div>
                                </div>
                                <div class="right">
                                    <div class="num">{{ realDataList.windfarmactivepower }}</div>
                                    <div class="unit">MW</div>
                                </div>
                            </div>
                            <div class="rect">
                                <div class="left">
                                    <div class="img img2"></div>
                                    <div class="imgName">AGC目标值</div>
                                </div>
                                <div class="right">
                                    <div class="num">{{ realDataListSetValue.AgcTarget }}</div>
                                    <div class="unit">MW</div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">
                                    <div class="name">AGC投入/退出</div>
                                    <div class="status">
                                        <div class="smallDot" :class="realDataList.operationstatusagc ? 'successColor' : 'defaultColor'"></div>
                                        <div class="smallDot" :class="realDataList.operationstatusagc ? 'defaultColor' : 'errorColor'"></div>
                                    </div>
                                </div>
                                <div class="right">
                                    <el-switch v-model="agcOnoffSwitch"></el-switch>
                                </div>
                            </div>
                            <div class="checkInput">
                                <div class="top">
                                    <div class="left">AGC远程/就地</div>
                                    <div class="right">
                                        <el-switch v-model="agcLocalRemoteSwitch"></el-switch>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <el-input v-model="agcTargetValue" placeholder="本地目标值设置MW        请输入">
                                        <template #suffix>
                                            <div class="saveBtn"></div>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AGC增闭锁</div>
                                <div class="right">
                                    <div class="dot" :class="realDataList.activepowerincdisabled ? 'successColor' : 'errorColor'"></div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AGC减闭锁</div>
                                <div class="right">
                                    <div class="dot" :class="realDataList.activepowerdecdisabled ? 'successColor' : 'errorColor'"></div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AGC可增有功</div>
                                <div class="right">
                                    <div class="num">{{ realDataList.activepowerinccapacity }}</div>
                                    <div class="unit">MW</div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AGC可减有功</div>
                                <div class="right">
                                    <div class="num">{{ realDataList.activepowerdeccapacity }}</div>
                                    <div class="unit">MW</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="record">
                        <div class="title">AGC记录</div>
                        <div class="recordList">
                            <el-scrollbar>
                                <div class="recordItem" v-for="item in agcRecordList" :key="item">{{ item }}</div>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :md="12" :lg="5">
                <div class="rightContainer">
                    <div class="overview">
                        <div class="title">AVC总览</div>
                        <div class="content">
                            <div class="rect">
                                <div class="left">
                                    <div class="img img1"></div>
                                    <div class="imgName">全场无功</div>
                                </div>
                                <div class="right">
                                    <div class="num">{{ realDataList.windfarmreactivepower }}</div>
                                    <div class="unit">MVar</div>
                                </div>
                            </div>
                            <div class="rect">
                                <div class="left">
                                    <div class="img img2"></div>
                                    <div class="imgName">AVC目标值</div>
                                </div>
                                <div class="right">
                                    <div class="num">{{ realDataListSetValue.AvcTarget }}</div>
                                    <div class="unit">MVar</div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">
                                    <div class="name">AVC投入/退出</div>
                                    <div class="status">
                                        <div class="smallDot" :class="realDataList.operationstatusavc ? 'successColor' : 'defaultColor'"></div>
                                        <div class="smallDot" :class="realDataList.operationstatusavc ? 'defaultColor' : 'errorColor'"></div>
                                    </div>
                                </div>
                                <div class="right">
                                    <el-switch v-model="avcOnoffSwitch"></el-switch>
                                </div>
                            </div>
                            <div class="checkInput">
                                <div class="top">
                                    <div class="left">AVC远程/就地</div>
                                    <div class="right">
                                        <el-switch v-model="avcLocalRemoteSwitch"></el-switch>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <el-input v-model="avcTargetValue" placeholder="本地目标值设置MW        请输入">
                                        <template #suffix>
                                            <div class="saveBtn"></div>
                                        </template>
                                    </el-input>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AVC增闭锁</div>
                                <div class="right">
                                    <div class="dot" :class="realDataList.reactivepowerincdisabled ? 'successColor' : 'errorColor'"></div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AVC减闭锁</div>
                                <div class="right">
                                    <div class="dot" :class="realDataList.reactivepowerdecdisabled ? 'successColor' : 'errorColor'"></div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AVC可增无功</div>
                                <div class="right">
                                    <div class="num">{{ realDataList.reactivepowerinccapacity }}</div>
                                    <div class="unit">MVar</div>
                                </div>
                            </div>
                            <div class="check">
                                <div class="left">AVC可减无功</div>
                                <div class="right">
                                    <div class="num">{{ realDataList.reactivepowerdeccapacity }}</div>
                                    <div class="unit">MVar</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="record">
                        <div class="title">AVC记录</div>
                        <div class="recordList">
                            <el-scrollbar>
                                <div class="recordItem" v-for="item in avcRecordList" :key="item">{{ item }}</div>
                            </el-scrollbar>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, reactive } from 'vue'
import { getAirBlowerListReq } from '/@/api/backend/airBlower/request'
import { getRealValueListReq, getRealValueRangeReq } from '/@/api/backend/deviceModel/request'
import { getRealTimeState, getCutDecimalsValue, getEnumToValue } from '/@/views/backend/equipment/airBlower/utils'
import { ElMessage, dayjs } from 'element-plus'
import { debounce } from 'lodash-es'
import * as echarts from 'echarts'

const agcOnoffSwitch = ref(true)
const agcOnOff = ref(true)
const agcLocalRemoteSwitch = ref(false)
const agcTargetValue = ref()
const agcAdd = ref(true)
const agcSub = ref(false)
const agcRecordList = ref([
    '2023-12-26 22:07:25一次调频指令变更为：156212kW',
    '2023-12-25 22:07:25进入一次调频模式',
    '2023-12-24 22:07:25进入一次调频模式',
    '2023-12-23 22:07:25进入一次调频模式',
    '2023-12-22 22:07:25一次调频指令变更为：156212kW',
])

const avcOnoffSwitch = ref(true)
const avcOnOff = ref(false)
const avcLocalRemoteSwitch = ref(false)
const avcTargetValue = ref()
const avcAdd = ref(true)
const avcSub = ref(false)
const avcRecordList = ref([
    '2023-12-26 22:07:25一次调频指令变更为：156212kW',
    '2023-12-25 22:07:25进入一次调频模式',
    '2023-12-24 22:07:25进入一次调频模式',
    '2023-12-23 22:07:25进入一次调频模式',
    '2023-12-22 22:07:25一次调频指令变更为：156212kW',
])

const tableColumn = [
    {
        label: '编号',
        prop: 'name',
        width: '',
    },
    {
        label: '风速m/s',
        prop: 'iwindspeed',
        width: '',
    },
    {
        label: '转速rmp',
        prop: 'igenspeed',
        width: '',
    },
    {
        label: '有功kW',
        prop: 'igenpower',
        width: '',
    },
    {
        label: '有功给定kW',
        prop: 'iactivepowersetpointvalue',
        width: '',
    },
    {
        label: '无功kVar',
        prop: 'ireactivepower',
        width: '',
    },
    {
        label: '无功给定kVar',
        prop: 'ireactivepowersetpointvalue',
        width: '',
    },
    {
        label: '状态',
        prop: 'processedoperationmode',
        width: '',
    },
]

const curDevice = ref('1846101273013739522')
const tableData = ref<any[]>([])

const createTableReqParams = (airblowerList: { irn: string; name: string }[]) => {
    const curTableKey = tableColumn.map((item) => item.prop)
    const airBlowerIds: any = []
    const airBlowerInfo: any = {}
    const params = airblowerList.map((item: any) => {
        airBlowerInfo[item.irn] = {
            name: item.name,
            model: item.model,
            belongLine: item.belongLine,
            modelId: item.modelId,
            deviceCode: item.deviceCode,
        }
        airBlowerIds.push(item.irn)
        return {
            deviceId: item.irn,
            attributes: [...curTableKey, 'processedoperationmode', 'iyplevel', 'gridlostdetected', 'ibplevel'],
        }
    })
    return { params, airBlowerInfo, airBlowerIds }
}

const getAirBlowerList = () => {
    let airBlowerInfoObj: any = {}
    let airBlowerIdList: any[] = []
    getAirBlowerListReq()
        .then((res) => {
            if (res.success) {
                return createTableReqParams(res.data)
            } else {
                throw '获取风机列表失败'
            }
        })
        .then((data) => {
            airBlowerInfoObj = data.airBlowerInfo
            airBlowerIdList = data.airBlowerIds
            return getRealValueListReq(data!.params)
        })
        .then((res) => {
            if (res.success) {
                const data = airBlowerIdList.map((id) => {
                    const realData: any = {}
                    Object.keys(res.data[id]).forEach((key) => {
                        const cutVal = getCutDecimalsValue(res.data[id][key])
                        realData[key] = getEnumToValue(key, cutVal)
                    })
                    const state = getRealTimeState(res.data[id])
                    return {
                        irn: id,
                        name: airBlowerInfoObj[id].name,
                        model: airBlowerInfoObj[id].model,
                        iotModelId: airBlowerInfoObj[id].modelId,
                        belongLine: airBlowerInfoObj[id].belongLine,
                        deviceCode: airBlowerInfoObj[id].deviceCode,
                        ...realData,
                        processedoperationmode: state,
                    }
                })
                tableData.value = data
            } else {
                throw '获取风机列表失败'
            }
        })
        .catch((err) => {
            ElMessage.error(err)
        })
}
let timer: any = null
const autoUpdateAirBlower = () => {
    getAirBlowerList()
    if (!timer) {
        timer = setInterval(() => {
            getAirBlowerList()
        }, 2000)
    }
}

const autoUpdateChartSwitch = ref(false)
const changeUpdateChart = (val: boolean) => {
    if (val) {
        autoUpdateChart()
    } else {
        clearInterval(autoUpdateChartTimer)
        autoUpdateChartTimer = null
    }
}

const chartRef = ref()
let chartInstance: any = null

let realDataXAxis: any[] = [
    '2024-12-06 16:53:37',
    '2024-12-06 16:53:38',
    '2024-12-06 16:53:39',
    '2024-12-06 16:53:40',
    '2024-12-06 16:53:41',
    '2024-12-06 16:53:42',
    '2024-12-06 16:53:43',
    '2024-12-06 16:53:44',
    '2024-12-06 16:53:45',
    '2024-12-06 16:53:46',
    '2024-12-06 16:53:47',
    '2024-12-06 16:53:48',
]
let realDataSeries: any[] = [
    {
        id: 'iwindspeed',
        name: '风速',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#096676',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [24.68, 24.68, 25.3, 24.09, 24.51, 24.51, 24.46, 23.87, 23.97, 23.87, 23.87, 24.61],
    },
    {
        id: 'ireactivepowersetpointvalue',
        name: '给定无功功率',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#8236aa',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    },
    {
        id: 'ireactivepower',
        name: '无功功率',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#687068',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6, 50.6],
    },
    {
        id: 'iactivepowersetpointvalue',
        name: '给定有功功率',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#164342',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    },
    {
        id: 'igenpower',
        name: '有功功率',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#532457',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [1518.9, 1518.9, 1518.8, 1518.7, 1518.7, 1518.7, 1518.7, 1518.8, 1518.59, 1518.59, 1518.59, 1518.59],
    },
    {
        id: 'igenspeed',
        name: '转速',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#945810',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [1808.3, 1808.3, 1808.3, 1808.3, 1808.3, 1808.3, 1808.2, 1808.2, 1808.2, 1808, 1808, 1807.8],
    },
    {
        id: 'iwinddirection',
        name: '风向',
        type: 'line',
        barWidth: 20,
        itemStyle: {
            color: '#195658',
            barBorderRadius: 2,
        },
        smooth: true,
        symbol: 'none',
        data: [0.8, 0.8, 6.9, -6.1, 0.6, 0.6, -0.5, -6.6, -5.41, -4.21, -4.21, 2.5],
    },
]
const getRandomDarkColor = () => {
    let r = Math.floor(Math.random() * 200) // 限制在0到127之间，以生成较深的颜色
    let g = Math.floor(Math.random() * 200)
    let b = Math.floor(Math.random() * 200)

    let color = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
    return color
}

const createChartData = (data: { [k: string]: number }, time: string) => {
    if (realDataXAxis.length > 300) {
        realDataXAxis.shift()
        realDataSeries.forEach((item: any) => {
            item.data.shift()
        })
    }
    const attrCode = Object.keys(data)
    realDataXAxis.push(time)

    const seriesData = attrCode.map((item) => {
        const curVal = getCutDecimalsValue(data[item], 2)

        if (realDataSeries.length) {
            const seriesItem = realDataSeries.find((series) => series.id === item)
            seriesItem.data.push(curVal)
            return seriesItem
        } else {
            const color = getRandomDarkColor()
            return {
                id: item,
                name: chartProps[item],
                type: 'line',
                barWidth: 20,
                itemStyle: {
                    color: color,
                    barBorderRadius: 2,
                },
                smooth: true,
                symbol: 'none',
                data: [curVal],
            }
        }
    })
    realDataSeries = seriesData
    createChart()
}
const createChart = () => {
    const chart = chartInstance ?? echarts.init(chartRef.value)
    let option = null
    if (chartInstance && realDataXAxis.length > 1) {
        option = {
            xAxis: {
                data: realDataXAxis,
            },
            series: realDataSeries,
        }
    } else {
        const legendData = Object.values(chartProps).map((item) => {
            return {
                name: item,
            }
        })
        option = {
            grid: {
                top: 50,
                right: 23,
                bottom: 50,
                left: 18,
                containLabel: true,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#dadada',
                        width: 1,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    //x轴文字的配置
                    show: true,
                    color: '#4E5969',
                    interval: 'auto',
                    formatter: function (value: any) {
                        return value.slice(11)
                    },
                    //rotate: 45
                },
                splitLine: {
                    //分割线配置
                    show: false,
                    lineStyle: {
                        color: '#999999',
                    },
                },
                data: realDataXAxis,
            },
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    nameTextStyle: {
                        color: '#4E5969',
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#dadada',
                            width: 0,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        //x轴文字的配置
                        show: true,
                        color: '#4E5969',
                    },
                    axisTick: { show: false },
                    splitLine: {
                        interval: 50,
                        lineStyle: {
                            type: 'dashed',
                            color: '#dadada',
                        },
                    },
                },
            ],
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100,
                },
                {
                    start: 0,
                    end: 100,
                },
            ],
            legend: {
                data: legendData,
                textStyle: {
                    color: '#73767a',
                },
                icon: 'roundRect',
            },
            series: realDataSeries,
        }
    }
    chart.setOption(option, { replaceMerge: 'series' })
    chartInstance = chart
}

const chartProps: any = {
    iwindspeed: '风速',
    iwinddirection: '风向',
    igenspeed: '转速',
    igenpower: '有功功率',
    iactivepowersetpointvalue: '给定有功功率',
    ireactivepower: '无功功率',
    ireactivepowersetpointvalue: '给定无功功率',
}
const getRangeValueList = () => {
    const params = {
        startTime: dayjs().startOf('day').valueOf(),
        endTime: dayjs().valueOf(),
        devices: [
            {
                deviceId: tableData.value[1].irn,
                attributes: Object.keys(chartProps),
            },
        ],
        interval: '1m',
    }
    getRealValueRangeReq(params).then((res) => {
        if (res.data) {
        }
    })
}
const getRealDataForChart = () => {
    const params = [
        {
            deviceId: tableData.value[0].irn,
            attributes: Object.keys(chartProps),
        },
    ]
    getRealValueListReq(params).then((res) => {
        if (res.data) {
            const time = dayjs().format('YYYY-MM-DD HH:mm:ss')
            createChartData(res.data?.[tableData.value[0].irn], time)
        }
    })
}
let autoUpdateChartTimer: any = null

const autoUpdateChart = () => {
    if (!autoUpdateChartTimer) {
        autoUpdateChartTimer = setInterval(() => {
            getRealDataForChart()
        }, 1000)
    }
}

const infoList = ref([
    {
        label: '风机总功率kW',
        value: 157646,
    },
    {
        label: '当前有功指令kW',
        value: 156212,
    },
    {
        label: '电网有功指令kW',
        value: 120000,
    },
    {
        label: '调频有功指令kW',
        value: 156212,
    },
    {
        label: '电网电压kV',
        value: 200,
    },
    {
        label: '风机总无功kVar',
        value: 1596.4,
    },
    {
        label: '当前无功指令kW',
        value: 0.0,
    },
    {
        label: '线路损耗功率kW',
        value: 3259,
    },
    {
        label: '电网出口功率kW',
        value: 156679,
    },
    {
        label: '电网频率Hz',
        value: 0.0,
    },
])

const activeName = ref('list')
const handleClick = (tabName: any) => {
    if (tabName === 'chart') {
        console.log(tabName)

        stopAutoUpdate()
        nextTick(() => {
            createChart()
        })
    } else if (tabName === 'list') {
        autoUpdateAirBlower()
    }
}

const containerHeight = ref('900px')
const getContainerHeight = () => {
    const container = document.querySelector('.leftContainer')
    if (container) {
        const { height } = container.getBoundingClientRect()
        containerHeight.value = `${height}px`
    }
}
const resizeChart = debounce(() => {
    chartInstance?.resize()
}, 500)
const resizeFn = () => {
    resizeChart()
    getContainerHeight()
}
const stopAutoUpdate = () => {
    timer && clearInterval(timer)
    timer = null

}

const realDataListSetValue = reactive({
    AgcTarget: '0',
    AvcTarget: '0',
})
const realDataList = reactive({
    windfarmactivepower: '',
    operationstatusagc: '',
    RemoteCtrlStatusAgc: '',
    activepowerincdisabled: '',
    activepowerdecdisabled: '',
    activepowerinccapacity: '',
    activepowerdeccapacity: '',
    windfarmreactivepower: '',
    operationstatusavc: '',
    RemoteCtrlStatusAvc: '',
    reactivepowerincdisabled: '',
    reactivepowerdecdisabled: '',
    reactivepowerinccapacity: '',
    reactivepowerdeccapacity: '',
})
const getRealDataForList = () => {
    const deviceId = '1881630608594132993'
    const attrs = Object.keys(realDataList) as (keyof typeof realDataList)[]
    const params = [
        {
            deviceId,
            attributes: attrs,
        },
    ]
    getRealValueListReq(params).then((res) => {
        if (res.data) {
            console.log(res.data, 'res.data')
            const data = res.data[deviceId]
            attrs.forEach((item) => {
                realDataList[item] = data?.[item] ?? '-'
            })
        }
    })
}
let listTimer: any = null
const autoUpdateList = () => {
    if (!listTimer) {
        getRealDataForList()
        listTimer = setInterval(() => {
            getRealDataForList()
        }, 2000)
    }
}
const clearListTimer = () => {
    listTimer && clearInterval(listTimer)
    listTimer = null
}
onMounted(() => {
    getContainerHeight()
    autoUpdateList()
    autoUpdateAirBlower()
    window.addEventListener('resize', resizeFn)
})
onUnmounted(() => {
    window.removeEventListener('resize', resizeFn)
    stopAutoUpdate()
    clearListTimer()
})
</script>

<style lang="scss" scoped>
@mixin defaultBoxStyle {
    display: flex;
    align-self: center;
    justify-content: space-between;
    padding: 0 10px;
    width: 100%;
}
@mixin borderstyle {
    border-radius: 10px;
    border: 1px solid #e1edf6;
}
@mixin overViewRight {
    .right {
        display: flex;
        align-items: center;
        height: 100%;
        .num {
            font-size: 20px;
            line-height: 20px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 700;
        }
        .unit {
            margin-left: 5px;
            height: 10%;
            font-size: 14px;
            color: #4e5969;
            letter-spacing: 0;
            line-height: 14px;
            font-weight: 700;
        }
        .dot {
            height: 45%;
            aspect-ratio: 1/1;
            border-radius: 50%;
        }
    }
}
@mixin overview {
    .overview {
        padding: 20px;
        width: 100%;
        background-color: #fff;
        border-radius: 6px;
        .title {
            height: 28px;
            font-size: 18px;
            font-weight: 600;
            color: #4e5969;
        }
        .content {
            width: 100%;
            height: calc(100% - 20px);
            .rect {
                @include defaultBoxStyle;
                margin: 10px 0;
                aspect-ratio: 310/70;
                background-color: #f0f6ff;
                @include borderstyle;
                .left {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    .img {
                        height: 51%;
                        aspect-ratio: 1/1;
                        background-repeat: no-repeat;
                        background-size: contain;
                    }
                    .imgName {
                        margin-left: 5px;
                        font-size: 14px;
                        color: #4e5969;
                        letter-spacing: 0;
                        font-weight: 400;
                    }
                    .img1 {
                        background-image: url('/@/assets/energyManage/power.png');
                    }
                    .img2 {
                        background-image: url('/@/assets/energyManage/AGC.png');
                    }
                }
                @include overViewRight;
            }
            .check {
                @include defaultBoxStyle;
                margin-bottom: 10px;
                aspect-ratio: 310/50;
                @include borderstyle;
                .left {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    color: #4e5969;
                    .status {
                        display: flex;
                        align-items: center;
                        height: 100%;
                        .smallDot {
                            margin-left: 5px;
                            height: 25%;
                            aspect-ratio: 1/1;
                            border-radius: 50%;
                        }
                    }
                }
                @include overViewRight;
            }
            .checkInput {
                padding: 0 10px;
                margin-bottom: 10px;
                width: 100%;
                aspect-ratio: 310/88;
                color: #4e5969;
                @include borderstyle;
                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 5px;
                    margin-bottom: 10px;
                    height: 30%;
                }
                .bottom {
                    .el-input {
                        background-color: #f0f6ff;
                        :deep(.el-input__wrapper) {
                            .el-input__inner {
                                width: 92%;
                                flex-grow: 0;
                            }
                        }
                    }
                    .saveBtn {
                        margin: 0;
                        height: 60%;
                        aspect-ratio: 1/1;
                        background-image: url('/@/assets/energyManage/defaultSave.png');
                        background-size: contain;
                        background-repeat: no-repeat;
                        cursor: pointer;
                    }
                }
            }
        }
    }
}
@mixin record {
    .record {
        margin: 20px 0;
        padding: 20px;
        width: 100%;
        aspect-ratio: 350/270;
        background-color: #fff;
        border-radius: 6px;
        color: #4e5969;
        .title {
            height: 30px;
            font-size: 18px;
            color: #4e5969;
            font-weight: 600;
        }
        .recordList {
            width: 100%;
            height: calc(100% - 30px);
            .recordItem {
                width: 100%;
                min-height: 32px;
                line-height: 150%;
                word-break: break-all;
                background-color: #f0f6ff;
                &:nth-child(2n) {
                    background-color: #fff;
                }
            }
        }
    }
}
.energyManage {
    width: 100%;
    // height: 100%;
    min-height: 100%;
    background-color: #f2f3f5;
    .el-row {
        width: 100%;
        height: 100%;
        .el-col {
            width: 100%;
            height: 100%;
            .successColor {
                background-color: #06b429;
            }
            .errorColor {
                background-color: #fe3731;
            }
            .defaultColor {
                background-color: #e1e6ed;
            }
            .leftContainer {
                @include overview;
                @include record;
            }
            .centerContainer {
                height: v-bind('containerHeight');
                color: #4e5969;
                .airBlowerList {
                    padding: 20px;
                    width: 100%;
                    height: calc(100% - 10px - 40px);
                    background-color: #fff;
                    border-radius: 6px;
                    // .title {
                    //     height: 38px;
                    //     font-size: 18px;
                    //     font-weight: 600;
                    // }
                    .table {
                        height: 100%;
                    }
                }
                .chartPart {
                    padding: 20px;
                    width: 100%;
                    height: calc(100% - 10px - 40px);
                    background-color: #fff;
                    border-radius: 6px;
                    .title {
                        width: 100%;
                        height: 32px;
                        font-size: 14px;
                        font-weight: 500;
                    }
                    .lineChart {
                        width: 100%;
                        height: calc(100% - 102px);
                        .chart {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .info {
                        display: flex;
                        flex-wrap: wrap;
                        padding: 10px;
                        width: 100%;
                        height: 70px;
                        background-color: #f0f6ff;
                        .infoItem {
                            display: flex;
                            align-items: center;
                            width: 20%;
                            height: 50%;
                            font-size: 12px;
                            color: #333333;
                            font-weight: 400;
                            .label {
                                margin-left: 10%;
                            }
                            .val {
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
            .rightContainer {
                @include overview;
                @include record;
            }
        }
    }
}
</style>
