<template>
  <div class="energy-top">
    <div class="top-item">
      调节记录
    </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-if="!noDataFlag"
           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 ? item.showDate : '--' }}</span>
            <span>{{ item.showTime ? item.showTime : '--' }}</span>
          </div>
          <div class="item-text fl">
            <span>{{ item.spaceName ? item.spaceName : '--' }}</span>
          </div>
          <div class="num fr">
            {{ item.details ? item.details : '--' }}
          </div>
        </div>
      </div>

      <div
        v-if="noDataFlag"
        class="nodata"
      >
        <div class="nodataImg">
          <img :src="parseImgUrl('page-portrait','nodata.png')" alt="">
        </div>
        <div class="firstTitle">您还没有调节记录</div>
      </div>
    </van-list>

  </div>
</template>

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

export default defineComponent({
  components: {
    VanList: List
  },
  setup() {
    const list: any = []
    let dataMap: any = null
    const proxyData = reactive({
      parseImgUrl:parseImgUrl,
      loading: false,
      finished: false,
      dataMap: dataMap,
      noDataFlag: false,
      user: store.state.user,
      page: 1,
      pageCount: 12,
      list: list,
      type: 'temp',
      onLoad() {
        proxyData.getLoadData()
      },
      /**
       * 获取数据列表
       */
      getLoadData() {
        let param: any = {
          "orders": [
            {
              "column": "createTime",
              "asc": false
            }
          ],
          criteria: {
            "projectId": proxyData.user.projectId,
            "userId": proxyData.user.userId
          },
          "page": proxyData.page,
          "size": proxyData.pageCount
        }
        if (proxyData.type === 'temp') {
          param.criteria.itemId = {
            "$in": [1, 2, 3, 4, 5, 6, 10, 12]
          }
          // 温度统计记录
          proxyData.tempFeedbackQuery(param)
        } else {
          // 照明统计记录
          proxyData.lightFeedbackQuery(param)
        }
      },
      formatDataMap(allRes: any) {
        allRes.forEach(function (item: any) {
          const date: any = formatEnergyDate(item.createTime)[0]
          item.showDate = formatEnergyDate(item.createTime)[1]
          item.showTime = formatEnergyDate(item.createTime)[2]
          proxyData.setTempDetail(item)
          if (!proxyData.dataMap) {
            proxyData.dataMap = {}
          }
          if (proxyData.dataMap[date]) {
            proxyData.dataMap[date].push(item)
          } else {
            proxyData.dataMap[date] = [item]
          }
        })
      },
      /**
       *设置温度详情
       */
      setTempDetail(item: any) {
        if (proxyData.type == 'temp') {
          switch (item.itemId) {
            case 1:
            case 2:
              item.details = '空调温度调高';
              break;
            case 3:
            case 4:
              item.details = '空调温度调低';
              break;
            case 5:
              item.details = '空调风量调小';
              break;
            case 6:
              item.details = '空调风量调大';
              break;
            case 10:
              item.details = '关闭空调';
              break;
            case 12:
              item.details = '开启空调';
              break;
          }
        } else {
          item.details = item.onOff ? '照明开启' : '照明关闭';
        }
      },
      /**
       *空调调节记录
       */
      tempFeedbackQuery(param: any) {
        tempFeedbackQuery(param).then(res => {
          const resData: any = res
          const allRes: any = resData?.content ?? []
          proxyData.loading = false
          // 格式化数据，供dom渲染
          proxyData.formatDataMap(allRes)
          if (allRes && allRes.length === 0) {
            proxyData.finished = true
          } else {
            proxyData.page++
          }
          /**
           * 无数据的时候显示
           */
          if (!proxyData.dataMap) {
            proxyData.noDataFlag = true
          }
        })
      },
      /**
       * 照明统计记录
       * @param param
       */
      lightFeedbackQuery(param: any) {
        lightFeedbackQuery(param).then(res => {
          const resData: any = res
          const allRes: any = resData?.content ?? []
          proxyData.loading = false
          // 格式化数据，供dom渲染
          proxyData.formatDataMap(allRes)
          if (allRes && allRes.length === 0) {
            proxyData.finished = true
          } else {
            proxyData.page++
          }
        })
      }
    })
    onMounted(() => {
      let route: any = useRoute()
      proxyData.type = route.query.type
    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>
<style lang="scss" scoped>
.energy-top {
  padding-left: 35px;
  padding-right: 24px;
  padding-top: 30px;
  padding-bottom: 34px;
  background: #E5E5E5;

  .top-item {
    font-family: 'PingFang SC';
    font-size: 24px;
    line-height: 28px;
    color: #000000;
  }
}

.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: 10px;
        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: 14px;
          line-height: 20px;
          color: #C4C4C4;
        }
      }
    }

    .num {
      font-style: normal;
      font-weight: 500;
      font-size: 10px;
      color: #C4C4C4;
      line-height: 20px;
    }
  }
}

.nodata {
  text-align: center;
  color: #c4c4c4;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translate(0px, -100px);

  .nodataImg {
    width: 100%;

    img {
      width: 96px;
      height: 96px;
    }
  }

  .firstTitle {
    font-size: 17px;
  }

  .secondTitle {
    margin-top: 6px;
    font-size: 13px;
  }
}

</style>
