<template>
  <view>
    <zero-loading v-if="loading"></zero-loading>
    <view v-else class="earnings-warp">
      <view class="head-bg">
        <view class="back" @click="toback">
          <u-icon name="nav-back" color="#009C7F" size="44"></u-icon>
        </view>

        <view class="report-title">
          <view class="value">
            {{ totalData.stationName }}
          </view>
        </view>
        <view class="time-select" @click="changeMonth">
          <image
            src="/static/aidex/images/time.png"
            style="width: 120rpx; height: 108rpx"
          >
          </image>
          <view class="month">
            {{ month }}
          </view>
          <view class="year">
            {{ year }}
          </view>
        </view>
      </view>
      <view class="power-generation">
        <Section :title="$t('homePage.home.powerGenerationStatus')" />
        <view class="power-generation-detail">

			<view class="value-box">
				<view class="icon zjry">

				</view>
				<view class="title">
					{{ $t('homePage.home.currentMonthlyPowerGeneration') }}
				</view>
				<view class="value">
					{{ totalData.monthReleaseElec | isNull }}
				</view>
				<view class="unit">
					kWh
				</view>
			</view>

			<view class="value-box">
				<view class="icon byzc">

				</view>
				<view class="title">
					{{ $t('homePage.home.cumulativePowerGeneration') }}
				</view>
				<view class="value">
					{{ totalData.totalReleaseElec | isNull }}
				</view>
				<view class="unit">
					kWh
				</view>
			</view>


			<view class="value-box">
				<view class="icon byzf">

				</view>
				<view class="title">
					{{ $t('homePage.home.ratedPowernokw') }}
				</view>
				<view class="value">
					{{ totalData.pvPower | isNull }}
				</view>
				<view class="unit">
					kW
				</view>
			</view>


<!--          <view class="value-box">
            <view class="icon yxtzhl"> </view>
            <view class="title">
              {{ $t("homePage.earning.monthEff") }}
            </view>
            <view class="value">
              {{ totalData.monConvRate | isNull }}
            </view>
            <view class="unit"> % </view>
          </view>
          <view class="value-box">
            <view class="icon ljcd"> </view>
            <view class="title">
              {{ $t("homePage.earning.chargeVol") }}
            </view>
            <view class="value">
              {{ totalData.totalCharge | isNull }}
            </view>
            <view class="unit"> kWh </view>
          </view>
          <view class="value-box">
            <view class="icon ljcf"> </view>
            <view class="title">
              {{ $t("homePage.earning.dischargeVol") }}
            </view>
            <view class="value">
              {{ totalData.totalDischarge | isNull }}
            </view>
            <view class="unit"> kWh </view>
          </view>
          <view class="value-box">
            <view class="icon zxtzhl"> </view>
            <view class="title">
              {{ $t("homePage.earning.totalEff") }}
            </view>
            <view class="value">
              {{ totalData.totalConvRate | isNull }}
            </view>
            <view class="unit"> % </view>
          </view> -->
        </view>
      </view>
	 <view class="month-power">
        <Section :title="$t('homePage.home.projectMonthlyPower')" />
        <view class="power-generation-detail">
             <run-chart :time="time" />
        </view>
      </view>
      <view class="month-power">
        <Section
          :title="$t('homePage.earning.projectRevenue')"
          style="margin-bottom: 25rpx"
        />
        <view class="value-box">
          <view class="left">
            <view class="power-detail">
              <view class="left-value">
                <view class="value">
                  {{ totalData.monthIncone | isNull }}
                </view>
                <view class="title">
                  {{ $t("homePage.home.monthlyIncome") }}
                </view>
              </view>
              <view class="right-value t-fdzl"> </view>
            </view>

            <!-- <view class="power-detail"
              style="margin: 0 !important; padding-bottom: 0 !important" >
              <view class="left-value">
                <view class="value">
                  {{ totalData.totalDisChargePrice | isNull }}
                </view>
                <view class="title">
                  {{ $t("homePage.home.enmonthTotalDisChargePrice") }}
                </view>
              </view>
              <view class="right-value t-swdl"> </view>
            </view> -->
          </view>
          <view class="left">
            <view class="power-detail">
				<view class="left-value">
					<view class="value">
					{{ totalData.income | isNull }}
					</view>
				  <view class="title">
					{{ $t("homePage.home.totalRevenue") }}
				  </view>
				</view>
				<!-- <view class="right-value t-fdzl"> </view> -->
				<view class="right-value bg"> </view>
              <!-- <view class="value">
                {{ totalData.income | isNull }}
              </view>
              <view class="title">
                {{ $t("homePage.home.totalRevenue") }}
              </view>
              <view class="bg"> </view> -->
            </view>
          </view>
        </view>
      </view>
<!--      <view class="report-detail">
        <Section
          :title="$t('homePage.earning.earningsDetail')"
          style="margin-bottom: 30rpx"
        />

        <view class="power-report" v-if="chargeArr.length">
          <view class="title">
            {{ $t("homePage.earning.charge") }}
          </view>
          <view v-for="(item, index) in chargeArr" :key="index">
            <view class="value-box">
              <view class="checked">
                <view class="name">
                  {{ item.rateType | isNull }}
                </view>
              </view>
            </view>
            <view class="box">
              <view class="value">
                <text class="name">{{ $t("homePage.earning.ele") }}</text>
                <text class="num">{{ item.elec | isNull }}</text>
              </view>

              <view class="value">
                <text class="name">{{ $t("homePage.earning.expend") }}:</text>
                <text class="num">{{ item.digital | isNull }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="power-report" v-else>
          <view style="font-size: 24rpx; width: 100%; text-align: center">
            {{ $t("homePage.earning.noChargeData") }}
          </view>
        </view>

        <view class="power-report" v-if="dischargeArr.length">
          <view class="title">
            {{ $t("homePage.earning.disCharge") }}
          </view>
          <view v-for="(item, index) in dischargeArr" :key="index">
            <view class="value-box">
              <view class="checked">
                <view class="name">
                  {{ item.rateType | isNull }}
                </view>
              </view>
            </view>
            <view class="box">
              <view class="value">
                <text class="name">{{ $t("homePage.earning.ele") }}:</text>
                <text class="num">{{ item.elec | isNull }}</text>
              </view>
              <view class="value">
                <text class="name">{{ $t("homePage.earning.earnings") }}:</text>
                <text class="num">{{ item.digital | isNull }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="power-report" v-else>
          <view style="font-size: 24rpx; width: 100%; text-align: center">
            {{ $t("homePage.earning.noDisChargeData") }}
          </view>
        </view>
      </view> -->

      <u-picker
        v-model="TimeShow"
        mode="time"
        :params="Timeparams"
        @confirm="confirmMonth"
      ></u-picker>
    </view>
  </view>
</template>
<script>
import Section from "@/components/section/index.vue";
import runChart from "./components/runChart/index.vue";
export default {
  components: {
    Section,
    runChart,
  },
  data() {
    return {
      active1: 0,
      active2: 1,
      TimeShow: false,
      Timeparams: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      year: null,
      month: null,
      stationId: null,
      time: null,
      totalData: {},
      chargeArr: [],
      dischargeArr: [],
      loading: false,
    };
  },
  computed: {
    currentStation() {
      return this.vuex_currentStation;
    },
  },
  watch: {
    currentStation: {
      handler(val) {
        this.stationId = val.id;
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    var myDate = new Date();
    var tYear = myDate.getFullYear();

    var tMonth = myDate.getMonth() + 1;
    if (tMonth.toString().length == 1) {
      tMonth = "0" + tMonth;
    }
    this.year = tYear;
    this.month = tMonth;
    this.time = this.year + "-" + this.month + "";
    this.getData();
  },
  methods: {
    toback() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async getData() {
      try {
        this.loading = true;
        const res = await this.$u.api.enrnings.GetTotal({
          stationId: this.stationId,
          time: this.time,
        });
        this.totalData = res.data;

        this.chargeArr = [];
        this.dischargeArr = [];
        if (res.data.list.length) {
          res.data.list.forEach((el) => {
            if (+el.type === 0) {
              this.chargeArr.push(el);
            }
            if (+el.type === 1) {
              this.dischargeArr.push(el);
            }
          });
        } else {
          this.chargeArr = [];
          this.dischargeArr = [];
        }
      } catch (e) {
        //TODO handle the exception
      } finally {
        this.loading = false;
      }
    },
    changeActive1(val) {
      this.active1 = val;
    },
    changeActive2(val) {
      this.active2 = val;
    },
    changeMonth() {
      this.TimeShow = true;
    },
    confirmMonth(val) {
      this.time = val.year + "-" + val.month + "";
      this.year = val.year;
      this.month = val.month;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.earnings-warp {
  // height: calc(120% + 210rpx)!important;
  height: 100% !important;
  background-color: #f5f5f5;
  overflow: auto;

  .cell-box {
    width: 100%;
    height: 35rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;

    .title {
      color: rgba(102, 102, 102, 1) !important;
      font-size: 24rpx;
    }

    .value {
      color: rgba(44, 50, 49, 1) !important;
      font-size: 24rpx;
    }
  }

  .head-bg {
    height: 360rpx;
    background: linear-gradient(45deg, #ffe3c8, #07976e);
    display: flex;

    .back {
      padding-top: 100rpx;
      padding-left: 30rpx;
    }

    .report-title {
      padding-top: 100rpx;
      padding-left: 20rpx;
      width: 464rpx;
      font-weight: 700;
      color: rgba(0, 156, 119, 1);
      font-size: 36rpx;
      display: flex;
    }

    .time-select {
      margin-right: 30rpx;
      margin-left: auto;
      margin-top: 140rpx;
      position: relative;
      width: 120rpx;
      height: 108rpx;

      image {
        width: 120rpx;
        height: 108rpx;
      }

      .month {
        position: absolute;
        top: 10rpx;
        left: 38rpx;
        right: 38rpx;
        padding-top: 10rpx;
        font-size: 40rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

      .year {
        position: absolute;
        bottom: 10rpx;
        left: 38rpx;
        right: 38rpx;
        font-size: 24rpx;
        font-weight: 700;
        color: rgba(255, 255, 255, 1);
      }
    }
  }

  .power-generation {
    height: 380rpx;
    background-color: #ffffff;
    box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
    margin-left: 30rpx;
    margin-right: 30rpx;
    border-radius: 8rpx;
    margin-top: -40rpx;
    padding: 20rpx;

    .power-generation-detail {
      width: 100%;

      .value-box {
        padding: 20rpx;
        margin-top: 16rpx;
        border-radius: 8rpx;
        background: linear-gradient(
          45deg,
          rgba(178, 223, 138, 0.2),
          rgba(0, 156, 119, 0.3)
        );
        width: 100%;
        height: 80rpx;
        display: flex;
        align-items: center;

        .icon {
          width: 48rpx;
          height: 48rpx;
          border-radius: 8rpx;
          background-color: rgba(255, 255, 255, 1);
          box-shadow: 0px 0rpx 10rpx rgba(0, 0, 10, 0.1);
        }

        .zjry {
          background-image: url("/static/aidex/images/sy-zjrl.png");
          background-size: cover;
        }

        .byzc {
          background-image: url("/static/aidex/images/sy-byzc.png");
          background-size: cover;
        }

        .byzf {
          background-image: url("/static/aidex/images/sy-byzf.png");
          background-size: cover;
        }

        .yxtzhl {
          background-image: url("/static/aidex/images/sy-yxtzhl.png");
          background-size: cover;
        }

        .ljcd {
          background-image: url("/static/aidex/images/sy-ljc.png");
          background-size: cover;
        }

        .ljcf {
          background-image: url("/static/aidex/images/sy-ljf.png");
          background-size: cover;
        }

        .zxtzhl {
          background-image: url("/static/aidex/images/sy-zxtzhl.png");
          background-size: cover;
        }

        .title {
          font-size: 28rpx;
          color: rgba(44, 50, 49, 1);
          padding-left: 10rpx;
        }

        .value {
          margin-left: auto;
          font-size: 36rpx;
          font-weight: 700;
          padding-right: 10rpx;
          color: rgba(0, 156, 119, 1);
        }

        .unit {
          min-width: 36rpx;
          font-size: 18rpx;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }

  .report-detail {
    padding: 20rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    background-color: #ffffff;
    margin-top: 30rpx;
    box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
    border-radius: 8rpx;

    .value-box {
      width: 100%;
      height: 35rpx;
      display: flex;

      .checked {
        background-image: url("/static/aidex/images/checked.png");
        background-size: cover;
        width: 100rpx;
        height: 35rpx;
        margin-bottom: 2rpx;

        .name {
          text-align: center;
          font-weight: 400;
          font-size: 20rpx;
          color: rgba(255, 255, 255, 1);
        }
      }
    }

    .box {
      width: 100%;
      display: flex;
      margin-bottom: 5rpx;

      .value {
        display: inline-block;
        flex: 1;
        color: #000;

        .name {
          font-size: 24rpx;
          color: rgba(102, 102, 102, 1);
        }

        .num {
          padding-left: 10rpx;
        }

        .value {
          font-size: 24rpx;
          color: rgba(44, 50, 49, 1);
        }
      }
    }

    .power-report {
      width: 100%;

      border-top: 1px solid #93d5c5;
      margin-top: 30rpx;
      background: linear-gradient(
        rgba(0, 156, 119, 0.05),
        rgba(0, 156, 119, 0)
      );
      margin-bottom: 34rpx;
      padding-top: 12rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;

      .title {
        color: rgba(0, 0, 0, 1);
        font-size: 24rpx;
      }

      .botton {
        width: 100%;
        height: 36rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16rpx;
        margin-bottom: 16rpx;

        .check {
          background-image: url("/static/aidex/images/check.png");
          background-size: cover;
          width: 100rpx;
          height: 35rpx;

          .name {
            text-align: center;
            font-weight: 400;
            font-size: 20rpx;
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }

  .month-power {
    height: 500rpx;
    background-color: #ffffff;
    box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.1);
    margin-left: 30rpx;
    margin-right: 30rpx;
    border-radius: 8rpx;
    margin-top: 30rpx;
    padding: 20rpx;

    .value-box {
      width: 100%;
      height: 380rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .left {
        width: 50%;
        height: 100%;
        padding: 20rpx;
        padding-top: 0rpx;
        padding-bottom: 0rpx;
        padding-right: 10rpx;

        .power-detail {
          background-color: rgba(254, 131, 15, 0.05);
          width: 100%;
          height: 100%;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          padding: 20rpx;

          .left-value {
            .value {
              font-weight: 500;
              font-size: 36rpx;
              white-space: nowrap;
              color: rgba(0, 156, 119, 1);
            }

            .title {
              font-size: 24rpx;
              // white-space: nowrap;
              color: rgba(44, 50, 49, 1);
            }
          }

          .right-value {
            min-width: 121rpx;
            height: 119rpx;
            position: absolute;
            right: 20rpx;
          }


			.bg {
			  width: 194rpx;
			  height: 188rpx;
			  background-image: url("/static/aidex/images/total-sy.png");
			  background-size: 100% 100%;
			}
          .t-fdzl {
            width: 121rpx;
            height: 119rpx;
            background-image: url("/static/aidex/images/total-zfdl.png");
            background-size: 100% 100%;
          }

          .t-swdl {
            width: 97rpx;
            height: 140rpx;
            background-image: url("/static/aidex/images/total-swdl.png");
            background-size: 100% 100%;
          }
        }
      }

      .right {
        width: 50%;
        height: 100%;
        padding: 0 20rpx 0 10rpx;

        .value-box {
          width: 100%;
          height: 100%;
          background-color: rgba(254, 131, 15, 0.05);
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-left: 30rpx;
          padding-right: 30rpx;
          border-radius: 8rpx;
        }

        .value {
          margin-top: 49rpx;
          width: 100%;
          text-align: center;
          font-weight: 500;
          color: rgba(0, 156, 119, 1);
          font-size: 48rpx;
        }

        .title {
          width: 100%;
          text-align: left;
          font-size: 24rpx;
          color: rgba(44, 50, 49, 1);
        }

        .bg {
          width: 194rpx;
          height: 188rpx;
          background-image: url("/static/aidex/images/total-sy.png");
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
