<template>
  <div class="energy-top clearfix">
    <div class="top-item fl">
      <p>我的节能</p>
      <p>{{ monthPoints }}</p>
    </div>
    <div class="top-item pt fr">
      <div class="jifen-item" @click="goIntegralDesc">
        <span class="temp-span">积分说明</span>
        <van-icon class="question" name="question-o"/>
      </div>
      <div class="check-date" @click="triggerShowPopup">
        <span>{{ nowDate }}</span>
        <van-icon class="arrow" name="arrow-down"/>
      </div>
    </div>
  </div>
  <div class="page-box detail-content">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="detail-box">
        <div class="detail-item clearfix" v-for="(item,index) in list" :key="item.id">
          <div class="item-date fl">
            <span>{{ index + 1 }}</span>
          </div>
          <div class="item-text fl">
            <!--            <img :src="item.headImgUrl" alt="" v-show="item.headImgUrl">-->
            <span>{{ item.userName }}</span>
          </div>
          <div class="num fr">
            {{ item.totalPoints }}
          </div>
        </div>
      </div>
    </van-list>

  </div>
  <!--日历选择器-->
  <van-popup v-model:show="showPopup" position="bottom">
    <van-datetime-picker
      class="date-box"
      v-model="currentDate"
      :show-toolbar="false"
      type="year-month"
      :formatter="formatter"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
    />
    <div class="btns">
    <span
      @click="comfirm"
      class="btn btn_com"
    >确定</span>
    </div>
  </van-popup>
</template>

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

export default defineComponent({
  components: {
    VanList: List,
    VanDatetimePicker: DatetimePicker,
    VanPopup: Popup
  },
  setup() {
    const router = useRouter()
    let list: any = []
    const formatter: any = (type: any, val: any) => {
      if (type === 'year') {
        return `${val}年`
      }
      if (type === 'month') {
        return `${val}月`
      }
      return val
    }

    const allUser: any = []
    const proxyData = reactive({
      loading: false,
      finished: false,
      formatter: formatter,
      monthPoints: 0,
      user: store.state.user,
      currentDate: new Date(getPreMonth('YYYY.MM')),
      nowDate: getPreMonth('YYYY.MM'),
      showPopup: false,
      minDate: getAddYear(-2),
      maxDate: getAddYear(0),
      list: list,
      allUser: allUser,
      page: 1,
      pageCount: 12,
      triggerShowPopup() {
        proxyData.showPopup = true
      },
      goIntegralDesc() {
        router.push({ path: '/integral-desc' })
      },
      comfirm() {
        // console.log(proxyData.currentDate);
        let time = formatDate('YYYY.MM', proxyData.currentDate)
        proxyData.page = 1
        proxyData.list = []
        proxyData.nowDate = time
        proxyData.showPopup = false
        //  查看当前月份的节能
        proxyData.list = []
        // 查看总数据
        proxyData.queryAllIntegral()
        proxyData.onLoad()
      },
      onLoad() {
        proxyData.queryIntegralRank()
      },
      /**
       * 获取上月的总积分
       */
      queryAllIntegral() {
        let time = formatDate('YYYYMM', new Date(proxyData.nowDate))
        var param = {
          criteria: {
            'date': time,
            projectId: proxyData.user.projectId,
            userId: proxyData.user.userId
          }
        }
        queryAllIntegral(param).then((res) => {
          const resData: any = res
          const resContent: any = resData?.content ?? []
          proxyData.monthPoints = resContent[0]?.totalPoints ?? 0
        })
      },
      /**
       * 获取节能排名
       */
      queryIntegralRank() {
        let time = formatDate('YYYYMM', new Date(proxyData.nowDate))
        var params: any = {
          criteria: {
            date: time
          },
          'orders': [
            {
              'column': 'totalPoints',
              'asc': false
            },
            {
              'column': 'userId',
              'asc': false
            }
          ],
          'page': proxyData.page,
          'size': proxyData.pageCount
        }
        queryAllIntegral(params).then(res => {
          // 加载状态结束
          proxyData.loading = false
          let resData: any = res
          let allRes = resData?.content ?? []
          if (allRes && allRes.length) {
            proxyData.page++
          } else {
            proxyData.finished = true
          }
          allRes.map((item: any) => {
            proxyData.list.push(item)
          })
          proxyData.setUserImg()
        }).catch(() => {
          proxyData.finished = true
        })
      },
      /**
       * 设置用户图像
       */
      setUserImg() {
        proxyData.list.map((ele: any) => {
          proxyData.allUser.filter((item: any) => {
            if (ele.userId == item.id) {
              ele.headImgUrl = item.headImgUrl
            }
          })
        })
      }
    })
    onMounted(() => {
      //  查看上一个月的节能
      proxyData.queryAllIntegral()
    })
    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;
    }
  }

  .check-date {
    cursor: pointer;

    span {
      line-height: 12px;
      padding-right: 5px;
      padding-top: 5px;
      display: inline-block;
    }

    .arrow {
      font-size: 12px;
    }
  }
}

.detail-content {
  padding-top: 28px;
  padding-right: 30px;
  padding-left: 30px;
  min-height: calc(100% - 100px);
  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;
        padding-top: 12px;
        font-family: 'Montserrat';
        vertical-align: middle;
        font-weight: 500;
        font-size: 17px;
        color: #140050;
        padding-right: 27px;
      }
    }

    .item-text {
      margin-top: 10px;

      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 23px;
      }

      span {
        display: inline-block;
        font-family: 'PingFang SC';
        font-size: 16px;
        line-height: 19px;
        color: #000000;
        vertical-align: middle;
      }
    }

    .num {
      font-family: 'Montserrat';
      font-style: normal;
      font-weight: 400;
      font-size: 17px;
      padding-top: 12px;
      text-align: right;
      color: #4D5262;
    }
  }
}

.date-box {
  padding-top: 10px;
}

.btns {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;

  .btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #c4c4c4;
  }

  .btn_com {
    background: #ffda1a;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.07);
    border-radius: 30px;
    color: #000000;
  }
}

</style>
