<!-- 实时趋势 -->
<template>
    <div class="realtrend">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="谐波电压含有率" name="0">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon><TrendCharts /></el-icon>
                        谐波电压含有率
                    </span>
                </template>
                <div class="tab_info">
                    <vxe-grid v-if="activeName == '0'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
                    <div class="charts">
                        <MyEchart ref="barCharts1" :options="echartsData1"></MyEchart>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="间谐波电压含有率" name="1">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon><TrendCharts /></el-icon>
                        间谐波电压含有率
                    </span>
                </template>
                <div class="tab_info">
                    <vxe-grid v-if="activeName == '1'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
                    <div class="charts">
                        <MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="谐波电流幅值" name="2">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon><DataLine /></el-icon>
                        谐波电流幅值
                    </span>
                </template>
                <div class="tab_info">
                    <vxe-grid v-if="activeName == '2'" class="reverse-table" v-bind="gridOptions"></vxe-grid>
                    <div class="charts">
                        <MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
const activeName = ref('0')
const tableList = [
    {
        name: '2次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '3次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '4次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '5次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '6次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '7次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '8次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '9次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '10次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '11次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '12次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '13次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '14次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '15次',
        value: Math.floor(Math.random() * 101)
    },
    {
        name: '16次',
        value: Math.floor(Math.random() * 101)
    }
]
interface RowVO {
    [key: string]: any
}
//谐波电压含有率
const gridOptions = ref<VxeGridProps<RowVO>>({
    border: true,
    showOverflow: true,
    showHeader: false,
    columns: [],
    data: [],
    columnConfig: {
        resizable: true
    },
    align: 'center'
})
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
const myColumns = ref([
    { field: 'name', title: '次数' },
    { field: 'value', title: '谐波电压含有率(%)' }
])
const yAxisUnit: any = ref('')
myColumns.value.map(item => {
    if (item.field == 'value') {
        item.title =
            activeName.value == '0'
                ? '谐波电压含有率(%)'
                : activeName.value == '1'
                ? '间谐波电压含有率(%)'
                : activeName.value == '2'
                ? '谐波电流幅值(A)'
                : ''
        yAxisUnit.value = item.title.split('(')[0]
    }
})

const myData = tableList

//反转表格
const reverseTable = () => {
    const buildData = myColumns.value.map(column => {
        const item: any = { col0: column.title }
        myData.forEach((row, index) => {
            item[`col${index + 1}`] = row[column.field]
        })
        return item
    })
    const buildColumns: VxeGridPropTypes.Columns = [
        {
            field: 'col0',
            fixed: 'left',
            width: 200
        }
    ]
    myData.forEach((item, index) => {
        buildColumns.push({
            field: `col${index + 1}`,
            minWidth: 120
        })
    })
    gridOptions.value.data = buildData
    gridOptions.value.columns = buildColumns
}

reverseTable()

const echartsData1: any = ref([]),
    echartsData2: any = ref([]),
    echartsData3: any = ref([]),
    barCharts1 = ref(),
    barCharts2 = ref(),
    barCharts3 = ref()
//加载echarts
const init = () => {
    const xDataList: any = [],
        yDataList1: any = [],
        yDataList2: any = []
    tableList.map((item: any) => {
        xDataList.push(item.name)
        yDataList1.push(item.value)
        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
        yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
    })
    if (activeName.value == '0') {
        echartsData1.value = {
            options: {
                // backgroundColor: '#0f375f',
                grid: {
                    top: '22%',
                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                    left: '3%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            show: false
                        }
                    }
                },
                legend: {
                    data: ['国标限值', yAxisUnit.value],
                    top: '2%',
                    right: '2%'
                    // icon: 'icon'
                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
                    // itemWidth: 14,
                    // itemHeight: 14,
                    // textStyle: {
                    //     inside: true,
                    //     color: '#000',
                    //     padding: [11, 0, 10, 0],
                    //     align: 'left',
                    //     verticalAlign: 'center',
                    //     fontSize: 14,
                    //     rich: {}
                    // }
                },
                xAxis: {
                    name: '次数',
                    data: xDataList,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000' //X轴文字颜色
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '单位(' + '%' + ')',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '国标限值',
                        type: 'bar',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#00CC99'
                            // }e
                        },
                        data: yDataList1
                    },
                    {
                        name: yAxisUnit.value,
                        type: 'bar',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2
                    }
                ]
            }
        }
        barCharts1.value.initChart()
    } else if (activeName.value == '1') {
        echartsData2.value = {
            options: {
                // backgroundColor: '#0f375f',
                grid: {
                    top: '22%',
                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                    left: '3%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            show: false
                        }
                    }
                },
                legend: {
                    data: ['国标限值', yAxisUnit.value],
                    top: '2%',
                    right: '2%'
                    // icon: 'icon'
                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
                    // itemWidth: 14,
                    // itemHeight: 14,
                    // textStyle: {
                    //     inside: true,
                    //     color: '#000',
                    //     padding: [11, 0, 10, 0],
                    //     align: 'left',
                    //     verticalAlign: 'center',
                    //     fontSize: 14,
                    //     rich: {}
                    // }
                },
                xAxis: {
                    name: '次数',
                    data: xDataList,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000' //X轴文字颜色
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '单位(' + '%' + ')',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '国标限值',
                        type: 'bar',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#00CC99'
                            // }e
                        },
                        data: yDataList1
                    },
                    {
                        name: yAxisUnit.value,
                        type: 'bar',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2
                    }
                ]
            }
        }
        barCharts2.value.initChart()
    } else if (activeName.value == '2') {
        echartsData3.value = {
            options: {
                // backgroundColor: '#0f375f',
                grid: {
                    top: '22%',
                    bottom: '15%', //也可设置left和right设置距离来控制图表的大小
                    left: '3%',
                    right: '5%'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            show: false
                        }
                    }
                },
                legend: {
                    data: ['国标限值', yAxisUnit.value],
                    top: '2%',
                    right: '2%'
                    // icon: 'icon'
                    //  icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
                    // itemWidth: 14,
                    // itemHeight: 14,
                    // textStyle: {
                    //     inside: true,
                    //     color: '#000',
                    //     padding: [11, 0, 10, 0],
                    //     align: 'left',
                    //     verticalAlign: 'center',
                    //     fontSize: 14,
                    //     rich: {}
                    // }
                },
                xAxis: {
                    name: '次数',
                    data: xDataList,
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    axisTick: {
                        show: true //隐藏X轴刻度
                    },
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#000' //X轴文字颜色
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '单位(' + '%' + ')',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '国标限值',
                        type: 'bar',
                        barMaxWidth: 24, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],
                            color: '#00CC99'
                            // }e
                        },
                        data: yDataList1
                    },
                    {
                        name: yAxisUnit.value,
                        type: 'bar',
                        barMaxWidth: 24,
                        itemStyle: {
                            // normal: {
                            barBorderRadius: [3, 3, 0, 0],

                            color: '#FF9900'
                            // }
                        },
                        data: yDataList2
                    }
                ]
            }
        }
        barCharts3.value.initChart()
    }
}

const handleClick = (tab: any, event: any) => {
    activeName.value = tab.index
    myColumns.value.map(item => {
        if (item.field == 'value') {
            item.title =
                activeName.value == '0'
                    ? '谐波电压含有率(%)'
                    : activeName.value == '1'
                    ? '间谐波电压含有率(%)'
                    : activeName.value == '2'
                    ? '谐波电流幅值(A)'
                    : ''
            yAxisUnit.value = item.title.split('(')[0]
        }
    })
    reverseTable()
    init()
}
onMounted(() => {
    init()
})
</script>
<style lang="scss" scoped>
.realtrend {
    width: 100%;
    height: 100%;
    .table_info {
        width: 100%;
        height: auto;
        overflow-x: auto;
        .table {
            width: auto;
            height: auto;
            border: 2px solid #eee;
            display: flex;
            flex-direction: column;
            .thead {
                width: 100%;
                height: 40px;
                display: flex;
                border-bottom: 2px solid #eee;
                .thead_left {
                    width: 200px !important;
                    height: 100%;
                    line-height: 40px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 800;
                }
                .thead_right {
                    flex: 1;
                    display: flex;
                    .thead_right_item {
                        flex: none;
                        width: 100px;
                        text-align: center;
                        line-height: 40px;
                        border-left: 1px solid #eee;
                    }
                }
            }
            .tbody {
                width: 100%;
                height: 40px;
                display: flex;
                .tbody_left {
                    width: 200px !important;
                    height: 100%;
                    line-height: 40px;
                    text-align: center;
                    font-size: 14px;
                    font-weight: 800;
                }
                .tbody_right {
                    flex: 1;
                    display: flex;
                    .tbody_right_item {
                        flex: none;
                        width: 100px;
                        text-align: center;
                        line-height: 40px;
                        border-left: 1px solid #eee;
                    }
                }
            }
        }
    }
}
.reverse-table {
    // max-height:120px !important;
}
.reverse-table .vxe-body--row .vxe-body--column:first-child {
    background-color: #f8f8f9;
}
::v-deep .vxe-table--render-wrapper {
    height: 90px !important;
    max-height: 90px !important;
    overflow-x: auto !important;
    min-height: 0 !important;
}
::v-deep .body--wrapper {
    height: 90px !important;
    max-height: 90px !important;
    min-height: 0 !important;
}
.tab_info {
    width: 100%;
    height: calc(100vh - 450px);
    // overflow: auto;
    // padding-bottom: 20px;
    .charts {
        width: 100%;
        margin-top: 10px;
        height: calc(100vh - 550px);
    }
}
.custom-tabs-label {
    display: flex;
    align-items: center;
}
</style>
