//今日积分 
<style lang="less">
page {
    height: 100%;
    background-color: #EBF5FA;
    position: relative;
}
.page-container {
    width: 100%;
    min-height: 100%;
    padding-bottom: 282rpx;
    box-sizing: border-box;
    position: relative;
    font-family: PingFang SC;
    .energyHead {
        padding: 34rpx 44rpx 32rpx;
        display: flex;
        justify-content: space-between;
        .totalEnergy {
            display: flex;
            flex-direction: column;
            // align-items: flex-end;
            // justify-content: flex-end;
            height: 80px;
            line-height: 1;
            .name {
                color: #4d5262;
                font-size: 25rpx;
            }
            .value {
                padding-top: 12px;
                color: #000;
                font-size: 87rpx;
                font-family: Montserrat;
            }
        }
        .pointExplain {
            color: #4d5262;
            display: flex;
            align-items: start;
            padding-top: 20rpx;
            .text {
                font-size: 24rpx;
                margin-right: 8rpx;
            }
            .icon {
                font-size: 30rpx;
            }
        }
    }
    .eachMonth {
        background: #fff;
        padding-left: 44rpx;
        .dateTitle {
            padding: 50rpx 44rpx 50rpx 0;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            .allButton {
                display: flex;
                font-size: 24rpx;
                color:#4d5262;
            }
        }
        .eachItem {
            //padding-left: 44rpx;
            display: flex;
            flex-wrap: nowrap;
            // justify-content: flex-start;
            align-items: baseline;
            padding-top: 10rpx;
            padding-bottom: 20rpx;
            padding-right: 44rpx;
            // width: 100%;
            box-sizing: border-box;
            border-bottom: 1px solid #e6e6e6;
            .leftCont {
                color: #c4c4c4;
                font-size: 22rpx;
                width: 90rpx;
                // flex-shrink: 0;
                .date {
                    white-space: nowrap;
                }
                .time {
                    margin-top: 10rpx;
                }
            }
            .centerCont {
                flex: 1;
                overflow: hidden;
                .firstLine {
                    padding-left: 37rpx;
                    box-sizing: border-box;
                    // width: 100%;
                    color: #000;
                    font-size: 28rpx;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .secondLine {
                    padding-left: 37rpx;
                    box-sizing: border-box;
                    // width: 100%;
                    margin-top: 10rpx;
                    color: #c4c4c4;
                    font-size: 24rpx;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .addPoint {
                // flex-shrink: 0;
                text-align: right;
                width: 60rpx;
                color: #000;
                font-size: 29rpx;
            }
        }
    }
    .logo-text {
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        height: 24rpx;
        padding: 98rpx 0 80rpx;
    }
    .nodata {
        text-align: center;
        color: #c4c4c4;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translate(0px, -100px);
        .nodataImg {
            width: 100%;
            image {
                width: 96px;
                height: 96px;
            }
        }
        .firstTitle {
            font-size: 34rpx;
        }
        .secondTitle {
            margin-top: 6px;
            font-size: 26rpx;
            .showExplain {
                text-decoration: underline;
            }
        }
    }
}
</style>

<template>
    <div class="page-container">
        <div
            class="energyHead"
            v-if="!listNoData"
        >
            <div
                class="totalEnergy"
                @tap="showAllEnergy"
            >
                <div class="name">我的{{carbonCreditText}}</div>
                <div class="value">{{todayIntegral||todayIntegral==0?todayIntegral:'--'}}</div>
            </div>
            <div
                class="pointExplain"
                @tap="showPointExplain"
            >
                <span class="text">积分说明</span>
                <van-icon
                    class="icon"
                    name="question-o"
                />
            </div>
        </div>
        <div
            class="eachMonth"
            v-if="!listNoData"
        >
            <div class="dateTitle">
                <span>{{nowDate}}</span>
                <div
                    class="allButton"
                    @tap="showAll"
                ><span>查看全部</span>
                    <van-icon name="arrow" />
                </div>
            </div>

            <div
                class="eachItem"
                v-for="item in todayData"
            >
                <div class="leftCont">
                    <div class="date">{{item.showDate?item.showDate:'--'}}</div>
                    <div class="time">{{item.showTime?item.showTime:'--'}}</div>
                </div>
                <div class="centerCont">
                    <div class="firstLine">{{item.integralDetails?item.integralDetails:'--'}}</div>
                    <div class="secondLine">{{item.spaceName?item.spaceName:'--'}}</div>
                </div>
                <div class="addPoint">
                    +{{item.integral}}
                </div>
            </div>
        </div>
        <div>
            <image
                class="logo-text"
                src="{{h5StaticPath}}/page-home/tenatslink.svg"
            ></image>
        </div>
        <div
            class="nodata"
            v-show="listNoData"
        >
            <div class="nodataImg">
                <image
                    :src="h5StaticPath+'/page-portrait/nodata.png'"
                    mode="widthFix"
                />
            </div>
            <div class="firstTitle">您还没有{{ carbonCreditText }}</div>
            <div class="secondTitle">快去查看<span
                    class="showExplain"
                    @click="showPointExplain"
                >积分说明</span>来增加您的{{carbonCreditText}}吧</div>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'
import config from '@/config'
import { mapState } from '@wepy/x'
import { queryAllIntegral } from '@/packagesEnv/api/portrait'
import moment from 'moment'
import { carbonCredit } from '../common.js'

wepy.page({
  store,
  data: {
    carbonCreditText: '',
    nowDate: '',
    todayData: [],
    todayIntegral: 0, // 今天节能总分
    listNoData: false,
    h5StaticPath: config.h5StaticPath
  },
  computed: {
    ...mapState({
      token: state => state.user.token,
      userInfo: state => state.user.userInfo,
      projectId: state => state.company && state.company.companyConfig && state.company.companyConfig.sagacareProjectId
    })
  },
  onLoad() {
    var _this = this
    _this.queryAllIntegral()
    this.nowDate = moment().format('YYYY年MM月DD日')
    this.carbonCreditText = carbonCredit(this.projectId)
  },
  onReady() { },
  methods: {
    queryAllIntegral() { // 获取今天所有积分记录
      var today = moment().format('YYYYMMDD')
      var _this = this
      var param = {
        criteria: {
          date: today,
          integral: {
            '$ne': 0
          }
                    // "date": '20210923'
        },
        'orders': [
          {
            'column': 'updateTime',
            'asc': false
          }
        ]
      }
      console.log('this.userInfo', this.userInfo)
      queryAllIntegral(param).then(function (res) {
        _this.todayData = res.content || []
        var total = 0
        _this.todayData.forEach(function (item) {
          item.showDate = moment(item.updateTime).format('MM月DD日')
          item.showTime = moment(item.updateTime).format('HH:mm')
          total = total + item.integral
        })
        let str = total.toString()
        const idx = str.indexOf('.')
        if (idx > 0) {
          str = str.slice(0, idx + 2)
        }
        _this.todayIntegral = str
        _this.listNoData = _this.todayData.length == 0
      })
    },
    showAll() {
      wx.uma.trackEvent('portrait_todaypoint_showall', { key: '使用统计-今日新增记录-查看全部按钮' })
      wx.navigateTo({
        url: './energyPoint'
      })
    },
    showPointExplain() {
      wx.uma.trackEvent('portrait_todaypoint_explainclick', { key: '使用统计-今日新增记录-积分说明' })
      wx.navigateTo({
        url: './pointExplain'
      })
    }
  }
})
</script>

<config>
{
    'navigationBarBackgroundColor': '#EBF5FA',
    'navigationBarTextStyle':'black',
    'backgroundColor': '#f3f3f3',
    'navigationBarTitleText': '',
        usingComponents: {
         "van-icon": "module:@vant/weapp/dist/icon",
    }

}
</config>
