<!-- 企业碳足迹/碳账户 -->
<template>
    <div class="page-container">
        <div
            class="energyHead"
            v-if="!listNoData"
        >
            <div class="totalEnergy">
                <div class="name">{{ carbonCreditText }}</div>
                <div class="value">{{totalPoints?totalPoints:'--'}}</div>
            </div>
            <div>
                <div
                    style="margin-top: 16rpx;"
                    @click="handlerChange"
                >
                    <switch :checked="checked"></switch>
                    <span :class="{'sw-text':true,'checkedColor':checked}">仅看碳足迹</span>
                </div>
                <div
                    class="pointExplain"
                    @tap="showPointExplain"
                >
                    <span class="text">积分说明</span>
                    <van-icon
                        class="icon"
                        name="question-o"
                    />
                </div>
            </div>

        </div>
        <div
            class="eachMonth"
            v-for="monthItem in intergralList"
            v-if="!listNoData"
        >
            <div class="dateTitle">{{monthItem.date}}</div>
            <div
                class="eachItem"
                v-for="item in monthItem.dataArr"
            >
                <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.userName?item.userName:'--'}}</div>
                </div>
                <div class="addPoint">
                    {{item.integral }}
                </div>
            </div>

        </div>
        <div v-show="totalGet">
            <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">企业还没有碳积分</div>
            <div class="secondTitle">快去查看<span
                    class="showExplain"
                    @click="showPointExplain"
                >积分说明</span>来增加企业的碳积分吧</div>
        </div>
    </div>
</template>

<script>
import wepy from '@wepy/core';
import store from '@/store';
import config from '@/config';
import { mapState } from '@wepy/x';
import moment from 'moment';
import { operationsQuery, queryIntegralByAccount } from '@/packagesEnv/api/portrait';
wepy.page({
  store,
  data: {
    intergralList: [],
    page: 1,
    pageCount: 12,
    totalPage: 0,
    totalGet: false,
    listNoData: false,
    h5StaticPath: config.h5StaticPath,
    checked: false,
    totalPoints: '--',
    carbonCreditText: '碳账户'
  },
  computed: {
    ...mapState({
      userInfo: state => state.user && state.user.userInfo,
      projectId: state => state.company && state.company.companyConfig && state.company.companyConfig.sagacareProjectId
    }),
    carbonCreditText() {
      if (this.checked) {
        return '企业碳足迹';
      } else {
        return '企业碳账户';
      }
    }
  },
  onLoad() {
    this.queryIntergralList();
    this.queryUserIntegral();
  },
  onReady() { },
  onReachBottom() {
    if (this.page === this.totalPage) return;
    this.page++;
    wx.showLoading({
      title: '加载中'
    })
    this.queryIntergralList();
  },
  methods: {
    handlerChange() {
      this.checked = !this.checked;
      this.intergralList = [];
      this.page = 1;
      this.queryIntergralList();
    },
    queryUserIntegral() {
      const params = this.userInfo.companyId
      queryIntegralByAccount(params).then((res) => {
        this.totalPoints = res.data;
      })
    },
    queryIntergralList() { // 按照分页  获取所有的积分记录
      var _this = this;
      var param = {
        criteria: {
          companyId: this.userInfo.companyId,
          projectId: this.projectId,
          onlyCarbonFootprint: this.checked
        },
        'orders': [
          {
            'column': 'updateTime',
            'asc': false
          }
        ],
        'page': this.page,
        'size': this.pageCount
      };
      operationsQuery(param).then(function (res) {
        var allRes = res.content || [];
        _this.totalPage = Math.ceil((res.count || 0) / _this.pageCount);
        _this.totalGet = _this.totalPage === _this.page;
        allRes.forEach(function (item) {
          item.integral = item.integral > 0 ? `+${item.integral}` : item.integral;
          item.showDate = moment(item.updateTime).format('MM月DD日');
          item.showTime = moment(item.updateTime).format('HH:mm');
          var datestr = moment(item.date).format('YYYY年MM月');

          var lastMonthObj = _this.intergralList[_this.intergralList.length - 1] || {};
          if (lastMonthObj.date == datestr) {
            lastMonthObj.dataArr.push(item);
          } else {
            var newMonthObj = {
              date: datestr,
              dataArr: []
            };
            newMonthObj.dataArr.push(item);
            _this.intergralList.push(newMonthObj);
          }
        });
        _this.listNoData = _this.intergralList.length == 0;
        wx.hideLoading();
      })
    },
    showPointExplain() {
      wx.navigateTo({
        url: './pointExplain'
      });
    }
  }
});
</script>

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

}
</config>
<style lang="less">
page {
    height: 100%;
    background-color: #f3f3f3;
}
.page-container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    font-family: PingFang SC;
    .sw-text {
        font-family: PingFang SC;
        font-size: 10px;
        font-weight: 400;
        line-height: 28rpx;
        color: #9a9a9a;
        margin-left: 6rpx;
    }
    .checkedColor {
        color: #4d5262;
    }

    .energyHead {
        padding: 34rpx 40rpx 24rpx 70rpx;
        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: 56rpx;
            // justify-content: space-between;
            .text {
                font-size: 24rpx;
                margin-right: 8rpx;
            }
            .icon {
                font-size: 30rpx;
            }
        }
    }
    .eachMonth {
        background: #fff;
        padding-left: 44rpx;
        .dateTitle {
            padding: 50rpx 0 40rpx 0;
        }
        .eachItem {
            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: 160rpx;
                color: #000;
                font-size: 29rpx;
            }
        }
    }
    .bottomCont {
        height: 80rpx;
    }
    .logo-text {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 24rpx;
        padding: 98rpx 0 80rpx;
        margin-top: 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>
