@ledvance/group-ui-biz-bundle 1.0.160 → 1.0.163

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -5,7 +5,7 @@ import { getStyles } from '@ledvance/group-ui-biz-bundle/src/modules/energyConsu
 import {
   useEnergyData
 } from '@ledvance/group-ui-biz-bundle/src/modules/energyConsumption/EnergyConsumptionChart/useEnergyData'
-import React, { useEffect, useMemo } from 'react';
+import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import { ScrollView, StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
 import { useNavigation } from '@react-navigation/core';
 import { useRoute } from '@react-navigation/core';
@@ -25,16 +25,22 @@ import {
   exchangeNumber,
   localeNumber,
   monthFormat,
-  monthFormatShort,
+  monthFormatShort, showDialog,
 } from '@ledvance/base/src/utils/common';
-import {getEnergyGenerationValue, unitDivision, useEnergyConsumption} from './EnergyConsumptionActions';
-import EnergyPopup, { EnergyData } from './component/EnergyModal';
+import {
+  getEnergyGenerationValue,
+  unitDivision,
+  useDynamicPrice,
+  useEnergyConsumption
+} from './EnergyConsumptionActions';
+import EnergyPopup, {EnergyData, EnergyType, calculateAveragePrice, PriceSegment, DynamicEnergyData} from './component/EnergyModal';
 import { carbonDioxideEmission, countryAndRegion } from './co2Data';
 import { EnergyConsumptionDetailProps } from './EnergyConsumptionDetail';
 import { EnergyConsumptionChartProps } from './EnergyConsumptionChart';
 import SegmentControl from '@ledvance/base/src/components/segmentControl';
 import ThemeType from '@ledvance/base/src/config/themeType'
 import { exportEnergyCsv } from "./EnergyConsumptionActions";
+import { SetSegmentedPricesParams } from './SetSegmentedPricesScreen';
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils;
@@ -71,6 +77,7 @@ interface EnergyConsumptionState {
   popupType: PopupType;
   co2Saved: string;
   isSolarMode: boolean
+  pricingType: EnergyType,
   loading: boolean
   collapsed: boolean
 }
@@ -80,6 +87,39 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation();
   const timeZoneCity = useTimeZoneCity();
   const [energyData, setEnergyData] = useEnergyConsumption()
+  const [dynamicData, setDynamicData] = useDynamicPrice()
+  const savedDynamicUnitRef = useRef<string | undefined>(undefined)
+
+  const parsePrice = (dynamicCosts: PriceSegment[], dynamicGenerates: PriceSegment[], fixedModel?: any): string => {
+    const type = fixedModel?.energyType ?? 'fixed'
+    const usingPrice = state.isSolarMode ? (fixedModel?.generatePrice ?? fixedModel?.price) : fixedModel?.price;
+    if (type === 'dynamic') {
+      const usingIntervals = state.isSolarMode ? dynamicGenerates : dynamicCosts;
+      const dynamicPrice = usingIntervals && usingIntervals.length > 0
+          ? String(calculateAveragePrice(usingIntervals))
+          : (usingPrice || state.price);
+      return String(dynamicPrice ?? '0');
+    } else {
+      return String(usingPrice ?? '0');
+    }
+  }
+
+  const initialPrice = useMemo(() => {
+    const type = energyData.energyType ?? 'fixed'
+    const usingPrice = !params.wifiPlugGroup.length ? (energyData.generatePrice ?? energyData.price) : energyData.price;
+    if (type === 'dynamic') {
+      const usingIntervals = !params.wifiPlugGroup.length ? (dynamicData?.generatePrices || []) : (dynamicData?.intervalPrices || []);
+      const dynamicPrice = usingIntervals && usingIntervals.length > 0
+          ? String(calculateAveragePrice(usingIntervals))
+          : usingPrice;
+      // console.log("wayne_check_stateprice initialPrice dynamic", dynamicPrice)
+      return String(dynamicPrice ?? '0');
+    } else {
+      // console.log("wayne_check_stateprice initialPrice usingPrice", usingPrice)
+      return String(usingPrice ?? '0');
+    }
+  }, [energyData, dynamicData, params.wifiPlugGroup.length])
+
   const state = useReactive<EnergyConsumptionState>({
     solarTodayElectricity: '0',
     solarTotalElectricity: '0',
@@ -87,8 +127,9 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
     wifiTotalElectricity: '0',
     solarOverviewList: [],
     wifiOverviewList: [],
-    price: energyData.price,
+    price: initialPrice,
     unit: energyData.unit,
+    pricingType: energyData.energyType ?? "fixed",
     showPopup: false,
     popupType: '',
     co2Saved: '0',
@@ -98,16 +139,21 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
   });
 
   useUpdateEffect(() => {
-    state.price = energyData.price
-    state.unit = energyData.unit
-  }, [JSON.stringify(energyData)])
+    state.pricingType = energyData.energyType ?? 'fixed'
+    state.price = parsePrice(dynamicData?.intervalPrices || [], dynamicData?.generatePrices || [], energyData)
+    // console.log("wayne_check_stateprice useUpdateEffect", state.price)
+    state.unit = state.pricingType === 'dynamic'
+        ? (savedDynamicUnitRef.current ?? energyData.unit)
+        : energyData.unit
+    actions.setPriceAndUnit(state.price, state.unit)
+  }, [JSON.stringify(energyData), JSON.stringify(dynamicData), state.isSolarMode])
 
   const chartHeadline = useMemo(() => {
     const overview = state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList
     const len = overview.length;
     return overview?.length
-      ? `${overview[len - 1].key} - ${overview[0].key}`
-      : '';
+        ? `${overview[len - 1].key} - ${overview[0].key}`
+        : '';
   }, [state.solarOverviewList, state.wifiOverviewList, state.isSolarMode]);
 
   const chartParams = useMemo(() => {
@@ -123,9 +169,11 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
       displayMode: state.isSolarMode ? 'generation' : 'consumption',
       consumptionDeviceIds: params.wifiPlugGroup,
       generationDeviceIds: params.solarPlugGroup,
+      energyType: state.pricingType,
+      dynamicData: dynamicData,
     }
-  }, [backTitle, chartHeadline, state.price, state.unit, params.addEleDpCode, state.isSolarMode, params.wifiPlugGroup, params.solarPlugGroup])
-  
+  }, [backTitle, chartHeadline, state.price, state.unit, params.addEleDpCode, state.isSolarMode, params.wifiPlugGroup, params.solarPlugGroup, state.pricingType, dynamicData])
+
   const { state: chartState, actions } = useEnergyData(chartParams);
   const chartStyles = useMemo(() => getStyles(props.theme), [props.theme]);
 
@@ -142,16 +190,16 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
 
   const getElectricity = async () => {
     const solarPromise = params.solarPlugGroup.map(devId =>
-      getDpResultByMonth(devId, params.addEleDpCode, 'sum').catch(error => ({ error }))
+        getDpResultByMonth(devId, params.addEleDpCode, 'sum').catch(error => ({ error }))
     );
     const solarEnergyGenerationPromise = params.solarPlugGroup.map(devId =>
-      getEnergyGenerationValue(devId)
+        getEnergyGenerationValue(devId)
     );
     const wifiPromise = params.wifiPlugGroup.map(devId =>
-      getDpResultByMonth(devId, params.addEleDpCode, 'sum').catch(error => ({ error }))
+        getDpResultByMonth(devId, params.addEleDpCode, 'sum').catch(error => ({ error }))
     );
     const wifiEnergyGenerationPromise = params.wifiPlugGroup.map(devId =>
-      getEnergyGenerationValue(devId)
+        getEnergyGenerationValue(devId)
     );
     state.loading = true
     const solarRes = await Promise.all(solarPromise);
@@ -225,11 +273,44 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
     }
   }
 
-  const updateEnergyData = (data: EnergyData) => {
-    setEnergyData(data).then()
-    state.price = data.price;
-    state.unit = data.unit;
-    actions.setPriceAndUnit(data.price, data.unit)
+  const showAlerDialog = useCallback((content: string) => {
+    showDialog({
+      method: 'alert',
+      title: I18n.getLang('title_tips'),
+      subTitle: content,
+      onConfirm: async (_, { close }) => {
+        close()
+      }
+    })
+  }, [])
+  const updateEnergyData = async (data: EnergyData): Promise<boolean> => {
+    const internationalPrice = exchangeNumber(data.price)
+    const newEnergyData = {
+      ...energyData,
+      unit: data.unit,
+      energyType: 'fixed',
+      [state.isSolarMode ? 'generatePrice' : 'price']: internationalPrice,
+    }
+    state.loading = true
+    try {
+      const result = await setEnergyData(newEnergyData)
+      if (!result?.success) {
+        console.warn('Failed to update fixed energy price', result)
+        showAlerDialog(I18n.getLang('common_server_api_error'))
+        return false
+      }
+      state.price = internationalPrice || '0'
+      savedDynamicUnitRef.current = undefined
+      state.unit = data.unit
+      state.pricingType = 'fixed'
+      actions.setPriceAndUnit(state.price, data.unit)
+      return true
+    } catch (error) {
+      console.error('Failed to update fixed energy price', error)
+      return false
+    } finally {
+      state.loading = false
+    }
   };
 
   const backTitle = useMemo(() => {
@@ -306,300 +387,388 @@ const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
 
   const ConsumedEnergyItem = (props: { value: number; unit: string }) => {
     return (
-      <View style={styles.subContent}>
-        <Text style={styles.valueText}>{props.value || 0}</Text>
-        <Spacer height={cx(4)} />
-        <Text style={styles.titleText}>{unitDivision(props.unit)[0]}</Text>
-        <Text style={styles.titleText}>{unitDivision(props.unit)[1]}</Text>
-      </View>
+        <View style={styles.subContent}>
+          <Text style={styles.valueText}>{props.value || 0}</Text>
+          <Spacer height={cx(4)} />
+          <Text style={styles.titleText}>{unitDivision(props.unit)[0]}</Text>
+          <Text style={styles.titleText}>{unitDivision(props.unit)[1]}</Text>
+        </View>
     );
   };
 
   return (
-    <Page
-      style={{ position: 'relative' }}
-      backText={backTitle}
-      headlineText={I18n.getLang(
-        state.isSolarMode
-          ? 'sockets_headline_power'
-          : 'consumption_data_annual_bar_chart_system_back_text'
-      )}
-      headlineIcon={(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).length ? res.download_icon : undefined}
-      onHeadlineIconClick={() => {
-        const headers = [I18n.getLang('date'), `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')} (kWh)`, `Price(${state.unit})`]
-        const values = (state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).map(item => [item.key, item.value, (Number(state.price) * Number(item.value)).toFixed(2)])
-        exportEnergyCsv(headers, values)
-      }}
-      showGreenery={state.isSolarMode}
-      greeneryIcon={res.energy_consumption_greenery}
-      headlineTopContent={
-        (params.solarPlugGroup.length && params.wifiPlugGroup.length) ?
-          <View style={{ marginBottom: cx(5) }}>
-            <SegmentControl
-              title1={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
-              title2={I18n.getLang('sockets_headline_power')}
-              isFirst={!state.isSolarMode}
-              tabStyle={{paddingHorizontal: cx(15)}}
-              setIsFirst={(v) => {
-                state.isSolarMode = !v
-                actions.setDisplayMode(!v ? 'generation' : 'consumption')
-              }} />
-          </View> : undefined
-      }
-      loading={state.loading}
-    >
-      <ScrollView nestedScrollEnabled={true}>
-        <View>
-          {/* tip */}
-          <Spacer height={cx(15)} />
-          <View style={styles.showTip}>
-            <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor, }}>
-              {I18n.getLang(
-                state.isSolarMode
-                  ? 'generation_data_description_text'
-                  : 'consumption_data_description_text'
-              )}
-            </Text>
-          </View>
-          <Spacer />
-          <Card
-            style={styles.cardContainer}
-            onPress={() => {
-              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
-                backTitle,
-                headlineText: chartHeadline,
-                chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList,
-                price: state.price,
-                unit: state.unit,
-                addEleDpCode: params.addEleDpCode,
-                date: (new Date()).getFullYear().toString(),
-                deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
-                displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
-                consumptionDeviceIds: params.wifiPlugGroup,
-                generationDeviceIds: params.solarPlugGroup,
-              } as EnergyConsumptionChartProps)
-            }}
-          >
-            <View style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-            }}>
-              <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
-              <Image
-                source={{ uri: res.energy_consumption_chart}}
-                style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
-              />
-            </View>
+      <Page
+          style={{ position: 'relative' }}
+          backText={backTitle}
+          headlineText={I18n.getLang(
+              state.isSolarMode
+                  ? 'sockets_headline_power'
+                  : 'consumption_data_annual_bar_chart_system_back_text'
+          )}
+          headlineIcon={(state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).length ? res.download_icon : undefined}
+          onHeadlineIconClick={() => {
+            const headers = [I18n.getLang('date'), `${I18n.getLang('consumption_data_annual_bar_chart_system_back_text')} (kWh)`, `Price(${state.unit})`]
+            const values = (state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList).map(item => [item.key, item.value, (Number(state.price) * Number(item.value)).toFixed(2)])
+            exportEnergyCsv(headers, values)
+          }}
+          showGreenery={state.isSolarMode}
+          greeneryIcon={res.energy_consumption_greenery}
+          headlineTopContent={
+            (params.solarPlugGroup.length && params.wifiPlugGroup.length) ?
+                <View style={{ marginBottom: cx(5) }}>
+                  <SegmentControl
+                      marginHorizontal={cx(0)}
+                      title1={I18n.getLang('consumption_data_annual_bar_chart_system_back_text')}
+                      title2={I18n.getLang('sockets_headline_power')}
+                      isFirst={!state.isSolarMode}
+                      tabStyle={{paddingHorizontal: cx(15)}}
+                      setIsFirst={(v) => {
+                        state.isSolarMode = !v
+                        actions.setDisplayMode(!v ? 'generation' : 'consumption')
+                      }} />
+                </View> : undefined
+          }
+          loading={state.loading}
+      >
+        <ScrollView nestedScrollEnabled={true}>
+          <View>
+            {/* tip */}
             <Spacer height={cx(15)} />
-            <View style={styles.consumedEnergyContent}>
-              <ConsumedEnergyItem
-                value={state.isSolarMode ? params.solarPowerSum : params.wifiPowerSum}
-                unit={I18n.getLang('consumption_data_field2_value_text1')}
-              />
-              <ConsumedEnergyItem
-                value={state.isSolarMode ? params.solarCurrentSum : params.wifiCurrentSum}
-                unit={I18n.getLang('consumption_data_field2_value_text2')}
-              />
+            <View style={styles.showTip}>
+              <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor, }}>
+                {I18n.getLang(
+                    state.isSolarMode
+                        ? 'generation_data_description_text'
+                        : 'consumption_data_description_text'
+                )}
+              </Text>
             </View>
-          </Card>
-          <Spacer />
-          {/* 365 day */}
-          <Card style={styles.cardContainer}>
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View>
-                <View style={{height: cx(35), justifyContent: 'center'}}>
-                  <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
-                </View>
-                <View style={{height: cx(35), justifyContent: 'center'}}>
-                  <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
-                </View>
+            <Spacer />
+            <Card
+                style={styles.cardContainer}
+                onPress={() => {
+                  navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
+                    backTitle,
+                    headlineText: chartHeadline,
+                    chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList,
+                    price: state.price,
+                    unit: state.unit,
+                    addEleDpCode: params.addEleDpCode,
+                    date: (new Date()).getFullYear().toString(),
+                    deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                    displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
+                    consumptionDeviceIds: params.wifiPlugGroup,
+                    generationDeviceIds: params.solarPlugGroup,
+                  } as EnergyConsumptionChartProps)
+                }}
+            >
+              <View style={{
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+                <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field2_headline_text')}</Text>
+                <Image
+                    source={{ uri: res.energy_consumption_chart}}
+                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8) }}
+                />
+              </View>
+              <Spacer height={cx(15)} />
+              <View style={styles.consumedEnergyContent}>
+                <ConsumedEnergyItem
+                    value={state.isSolarMode ? params.solarPowerSum : params.wifiPowerSum}
+                    unit={I18n.getLang('consumption_data_field2_value_text1')}
+                />
+                <ConsumedEnergyItem
+                    value={state.isSolarMode ? params.solarCurrentSum : params.wifiCurrentSum}
+                    unit={I18n.getLang('consumption_data_field2_value_text2')}
+                />
               </View>
-              <View>
-                <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
-                  <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>
-                    {localeNumber(state.isSolarMode ? state.solarTodayElectricity : state.wifiTodayElectricity)}
-                  </Text>
-                  <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+            </Card>
+            <Spacer />
+            {/* pricing radio button*/}
+            <View style={{ marginBottom: cx(5) }}>
+              <SegmentControl
+                  marginHorizontal={cx(24)}
+                  title1={I18n.getLang('consumption_energy_type_fixed')}
+                  title2={I18n.getLang('consumption_energy_type_dynamic')}
+                  isFirst={state.pricingType === 'fixed'}
+                  tabStyle={{paddingHorizontal: cx(15)}}
+                  setIsFirst={(v) => {
+                    const value = v ? 'fixed' : 'dynamic'
+                    const fixedModel = energyData ?? {
+                      price: '0',
+                      unit: '$',
+                      energyType: 'fixed',
+                      generatePrice: '0',
+                    }
+                    state.loading = true
+                    setEnergyData({
+                      ...fixedModel,
+                      energyType: value,
+                    }).then((res) => {
+                      state.loading = false
+                      if (res && res.success) {
+                        state.pricingType = value
+                        if (value === 'fixed') {
+                          savedDynamicUnitRef.current = undefined
+                          state.price = state.isSolarMode ? (fixedModel.generatePrice || fixedModel.price) : fixedModel.price
+                        } else {
+                          // console.log("check isSolar -> ", state.isSolarMode)
+                          // console.log("wayne_check_stateprice segment ->", JSON.stringify(dynamicData))
+                          const segments = state.isSolarMode ? (dynamicData?.generatePrices || []) : (dynamicData?.intervalPrices || [])
+                          state.price = String(calculateAveragePrice(segments))
+                        }
+                        actions.setPriceAndUnit(state.price, state.unit)
+                      }
+                    })
+                  }} />
+            </View>
+            {/* 365 day */}
+            <Card style={styles.cardContainer}>
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <View>
+                  <View style={{height: cx(35), justifyContent: 'center'}}>
+                    <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field1_headline_text')}</Text>
+                  </View>
+                  <View style={{height: cx(35), justifyContent: 'center'}}>
+                    <Text style={styles.cardTitle}>{I18n.getLang('consumption_data_field3_headline_text')}</Text>
+                  </View>
                 </View>
-                <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
-                  <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>
-                    {localeNumber(state.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity)}
-                  </Text>
-                  <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+                <View>
+                  <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                    <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>
+                      {localeNumber(state.isSolarMode ? state.solarTodayElectricity : state.wifiTodayElectricity)}
+                    </Text>
+                    <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+                  </View>
+                  <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: cx(10) }}>
+                    <Text style={[styles.consumptionNum, { fontSize: cx(30), marginRight: cx(8) }]}>
+                      {localeNumber(state.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity)}
+                    </Text>
+                    <Text style={[styles.consumptionNum, { fontSize: cx(20), marginBottom: cx(4) }]}>kWh</Text>
+                  </View>
                 </View>
               </View>
-            </View>
-            <Spacer />
-            {/* CO2 */}
-            {state.isSolarMode && (
-              <>
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                  <View style={styles.priceBg}>
-                    <Image
+              <Spacer />
+              {/* CO2 */}
+              {state.isSolarMode && (
+                  <>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                      <View style={styles.priceBg}>
+                        <Image
+                            source={{ uri: res.energy_consumption_cash}}
+                            resizeMode="contain"
+                            style={{
+                              height: cx(20),
+                              width: cx(20),
+                              tintColor: props.theme?.button.primary,
+                            }}
+                        />
+                      </View>
+                      <View style={styles.priceNum}>
+                        <View style={{ flexDirection: 'row' }}>
+                          <Text
+                              style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}
+                          >
+                            {I18n.getLang('consumption_data_field3_co2_topic_text')}
+                          </Text>
+                          <TouchableOpacity
+                              onPress={() => {
+                                state.showPopup = true;
+                                state.popupType = 'co2';
+                              }}
+                          >
+                            <Image
+                                source={{ uri: res.co2_icon}}
+                                resizeMode="contain"
+                                style={{
+                                  height: cx(20),
+                                  width: cx(20),
+                                  tintColor: props.theme?.button.primary,
+                                }}
+                            />
+                          </TouchableOpacity>
+                        </View>
+                        <Text
+                            style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}
+                        >{`${state.co2Saved} kg`}</Text>
+                      </View>
+                    </View>
+                    <Spacer height={cx(10)} />
+                  </>
+              )}
+              {/* money */}
+              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                <View style={styles.priceBg}>
+                  <Image
                       source={{ uri: res.energy_consumption_cash}}
                       resizeMode="contain"
-                      style={{
-                        height: cx(20),
-                        width: cx(20),
-                        tintColor: props.theme?.button.primary,
-                      }}
-                    />
-                  </View>
+                      style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
+                  />
+                </View>
+                <View>
                   <View style={styles.priceNum}>
-                    <View style={{ flexDirection: 'row' }}>
-                      <Text
-                        style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}
-                      >
-                        {I18n.getLang('consumption_data_field3_co2_topic_text')}
+                    <Text style={{ color: props.theme?.global.secondFontColor }}>
+                      {I18n.getLang(
+                          state.isSolarMode
+                              ? 'consumption_data_monthly_overview_field1_text2'
+                              : 'consumption_data_field3_value_text2'
+                      )}
+                    </Text>
+                    <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>
+                      {state.price
+                          ? `${localeNumber(Number(state.price) * Number(state.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity), 2)} ${state.unit
+                          }`
+                          : '-'}
+                    </Text>
+                  </View>
+                  {state.pricingType === 'fixed' &&<TouchableOpacity
+                      onPress={() => {
+                        state.showPopup = true;
+                        state.popupType = 'money';
+                      }}
+                  >
+                    <View style={styles.priceButton}>
+                      <Text style={{ color: props.theme?.button.fontColor }}>
+                        {I18n.getLang('consumption_data_field3_button_text')}
                       </Text>
+                    </View>
+                  </TouchableOpacity>
+                  }
+                  {state.pricingType === 'dynamic' && (
                       <TouchableOpacity
-                        onPress={() => {
-                          state.showPopup = true;
-                          state.popupType = 'co2';
-                        }}
-                      >
-                        <Image
-                          source={{ uri: res.co2_icon}}
-                          resizeMode="contain"
-                          style={{
-                            height: cx(20),
-                            width: cx(20),
-                            tintColor: props.theme?.button.primary,
+                          onPress={() => {
+                            navigation.navigate(ui_biz_routerKey.group_ui_biz_set_segmented_prices, {
+                              backTitle: backTitle,
+                              dynamicData: dynamicData ?? {
+                                intervalPrices: [],
+                                generatePrices: [],
+                              },
+                              priceUnit: state.unit,
+                              isGenerate: state.isSolarMode,
+                              onSetPriceSements: async (segments: PriceSegment[], currency: string): Promise<boolean> => {
+                                console.log("onSetPriceSements ", JSON.stringify(segments), currency)
+                                const fixedModel = energyData ?? {
+                                  price: '0',
+                                  unit: '$',
+                                  energyType: 'fixed',
+                                  generatePrice: '0',
+                                }
+                                const dynamicModel = {
+                                  ...dynamicData,
+                                  [state.isSolarMode ? 'generatePrices' : 'intervalPrices']: segments
+                                }
+                                const [fixedRes, dynamicRes] = await Promise.all([
+                                  setEnergyData({ ...fixedModel, energyType: 'dynamic', unit: currency }),
+                                  setDynamicData(dynamicModel)
+                                ])
+                                const isDynamicSuccess = dynamicRes && dynamicRes.success
+                                const isRegularSuccess = fixedRes && fixedRes.success
+                                const isAllSuccess = isDynamicSuccess && isRegularSuccess
+                                if (isAllSuccess) {
+                                  savedDynamicUnitRef.current = currency
+                                  state.price = String(calculateAveragePrice(segments)) // 价格
+                                  // console.log("wayne_check_stateprice onPress isAllSucess", state.price)
+                                  state.pricingType = 'dynamic'
+                                  state.unit = currency
+                                  actions.setPriceAndUnit(state.price, currency)
+                                }
+                                return !!isAllSuccess
+                              }
+                            } as SetSegmentedPricesParams)
                           }}
-                        />
+                      >
+                        <View style={styles.priceButton}>
+                          <Text style={{ color: props.theme?.button.fontColor }}>
+                            {I18n.getLang('consumption_data_field_dynamic_money')}
+                          </Text>
+                        </View>
                       </TouchableOpacity>
-                    </View>
-                    <Text
-                      style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}
-                    >{`${state.co2Saved} kg`}</Text>
-                  </View>
-                </View>
-                <Spacer height={cx(10)} />
-              </>
-            )}
-            {/* money */}
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <View style={styles.priceBg}>
-                <Image
-                  source={{ uri: res.energy_consumption_cash}}
-                  resizeMode="contain"
-                  style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
-                />
-              </View>
-              <View>
-                <View style={styles.priceNum}>
-                  <Text style={{ color: props.theme?.global.secondFontColor }}>
-                    {I18n.getLang(
-                      state.isSolarMode
-                        ? 'consumption_data_monthly_overview_field1_text2'
-                        : 'consumption_data_field3_value_text2'
-                    )}
-                  </Text>
-                  <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>
-                    {state.price
-                      ? `${localeNumber(Number(state.price) * Number(state.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity), 2)} ${state.unit
-                      }`
-                      : '-'}
-                  </Text>
+                  )}
+
                 </View>
-                <TouchableOpacity
-                  onPress={() => {
-                    state.showPopup = true;
-                    state.popupType = 'money';
-                  }}
-                >
-                  <View style={styles.priceButton}>
-                    <Text style={{ color: props.theme?.button.fontColor }}>
-                      {I18n.getLang('consumption_data_field3_button_text')}
-                    </Text>
-                  </View>
-                </TouchableOpacity>
               </View>
+            </Card>
+            <Spacer height={cx(30)} />
+            <View style={{ marginHorizontal: cx(24) }}>
+              <ChartSection
+                  state={chartState}
+                  actions={actions}
+                  params={chartParams}
+                  styles={chartStyles}
+                  theme={props.theme}
+                  chartHeight={cx(400)}
+              />
             </View>
-          </Card>
-          <Spacer height={cx(30)} />
-          <View style={{ marginHorizontal: cx(24) }}>
-            <ChartSection
-              state={chartState}
-              actions={actions}
-              params={chartParams}
-              styles={chartStyles}
-              theme={props.theme}
-              chartHeight={cx(400)}
+            <Spacer height={cx(30)} />
+            {/* Annual overview */}
+            <OverView
+                style={{marginHorizontal: cx(24)}}
+                headlineText={I18n.getLang('consumption_data_field4_headline_text')}
+                headlineClick={() => {
+                  navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
+                    backTitle,
+                    headlineText: chartHeadline,
+                    chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList,
+                    price: state.price,
+                    unit: state.unit,
+                    addEleDpCode: params.addEleDpCode,
+                    date: (new Date()).getFullYear().toString(),
+                    deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                    displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
+                    consumptionDeviceIds: params.wifiPlugGroup,
+                    generationDeviceIds: params.solarPlugGroup,
+                  } as EnergyConsumptionChartProps)
+                }}
+                overviewItemClick={(item) => {
+                  navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_detail, {
+                    backTitle,
+                    addEleDpCode: params.addEleDpCode,
+                    curMonth: item,
+                    price: state.price,
+                    unit: state.unit,
+                    isSolarMode: state.isSolarMode,
+                    deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
+                    displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
+                    consumptionDeviceIds: params.wifiPlugGroup,
+                    generationDeviceIds: params.solarPlugGroup,
+                    updateEnergyData
+                  } as EnergyConsumptionDetailProps)
+                }}
+                overViewList={state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList}
+            />
+            {/* modal */}
+            <EnergyPopup
+                visible={!!(state.popupType && state.showPopup)}
+                popupType={state.popupType || 'co2'}
+                title={
+                  state.popupType === 'co2'
+                      ? I18n.getLang('consumption_data_field3_co2_topic_text')
+                      : ''
+                }
+                cancelText={state.popupType === 'co2' ? '' : I18n.getLang('auto_scan_system_cancel')}
+                confirmText={I18n.getLang(
+                    state.popupType === 'co2'
+                        ? 'home_screen_home_dialog_yes_con'
+                        : 'auto_scan_system_wifi_confirm'
+                )}
+                energyData={{ price: state.price, unit: state.unit }}
+                onConfirm={async popupEnergyData => {
+                  state.popupType = '';
+                  state.showPopup = false;
+                  if (popupEnergyData) {
+                    await updateEnergyData(popupEnergyData)
+                  }
+                }}
+                onCancel={() => {
+                  state.popupType = '';
+                  state.showPopup = false;
+                }}
             />
           </View>
-          <Spacer height={cx(30)} />
-          {/* Annual overview */}
-          <OverView
-            style={{marginHorizontal: cx(24)}}
-            headlineText={I18n.getLang('consumption_data_field4_headline_text')}
-            headlineClick={() => {
-              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_chart, {
-                backTitle,
-                headlineText: chartHeadline,
-                chartData: state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList,
-                price: state.price,
-                unit: state.unit,
-                addEleDpCode: params.addEleDpCode,
-                date: (new Date()).getFullYear().toString(),
-                deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
-                displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
-                consumptionDeviceIds: params.wifiPlugGroup,
-                generationDeviceIds: params.solarPlugGroup,
-              } as EnergyConsumptionChartProps)
-            }}
-            overviewItemClick={(item) => {
-              navigation.navigate(ui_biz_routerKey.group_ui_biz_energy_consumption_detail, {
-                backTitle,
-                addEleDpCode: params.addEleDpCode,
-                curMonth: item,
-                price: state.price,
-                unit: state.unit,
-                isSolarMode: state.isSolarMode,
-                deviceIdGroup: state.isSolarMode ? params.solarPlugGroup : params.wifiPlugGroup,
-                displayMode: (params.wifiPlugGroup.length && params.solarPlugGroup.length) ? 'both' : (params.wifiPlugGroup.length ? 'consumption' : 'generation'),
-                consumptionDeviceIds: params.wifiPlugGroup,
-                generationDeviceIds: params.solarPlugGroup,
-                updateEnergyData
-              } as EnergyConsumptionDetailProps)
-            }}
-            overViewList={state.isSolarMode ? state.solarOverviewList : state.wifiOverviewList}
-          />
-          {/* modal */}
-          <EnergyPopup
-            visible={!!(state.popupType && state.showPopup)}
-            popupType={state.popupType || 'co2'}
-            title={
-              state.popupType === 'co2'
-                ? I18n.getLang('consumption_data_field3_co2_topic_text')
-                : ''
-            }
-            cancelText={state.popupType === 'co2' ? '' : I18n.getLang('auto_scan_system_cancel')}
-            confirmText={I18n.getLang(
-              state.popupType === 'co2'
-                ? 'home_screen_home_dialog_yes_con'
-                : 'auto_scan_system_wifi_confirm'
-            )}
-            energyData={{ price: state.price, unit: state.unit }}
-            onConfirm={energyData => {
-              state.popupType = '';
-              state.showPopup = false;
-              if (energyData) {
-                updateEnergyData({
-                  ...energyData,
-                  price: exchangeNumber(energyData.price),
-                });
-              }
-            }}
-            onCancel={() => {
-              state.popupType = '';
-              state.showPopup = false;
-            }}
-          />
-        </View>
-      </ScrollView>
-    </Page>
+        </ScrollView>
+      </Page>
   );
 };