<template>
  <div class="energy-top  clearfix">
    <div class="top-item fl">
      <p>我的节能</p>
      <p>{{ totalPoints ? totalPoints : '--' }}</p>
    </div>
    <div class="top-item pt fr" @click="goIntegralDesc">
      <span class="temp-span">积分说明</span>
      <van-icon class="question" name="question-o"/>
    </div>
  </div>
  <div class="page-box detail-content">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="detail-box" v-for="(value,key) in dataMap" :key="key">
        <div class="time">{{ key }}</div>
        <div class="detail-item clearfix" v-for="(item,index) in value" :key="key+index">
          <div class="item-date fl">
            <span>{{ item.showDate }}</span>
            <span>{{ item.showTime }}</span>
          </div>
          <div class="item-text fl">
            <span>{{ item.integralDetails ? item.integralDetails : '-' }}</span>
            <span>{{ item.spaceName ? item.spaceName : '-' }}</span>
          </div>
          <div class="num fr">
            +{{ item.integral }}
          </div>
        </div>
      </div>
    </van-list>

  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { List } from 'vant'
import { queryAllIntegral } from '@/apis/portrait'
import { store } from '@/store'
import { formatEnergyDate, formatDate } from '@/utils'

export default defineComponent({
  components: {
    VanList: List
  },
  setup() {
    const list: any = []
    const router: any = useRouter()
    const proxyData = reactive({
      loading: false,
      finished: false,
      nowDate: '',
      type: 'history',
      totalPage: 0,
      dataMap: {},
      page: 1,
      pageCount: 12,
      user: store.state.user,
      totalPoints: 0,
      list: list,
      queryAllIntegral(params: any) {
        queryAllIntegral(params).then(res => {
          const resData: any = res
          const allRes: any = resData?.content ?? []
          proxyData.loading = false
          allRes.forEach(function(item: any) {
            const date: any = formatEnergyDate(item.updateTime)[0]
            item.showDate = formatEnergyDate(item.updateTime)[1]
            item.showTime = formatEnergyDate(item.updateTime)[2]
            if (proxyData.dataMap[date]) {
              proxyData.dataMap[date].push(item)
            } else {
              proxyData.dataMap[date] = [item]
            }
          })
          if (allRes && allRes.length === 0) {
            proxyData.finished = true
          } else {
            proxyData.page++
          }
        })
      },
      queryHistoryIntegral() {
        const params: any = {
          criteria: {
            'type': 2,
            projectId: proxyData.user.projectId,
            userId: proxyData.user.userId
          },
          'orders': [
            {
              'column': 'updateTime',
              'asc': false
            }
          ],
          'page': proxyData.page,
          'size': proxyData.pageCount
        }
        proxyData.queryAllIntegral(params)
      },
      /**
       * 查看今日新增节能
       */
      queryTodayIntegral() {
        let today = formatDate('')
        let params: any = {
          criteria: {
            date: today,
            integral: {
              '$ne': 0
            },
            projectId: proxyData.user.projectId,
            userId: proxyData.user.userId
          },
          'orders': [
            {
              'column': 'updateTime',
              'asc': false
            }
          ],
        }
        proxyData.queryAllIntegral(params)
      },
      onLoad() {
        if (proxyData.type === 'today') {
          //  查看今日节能积分
          proxyData.queryTodayIntegral()
        } else {
          //  查看历史节能积分
          proxyData.queryHistoryIntegral()
        }
      },
      /**
       *  积分说明页面
       */
      goIntegralDesc() {
        router.push({ path: '/integral-desc' })
      }
    })
    onMounted(() => {
      let route: any = useRoute()
      proxyData.totalPoints = route.query.totalPoints
      proxyData.type = route.query.type
    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>
<style lang="scss" scoped>
@import "common/index.scss";

.energy-top {
  .top-item {
    padding-top: 0 !important;

    .temp-span {
      display: inline-block;
      line-height: 18px;
      padding-top: 8px;
      vertical-align: middle;
    }

    .question {
      font-size: 18px;
      padding-left: 5px;
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.detail-content {
  padding-top: 28px;
  min-height: calc(100% - 160px);
  background: #fff;
}

.detail-box {
  .time {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 18px;
    color: #000000;
    padding-bottom: 27px;
  }

  .detail-item {
    //border-bottom: 0.5px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6;
    padding-top: 5px;
    padding-bottom: 15px;

    .item-date {
      padding-right: 20px;

      span {
        display: block;
        font-family: 'PingFang SC';
        font-size: 11px;
        line-height: 20px;
        color: #C4C4C4;
      }
    }

    .item-text {
      span {
        display: block;

        &:nth-child(1) {
          font-size: 14px;
          line-height: 20px;
          color: #000000;
        }

        &:nth-child(2) {
          ont-family: 'PingFang SC';
          font-size: 13px;
          line-height: 20px;
          color: #C4C4C4;
        }
      }
    }

    .num {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
    }
  }
}

</style>
