<template>
    <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
        <schemeTree @node-click="nodeClick" @init="nodeClick" @node-change="nodeClick" ref="schemeTreeRef"></schemeTree>
        <div class="device-manage-right" v-if="deviceData">
            <el-descriptions title="方案信息" class="mb10" :column="4" border>
                <template #extra>
                    <!-- <el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(0)">
                        新增方案
                    </el-button> -->
                    <!-- <el-button type="primary" size="small" icon="el-icon-Plus" @click="handleOpen(2)">
                        新增测试项
                    </el-button> -->
                </template>
                <el-descriptions-item label="方案名称">
                    {{ deviceData.itemName }}
                </el-descriptions-item>
                <el-descriptions-item label="方案描述">
                    {{ deviceData.describe ? deviceData.describe : '/' }}
                </el-descriptions-item>
            </el-descriptions>
            <div class="monitor_info" v-if="deviceData.records && deviceData.records.length != 0">
                <div class="history_title">
                    <p>测试项信息</p>
                </div>
                <el-tabs v-model="activeName" type="border-card">
                    <el-tab-pane
                        v-for="(item, index) in deviceData.records"
                        :label="item.itemName"
                        :name="item.itemName"
                        :key="index"
                    >
                        <el-descriptions class="mb10" :column="4" border>
                            <el-descriptions-item label="测试项名称" width="160">
                                {{ item.itemName }}
                            </el-descriptions-item>
                            <el-descriptions-item label="PT变比" width="160">
                                {{ item.pt }}
                            </el-descriptions-item>
                            <el-descriptions-item label="CT变比" width="160">
                                {{ item.ct }}
                            </el-descriptions-item>
                            <el-descriptions-item label="统计间隔" width="160">
                                {{ item.statisticalInterval }}
                            </el-descriptions-item>
                            <el-descriptions-item label="电压等级" width="160">
                                {{
                                    voltageLevelList.find(vv => {
                                        return vv.id == item.voltageLevel
                                    })?.name
                                }}
                            </el-descriptions-item>
                            <el-descriptions-item label="接线方式" width="160">
                                {{
                                    volConTypeList.find(vv => {
                                        return vv.id == item.volConType
                                    })?.name
                                }}
                            </el-descriptions-item>
                            <el-descriptions-item label="起始时间" width="160">
                                {{ item.startTime }}
                            </el-descriptions-item>
                            <el-descriptions-item label="结束时间" width="160">
                                {{ item.endTime }}
                            </el-descriptions-item>
                            <el-descriptions-item label="安装位置" width="160">
                                {{ item.location }}
                            </el-descriptions-item>
                            <el-descriptions-item label="操作" width="160">
                                <!-- <el-button type="primary" size="small" icon="el-icon-EditPen" @click="handleOpen(3)">
                                    修改
                                </el-button> -->
                                <el-button type="primary" size="small" icon="el-icon-InfoFilled" @click="handleOpen(6)">
                                    设备信息
                                </el-button>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div class="history_title">
                <p>历史趋势</p>
            </div>
            <div class="history_header">
                <el-form :model="form" class="history_select">
                    <el-form-item label="统计指标">
                        <el-select v-model="form.index" placeholder="请选择统计指标" clearable>
                            <el-option
                                v-for="item in rankOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="值类型">
                        <el-select v-model="form.type" placeholder="请选择值类型" clearable>
                            <el-option
                                v-for="item in rankOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="history_searchBtn">
                    <el-button type="primary" size="small" icon="el-icon-Search" @click="handleSearch">查询</el-button>
                    <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
                        报表导出
                    </el-button>
                </div>
            </div>
            <!-- <div class="title">
                10KV 母线_监测点 相电压有效值
            </div> -->
            <div class="history_chart">
                <MyEchart :options="echartsData" v-if="echartsData" />
            </div>
            <!-- <el-tabs v-model="dataSet" type="border-card" class="device-manage-box-card" @tab-click="handleClick">
                <el-tab-pane
                    lazy
                    :label="item.name"
                    :name="item.id"
                    v-for="(item, index) in deviceData.dataSetList"
                    :key="index"
                ></el-tab-pane>
                <div :style="{ height: tableHeight }" v-loading="tableLoading">
                    <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
                        <vxe-column type="seq" title="序号" width="80"></vxe-column>
                        <vxe-column field="name" title="数据名称"></vxe-column>
                        <vxe-column field="phasic" title="相别"></vxe-column>
                        <vxe-column field="type" title="数据类型"></vxe-column>
                        <vxe-column field="unit" title="单位"></vxe-column>
                        <vxe-column field="startTimes" title="开始次数"></vxe-column>
                        <vxe-column field="endTimes" title="结束次数"></vxe-column>
                    </vxe-table>
                </div>
            </el-tabs> -->
        </div>
        <el-empty v-else description="请选择设备" class="device-manage-right" />
        <MangePopup ref="mangePopup" />
    </div>
</template>

<script lang="ts" setup>
import MangePopup from './components/popup.vue'
import schemeTree from './components/schemeTree.vue'
import { mainHeight } from '@/utils/layout'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
// import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
import { getGroup } from '@/api/cs-device-boot/csGroup'
import { ref, reactive, onMounted,provide } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
import { getTestRecordInfo, getHistoryTrend } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
const dictData = useDictData()
defineOptions({
    name: 'govern/device/manage'
})
//电压等级
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
//接线方式
const volConTypeList = dictData.getBasicData('Dev_Connect')
//统计指标

//值类型

const pageHeight = mainHeight(20)
const loading = ref(true)
const form = ref({})
form.value = {
    index: '',
    type: ''
}
const rankOptions = ref([
    {
        value: '1',
        label: '1级'
    },
    {
        value: '2',
        label: '2级'
    },
    {
        value: '3',
        label: '3级'
    }
])
const activeName: any = ref()
const deviceData: any = ref([])
const schemeTreeRef = ref(null)
const chartsDataList: any = ref([])
const nodeClick = async (e: anyObj) => {
    // if (!e) {
    //     loading.value = false
    //     return
    // }
    // if (e.level == 2) {
    loading.value = true
    deviceData.value = []
    // if (e?.id) {

    // }
    //查询测试项信息
    try {
        await getTestRecordInfo(e.id).then(res => {
            deviceData.value = res.data
            loading.value = false
            activeName.value = res.data.records[0]?.itemName     
               schemeTreeRef.value.getPlanData(deviceData.value)
        })

        const historyData = {
            devId: e.id,
            statisticalId: '11aaa206ba82c5b68b7339fe60e22945',
            valueType: 'avg'
        }
        chartsDataList.value = []
        await getHistoryTrend(historyData).then(res => {
            chartsDataList.value = res.data
            init()
        })
    } catch (error) {
        loading.value = false
    }
    //查询历史趋势
}

const mangePopup = ref()
const handleOpen = (val: any) => {
    mangePopup.value.open(val, deviceData.value.records[0].id)
}

const echartsData = ref<any>(null)
//加载echarts图表
const init = () => {
    echartsData.value = null
    //icon图标替换legend图例
    const iconThree =
        'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
    const iconDanger =
        'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'

    let xAxis: any[] = []
    chartsDataList.value.map(item => {
        xAxis.push(item.time)
    })
    echartsData.value = {
        options: {
            title: [
                {
                    left: 'center',
                    text: '10KV 母线_监测点 相电压有效值'
                }
            ],
            // backgroundColor: '#1B232E',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
                // textStyle: {
                //     color: 'rgba(255, 255, 255, 1)'
                // },
                // backgroundColor: 'rgba(0, 0, 0, 0.8)',
                // borderColor: 'rgba(219, 230, 255, 0.8)'
            },
            legend: {
                //legend使用iconfont图标
                data: [
                    {
                        name: 'A相',
                        icon: iconThree
                    },
                    {
                        name: 'B相',
                        icon: iconThree
                    },
                    {
                        name: 'C相',
                        icon: iconThree
                    },
                    {
                        name: '暂降',
                        icon: iconDanger
                    }
                ],
                x: 'right',
                textStyle: {
                    // color: 'white',
                    fontSize: 14
                },
                top: 0,
                right: 50,
                itemWidth: 20,
                itemHeight: 10,
                itemGap: 15
            },
            grid: {
                left: '1%',
                right: '5%',
                bottom: '5%',
                top: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    name: '时间',
                    axisLabel: {
                        color: '#A9AEB2',
                        fontSize: 12
                    },
                    data: xAxis,
                    axisLine: {
                        lineStyle: {
                            color: '#43485E'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: 'KV',
                    axisLabel: {
                        color: '#A9AEB2',
                        fontSize: 12
                    },
                    axisTick: {
                        show: true
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            // color: 'white'
                        }
                    },
                    nameTextStyle: {
                        color: '#A9AEB2',
                        fontSize: '12'
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: ['#43485E'],
                            width: 1,
                            type: 'solid'
                        }
                    }
                }
            ],
            series: [
                {
                    name: 'A相',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#DAA521',
                            lineStyle: {
                                color: '#DAA521'
                            }
                        }
                    },
                    data: chartsDataList.value
                        .map(item => {
                            if (item.statisticalName === 'Apf_ThdA_Load') {
                                return item.statisticalData
                            } else {
                                return ''
                            }
                        })
                        .filter(item => item !== '')
                },
                {
                    name: 'B相',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#2E8B58',
                            lineStyle: {
                                color: '#2E8B58'
                            }
                        }
                    },
                    data: chartsDataList.value
                        .map(item => {
                            if (item.statisticalName === 'Apf_ThdA_Sys') {
                                return item.statisticalData
                            } else {
                                return ''
                            }
                        })
                        .filter(item => item !== '')
                },
                {
                    name: 'C相',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#A5292A',
                            lineStyle: {
                                color: '#A5292A'
                            }
                        }
                    },
                    data: chartsDataList.value
                        .map(item => {
                            if (item.statisticalName === 'Apf_RmsI_TolOut') {
                                return item.statisticalData
                            } else {
                                return ''
                            }
                        })
                        .filter(item => item !== '')
                },
                {
                    name: '暂降',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    itemStyle: {
                        normal: {
                            color: '#d81e06',
                            lineStyle: {
                                color: '#d81e06'
                            }
                        }
                    },
                    data: []
                }
            ]
        }
    }
    setTimeout(() => {
        loading.value = false
    }, 1500)
}
//搜素
const handleSearch = () => {
    console.log(form.value, '搜索')
}
//导出
const handleExport = () => {
    console.log(form.value, '导出')
}

onMounted(() => {
    init()
})
</script>

<style lang="scss" scoped>
.device-manage {
    display: flex;
    height: calc(100vh - 100px);
    // overflow-y: auto;
    &-right {
        // overflow: auto;
        flex: 1;
        padding: 10px 10px 10px 0;
        .el-descriptions__header {
            height: 36px;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
        }
    }
    .device-manage-right {
        overflow: hidden;
        flex: 1 !important;
        padding: 10px 10px 10px 10px;
        border: 2px solid #eeeeee;
        display: flex;
        flex-direction: column;
        .el-descriptions__header {
            height: 36px;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
        }
    }
}
.history_title {
    width: 100%;
    p {
        height: 32px;
        line-height: 32px;
        font-size: 16px;
        font-weight: bold;
    }
}
.monitor_info {
    width: 100%;
}
.history_header {
    display: flex;
    .history_select {
        width: 65%;
        display: flex;
        justify-content: flex-start;
        .el-select {
            margin-right: 10px;
        }
    }
    .history_searchBtn {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }
}
.history_chart {
    width: 100%;
    min-height: calc(100vh - 580px) !important;
    flex: 1;
    margin-top: 10px;
}
// ::v-deep .el-select {
//     width: 200px !important;
// }
</style>
