<template>
    <view>
        <uni-load-more status="loading"
            v-if="renderData.电网电流.length == 0 || renderData.电网电压.length == 0 || renderData.负载电流.length == 0 || renderData.补偿电流.length == 0"></uni-load-more>
        <view class="basic" v-else>
            <view class="grid-card">

                <text>
                    <view class="grid-card-title grid-card-title-with-icon"></view>电网电流
                </text>

                <view class="grid-card-content-3">
                    <view class="item item-title">名称</view>
                    <view class="item item-title">有效值(A)</view>
                    <view class="item item-title">畸变率(%)</view>
                    <template v-for="(item, index) in renderData.电网电流">
                        <view class="item">{{ item.phase }}</view>
                        <view class="item">{{
                            item['Apf_RmsI_Sys(A)'] > 0 ? item['Apf_RmsI_Sys(A)'].toFixed(2) : item['Apf_RmsI_Sys(A)']
                        }}</view>
                        <view class="item">{{
                            item['Apf_ThdA_Sys(%)'] > 0 ? item['Apf_ThdA_Sys(%)'].toFixed(2) : item['Apf_ThdA_Sys(%)']
                        }}</view>
                    </template>
                </view>
            </view>
            <view class="grid-card">

                <text>
                    <view class="grid-card-title grid-card-title-with-icon"></view>电网电压
                </text>

                <view class="grid-card-content-4">
                    <view class="item item-title">名称</view>
                    <view class="item item-title">电压(V)</view>
                    <view class="item item-title">频率(Hz)</view>
                    <view class="item item-title">畸变率(%)</view>
                    <template v-for="(item, index) in renderData.电网电压">
                        <view class="item">{{ item.phase }}</view>
                        <view class="item">{{
                            item['Apf_PhV_Sys(V)'] > 0 ? item['Apf_PhV_Sys(V)'].toFixed(2) : item['Apf_PhV_Sys(V)']
                        }}</view>
                        <view class="item">{{
                            item['Apf_Freq(Hz)'] > 0 ? item['Apf_Freq(Hz)'].toFixed(2) : item['Apf_Freq(Hz)']
                        }}</view>
                        <view class="item">{{
                            item['Apf_ThdU_Sys(%)'] > 0 ? item['Apf_ThdU_Sys(%)'].toFixed(2) : item['Apf_ThdU_Sys(%)']
                        }}</view>
                    </template>
                </view>
            </view>
            <view class="grid-card">

                <text>
                    <view class="grid-card-title grid-card-title-with-icon"></view>负载电流
                </text>

                <view class="grid-card-content-3">
                    <view class="item item-title">名称</view>
                    <view class="item item-title">有效值(A)</view>
                    <view class="item item-title">畸变率(%)</view>
                    <template v-for="(item, index) in renderData.负载电流">
                        <view class="item">{{ item.phase }}</view>
                        <view class="item">{{
                            item['Apf_RmsI_Load(A)'] > 0
                                ? item['Apf_RmsI_Load(A)'].toFixed(2)
                                : item['Apf_RmsI_Load(A)']
                        }}</view>
                        <view class="item">{{
                            item['Apf_ThdA_Load(%)'] > 0
                                ? item['Apf_ThdA_Load(%)'].toFixed(2)
                                : item['Apf_ThdA_Load(%)']
                        }}</view>
                    </template>
                </view>
            </view>
            <view class="grid-card">

                <text>
                    <view class="grid-card-title grid-card-title-with-icon"></view>补偿电流
                </text>

                <view class="grid-card-content-3">
                    <view class="item item-title">名称</view>
                    <view class="item item-title">有效值(A)</view>
                    <view class="item item-title">负载率(%)</view>
                    <template v-for="(item, index) in renderData.补偿电流">
                        <view class="item">{{ item.phase }}</view>
                        <view class="item">{{
                            item['Apf_RmsI_TolOut(A)'] == 3.1415926
                                ? '-'
                                : item['Apf_RmsI_TolOut(A)'] > 0
                                    ? item['Apf_RmsI_TolOut(A)'].toFixed(2)
                                    : item['Apf_RmsI_TolOut(A)']
                        }}</view>
                        <view class="item">{{
                            item['load_Rate'] == 3.1415926
                                ? '-'
                                : item['load_Rate'] > 0
                                    ? item['load_Rate'].toFixed(2)
                                    : item['load_Rate']
                        }}</view>
                    </template>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            renderData: {
                电网电流: [],
                电网电压: [],
                负载电流: [],
                补偿电流: [],
                未知: [],
            },
        }
    },
    props: {
        basicData: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    watch: {
        basicData: {
            handler: function (newVal, oldVal) {
                newVal.forEach((item) => {
                    if (item.phase === 'avg') {
                        return
                    }
                    let key = ''
                    switch (item.statisticalName) {
                        case 'Apf_RmsI_Sys(A)':
                            key = '电网电流'
                            break
                        case 'Apf_ThdA_Sys(%)':
                            key = '电网电流'
                            break
                        case 'Apf_PhV_Sys(V)':
                            key = '电网电压'
                            break
                        case 'Apf_Freq(Hz)':
                            key = '电网电压'
                            break
                        case 'Apf_ThdU_Sys(%)':
                            key = '电网电压'
                            break
                        case 'Apf_RmsI_Load(A)':
                            key = '负载电流'
                            break
                        case 'Apf_ThdA_Load(%)':
                            key = '负载电流'
                            break
                        case 'Apf_RmsI_TolOut(A)':
                            key = '补偿电流'
                            break
                        case 'Apf_PhV_Sys(V)':
                            key = '补偿电流'
                            break
                        case 'Apf_PhV_Sys(V)':
                            key = '补偿电流'
                            break
                        case 'load_Rate':
                            key = '补偿电流'
                            break
                        default:
                            key = '未知'
                            break
                    }

                    let index = this.renderData[key].findIndex((item2) => {
                        return item2.phase === item.phase
                    })
                    if (index > -1) {
                        this.renderData[key][index][item.statisticalName] = item.statisticalData //
                    } else {
                        this.renderData[key].push({
                            phase: item.phase,
                            [item.statisticalName]: item.statisticalData, //,
                        })
                    }
                })
                console.log(this.renderData)
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {},
}
</script>
<style lang="scss">
.basic {
    .grid-card-title-with-icon {
        display: inline-flex;
        align-items: center;
        position: relative;
        padding-left: 20rpx;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 8rpx;
            height: 28rpx;
            background: $uni-theme-color;
            border-radius: 3rpx;
        }
    }
}
</style>
