<template>
    <view>
        <uni-load-more status="loading" v-if="renderData.电网侧.length == 0 || renderData.负载侧.length == 0"></uni-load-more>
        <view class="basic" v-else>
            <view class="grid-card">
                <view class="grid-card-title">电网侧</view>
                <view class="grid-card-content-5">
                    <view class="item item-title">名称</view>
                    <view class="item item-title">有功功率(kW)</view>
                    <view class="item item-title">无功功率(kVar)</view>
                    <view class="item item-title">视在功率(kVA)</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_P_Sys(W)'] == '-' ? '-' : (item['Apf_P_Sys(W)'] /
                            1000).toFixed(2) }}
                        </view>
                        <view class="item">{{ item['Apf_Q_Sys(Var)'] == '-' ? '-' : (item['Apf_Q_Sys(Var)'] /
                            1000).toFixed(2) }}
                        </view>
                        <view class="item">{{ item['Apf_S_Sys(VA)'] == '-' ? '-' : (item['Apf_S_Sys(VA)'] /
                            1000).toFixed(2) }}
                        </view>
                        <view class="item">{{ item['Apf_PF_Sys(null)'] || '-' }}</view>
                    </template>
                </view>
            </view>
            <view class="grid-card">
                <view class="grid-card-title">负载侧</view>
                <view class="grid-card-content-5">
                    <view class="item item-title">名称</view>
                    <view class="item item-title">有功功率(kW)</view>
                    <view class="item item-title">无功功率(kVar)</view>
                    <view class="item item-title">视在功率(kVA)</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_P_Load(W)'] == '-' ? '-' : (item['Apf_P_Load(W)'] /
                            1000).toFixed(2) }}
                        </view>
                        <view class="item">{{
                            item['Apf_Q_Load(Var)'] == '-' ? '-' : (item['Apf_Q_Load(Var)'] / 1000).toFixed(2)
                            }}</view>
                        <view class="item">{{ item['Apf_S_Load(VA)'] == '-' ? '-' : (item['Apf_S_Load(VA)'] /
                            1000).toFixed(2) }}
                        </view>
                        <view class="item">{{ item['Apf_PF_Load(null)'] || '-' }}</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_P_Sys(W)':
                            key = '电网侧'
                            break
                        case 'Apf_Q_Sys(Var)':
                            key = '电网侧'
                            break
                        case 'Apf_S_Sys(VA)':
                            key = '电网侧'
                            break
                        case 'Apf_PF_Sys(null)':
                            key = '电网侧'
                            break
                        case 'Apf_P_Load(W)':
                            key = '负载侧'
                            break
                        case 'Apf_Q_Load(Var)':
                            key = '负载侧'
                            break
                        case 'Apf_S_Load(VA)':
                            key = '负载侧'
                            break
                        case 'Apf_PF_Load(null)':
                            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 {}
</style>
