<template>
  <div class="portrait-top">
    <div class="portrait-title">节能评分</div>
    <div class="portrait-count" @click="goEnergyDetail('energy')">
      <span>我的节能</span>
      <span>
        {{
          energyData.totalPoints || energyData.totalPoints == 0
            ? energyData.totalPoints
            : "--"
        }}</span
      >
      <!--      <van-icon class="arrow" name="arrow" />-->
    </div>
  </div>

  <div class="page-box portrait-content">
    <div class="box" @click="goEnergyDetail('air')" v-if="energyArr[0].isshow">
      <span>空调调节</span>
      <span>{{ energyArr[0].num }}</span>
      <img :src="parseImgUrl('page-portrait', 'portrait_air.svg')" alt="" />
    </div>
    <div class="box" @click="goEnergyDetail('lamp')" v-if="energyArr[1].isshow">
      <span>开关照明</span>
      <span>{{ energyArr[1].num }}</span>
      <img
        class="temp-img"
        :src="parseImgUrl('page-portrait', 'portrait_lamp.svg')"
        alt=""
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { useRouter } from "vue-router";
import { store } from "@/store";
import {
  queryTotalIntegral,
  queryPortraitTempUserTotal,
  queryTotalPortraitLight,
  queryPortraitModule,
} from "@/apis/portrait";
import { formatDate, getPreMonth, setQueryConfig, setSession } from "@/utils";
import { PortaitMutationTypes } from "@/store/modules/portait/mutation-types";
import { parseImgUrl } from "@/utils";

export default defineComponent({
  components: {},
  setup() {
    let router = useRouter();
    let energyData: {
      intergral: any;
      level: any;
      totalPoints: number;
    } = {
      intergral: 0,
      level: 0,
      totalPoints: 0,
    };
    let arr: any = [
      {
        id: "airConditioner",
        name: "空调调节",
        isShow: true,
        num: "--",
        unit: "",
        img: parseImgUrl("page-portrait", "portrait_air.svg"),
      },
      {
        id: "light",
        name: "开关照明",
        isShow: true,
        num: "--",
        unit: "",
        img: parseImgUrl("page-portrait", "portrait_lamp.svg"),
      },
    ];
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      user: store.state.user,
      energyData: energyData,
      energyArr: arr,
      goEnergyDetail(type: any) {
        router.push({
          path: `/energy-savig`,
          query: { type: type },
        });
      },
      dealNumToPoint(num: any, arrIndex: any) {
        if (!isNaN(num)) {
          if (num && num >= 10000) {
            num = Math.floor((num / 10000) * 10) / 10;
            proxyData.energyArr[arrIndex].unit = "万";
          } else {
            proxyData.energyArr[arrIndex].unit = "";
            return num;
          }
          return num ? num : "--";
        } else {
          return "--";
        }
      },
      /**
       * 节能分数
       */
      queryTotalIntegral() {
        let today = formatDate("");
        let lastMonth = getPreMonth();
        let params: any = {
          date: today,
          month: lastMonth,
        };
        let query: string = setQueryConfig(params);
        queryTotalIntegral(query).then(function (res) {
          const resData: any = res;
          if (res.result === "success") {
            proxyData.energyData = resData;
          }
        });
      },
      /**
       * 空调使用统计
       */
      queryPortraitTempUserTotal() {
        queryPortraitTempUserTotal().then((res) => {
          const resData: any = res;
          if (resData.result === "success") {
            const data: any = resData?.data ?? null;
            proxyData.energyArr[0].num = data
              ? proxyData.dealNumToPoint(
                  data.adjustDownNum + data.adjustUpNum,
                  0
                )
              : "--";
          } else {
            proxyData.energyArr[0].num = "--";
          }
        });
      },
      /**
       * 照明使用统计
       */
      queryTotalPortraitLight() {
        queryTotalPortraitLight().then((res) => {
          const resData: any = res;
          if (resData.result === "success") {
            const data: any = resData?.data ?? null;
            proxyData.energyArr[1].num = data
              ? proxyData.dealNumToPoint(data.totalNum, 1)
              : "--";
          } else {
            proxyData.energyArr[1].num = "--";
          }
        });
      },
      /**
       * 判断设备统计数据的显示和隐藏
       */
      queryPortraitModule() {
        queryPortraitModule().then((res) => {
          let resData: any = res;
          let data = resData?.data ?? [];
          // 判断模块的显示和隐藏
          proxyData.energyArr.forEach(function (item: any) {
            if (data.indexOf(item.id) > -1) {
              item.isshow = true;
            } else {
              item.isshow = false;
            }
          });
          /**
           * 缓层数据供后面子页面模块判断使用
           */
          let portraitModule: any = {
            airConditioner: false,
            light: false,
          };
          if (data.indexOf("airConditioner") > -1) {
            portraitModule.airConditioner = true;
          } else {
            portraitModule.airConditioner = false;
          }
          if (data.indexOf("light") > -1) {
            portraitModule.light = true;
          } else {
            portraitModule.light = false;
          }
          setSession("portraitModule", portraitModule);
          store.commit(
            PortaitMutationTypes.SET_AIR,
            portraitModule.airConditioner
          );
          store.commit(PortaitMutationTypes.SET_LIGHT, portraitModule.light);
        });
      },
    });
    onMounted(() => {
      proxyData.queryPortraitModule();
      proxyData.queryTotalIntegral();
      proxyData.queryPortraitTempUserTotal();
      proxyData.queryTotalPortraitLight();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
/**
   top style start
 */
.portrait-top {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-bottom: 40px;
  background: #ffe823;
}

.portrait-title {
  font-family: Black Han Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
}

.portrait-count {
  span {
    display: block;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 21px;
    color: #000000;

    &:nth-child(2) {
      font-family: "Persagy";
      font-style: normal;
      font-weight: 500;
      font-size: 32px;
      line-height: 39px;
    }
  }
}

/**
   top style end
 */
.portrait-content {
  margin-top: -20px;
  display: flex;
  justify-content: space-between;

  .box {
    position: relative;
    box-sizing: border-box;
    padding: 20px 0 20px 20px;
    width: 48.5%;
    height: 140px;
    background: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 15px;

    span {
      display: block;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: normal;
      font-size: 15px;
      line-height: 21px;
      color: #000000;

      &:nth-child(2) {
        font-family: Persagy;
        font-style: normal;
        font-weight: 500;
        font-size: 32px;
        line-height: 39px;
        color: #000000;
      }
    }

    img {
      position: absolute;
      width: 85px;
      top: 39px;
      right: 0;
    }

    .temp-img {
      top: 0;
      width: 80px;
      right: 10px;
    }
  }
}
</style>
