<style lang="less">
page {
    height: 100%;
    background-color: #EBF5FA;
}
.page-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    .bg {
        width: 100%;
        height: 726rpx;
        background-color:#EBF5FA;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .loadImg {
        padding-top: 20rpx;
        height: 40rpx;
        width: 40rpx;
    }
    .countHead {
        position: relative;
        padding: 44rpx;
        padding-top: 222rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1;
        .leftCont {
            font-family: PingFang SC;
            font-size: 48rpx;
            font-weight: 600;
            line-height: 68rpx;
            color: #1B2129;
        }
        .rightCont {
            display: flex;
            flex-direction: column;
            text-align: right;
            .name {
                font-family: PingFang SC;
                font-size: 28rpx;
                font-weight: 400;
                line-height: 44rpx;
                color: #626C78;
            }
            .value {
                font-family: Persagy2.0;
                font-size: 56rpx;
                font-weight: 600;
                line-height: 72rpx;
                color: #1B2129;
            }
        }
    }

    .allCard {
        position: relative;
        padding: 0 40rpx;
        overflow: hidden;
        .eachCard {
            position: relative;
            width: 322rpx;
            height: 280rpx;
            margin-right: 24rpx;
            margin-bottom: 18rpx;
            box-sizing: border-box;
            padding: 40rpx 0 0 36rpx;
            float: left;
            border-radius: 40rpx;
            background: #ffffff;
            .imgPosition {
                position: absolute;
                bottom: 0;
                right: 0;
                &.imgLamp {
                    top: 0;
                    right: 17rpx;
                }
            }
            .name {
                font-family: PingFang SC;
                font-size: 30rpx;
                font-weight: 400;
                line-height: 42rpx;
                color: #626C78;
            }
            .each_value {
                display: flex;
                padding-top: 8rpx;
            }
            .value {
                font-family: Persagy2.0;
                font-size: 56rpx;
                font-weight: 400;
                line-height: 68rpx;
            }
            .unit {
                font-size: 24rpx;
                color: #c4c4c4;
                padding-left: 6rpx;
            }
            &:nth-child(2n) {
                margin-right: 0%;
            }
        }
    }
    .logo-text {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 24rpx;
        padding: 98rpx 0 80rpx;
    }
}
</style>

<template>
    <div class="page-container">
        <page-top-bar
            icon="{{h5Static+'/page-top-bar/return-icon.svg'}}"
        ></page-top-bar>
        <image
            class="bg"
            src="{{h5StaticPath}}/protrait-bg.png"
            mode="widthFix"
            alt
        />
        <div class="countHead">
            <div class="leftCont">使用统计</div>
            <navigator url="/packagesEnv/pages/portrait/energy">
                <div
                    class="rightCont"
                    @tap="showEnergyPage('total','total','节能分')"
                >
                    <div class="name">我的{{carbonCreditText}}</div>
                    <div class="value">
                        {{energyHeadData.totalPoints||energyHeadData.totalPoints==0?energyHeadData.totalPoints:'--'}}</div>
                </div>
            </navigator>

        </div>
        <div class="allCard">
            <navigator
                v-for="(item,idx) in arr"
                v-if="item.isshow"
                :url="item.url"
                class="eachCard"
                @click="showEnergyPage('card',item.code,item.name)"
            >
                <div class="name">{{item.name}}</div>
                <!-- <div v-show="item.load">
                    <image
                        class="loadImg"
                        src="{{h5StaticPath}}/page-officehome/loading.svg"
                    ></image>
                </div> -->
                <div class="each_value">
                    <div class="value">{{item.num}}</div>
                    <div
                        class="unit"
                        v-if="item.unit !== ''"
                    >{{item.unit}}</div>
                </div>
                <image
                    style="width:{{item.imgWidth}}rpx;height:{{item.imgHeight}}rpx"
                    class="imgPosition {{item.class}}"
                    src="{{h5StaticPath}}/{{item.img}}"
                    lazyload
                ></image>
            </navigator>
        </div>
        <!-- <image
            class="logo-text"
            src="{{h5StaticPath}}/page-home/tenatslink.svg"
        ></image> -->

    </div>
</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import config from '@/config'
import moment from 'moment'
import { mapState } from '@wepy/x'
import { queryTotalIntegral, queryPortraitTempUserTotal, queryTotalPortraitLight, queryPortraitModule } from '@/packagesEnv/api/portrait'
import { getCompmayUsers } from '@/api/user'

// import { saveCompanyConfig } from '@/service/companyConfig'
import { umaInit } from '../common.js'
import { checkHasUserInfo } from '@/service/user'
import { carbonCredit } from '../common.js'
wepy.page({
  store,
  data: {
    carbonCreditText: '',
    pageTopBarTop: 0,
    h5StaticPath: config.h5StaticPath + '/page-portrait',
    h5Static: config.h5StaticPath,
    totalPoints: 0,

    arr: [
            { id: 'airConditioner', code: 'air', name: '空调调节', num: '--', unit: '', class: '', imgWidth: 170, imgHeight: 202, url: '/packagesEnv/pages/portrait/energy?sel=temp', img: 'portrait_air.svg', isshow: false },
            { id: 'light', code: 'lamp', name: '开关照明', num: '--', unit: '', class: 'imgLamp', imgWidth: 146, imgHeight: 194, url: '/packagesEnv/pages/portrait/energy?sel=light', img: 'portrait_lamp.svg', isshow: false }
    ]
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      energyHeadData: state => state.portrait.energyHeadData,
      projectId: state => state.company && state.company.companyConfig && state.company.companyConfig.sagacareProjectId
    })
  },
  onLoad() {
    umaInit()
    var _this = this
    checkHasUserInfo().then(function (userInfo) {
      console.log('checkHasUserInfo', userInfo)
      var companyId = userInfo.companyId
            //   saveCompanyConfig(companyId).then(() => {
      _this.getData()
            //   }).catch((err) => {})
    })
    this.carbonCreditText = carbonCredit(this.projectId)
  },
  onReady() { },
  methods: {
    getData() {
      this.queryUserIntegral()
      this.getAir()
      this.getLamp()
      this.queryPortraitModule()
            //   this.getUsersFace()
    },
        // getUsersFace() { // 用户信息
        //   getCompmayUsers().then(res => {
        //     store.commit('setUserData', res.data || {})
        //   })
        // },
    showEnergyPage(page, pointType, pointName) { // 跳转到排行
      wx.uma.trackEvent(`portrait_home_${pointType}`, { key: pointName })
            //   if (page === 'total') {
            //     wx.navigateTo({
            //       url: './energy'
            //     });
            //   }
    },

    getAir() { // 空调统计
      queryPortraitTempUserTotal().then(res => {
        this.arr[0].num = JSON.stringify(res.data) != '{}' ? this.dealNumToPoint(res.data.adjustDownNum + res.data.adjustUpNum, 0) : '--'
      })
    },
    getLamp() { // 灯
      queryTotalPortraitLight().then(res => {
        this.arr[1].num = res.data.totalNum ? this.dealNumToPoint(res.data.totalNum, 1) : '--'
      })
    },

    dealNumToPoint(num, arrIndex) {
      if (num >= 10000) {
        num = Math.floor(num / 10000 * 10) / 10
        this.arr[arrIndex].unit = '万'
      } else {
        this.arr[arrIndex].unit = ''
        return num
      }
      return num
    },
    queryUserIntegral() { // 获取头部的 累计积分  月排名 日积分
      var _this = this
      var today = moment().format('YYYYMMDD')
      var lastMonth = moment().subtract(1, 'month').format('YYYYMM')
      queryTotalIntegral({
        date: today,
        month: lastMonth
      }).then(function (res) {
        store.commit('setEnergyHeadData', res || {})
      })
    },
    queryPortraitModule() { // 获取头部的 累计积分  月排名 日积分
      var _this = this
      queryPortraitModule().then(function (res) {
                // store.dispatch('setPortraitModule', res || {});
        var data = res.data || []
        console.log('queryPortraitModule', data)
        _this.arr.forEach(function (item) {
          if (data.indexOf(item.id) > -1) {
            item.isshow = true
          } else {
            item.isshow = false
          }
        })
        var portraitModule = { 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
        }
        store.dispatch('setPortraitModule', portraitModule)
      })
    }

  }
})
</script>

<config>
{
    'navigationBarTitleText': '',
    navigationStyle:"custom",
    backgroundColor: '#EBF5FA',
    usingComponents: {
        'page-top-bar': '~@/components/common/page-top-bar',      
    },
}
</config>
