<template>
  <div class="evTwoContainer">
    <div class="evTwoContainer-out">
      <Head :headText="headText"></Head>
      <div class="count-top">
        <div class="count-top-left MicrYaHei">
          <span>首页</span>
          <span>></span>
          <span>单日运行评价</span>
        </div>
        <ul class="MicrYaHei">
          <div style="min-width:300px;min-height:30px;" @click="jumpIndex"></div>
          <div>
            <li :class="{current: num == 1}" @click="changeNum(1)">室内温度</li>
            <li :class="{current: num==2}" @click="changeNum(2)">节能率</li>
            <li :class="{current: num==3}" @click="changeNum(3)">执行率</li>
          </div>
          <div class="count-top-right">
            <date-temp v-if="date" @pickerVal="pickerVal" :date="date"></date-temp>
          </div>
        </ul>
        <div class="count-bottom">
          <div v-show="num == 1">
            <ev-rate-title :tab="1" :rate="tindoorFillRate"></ev-rate-title>
            <div class="count-bottom-switch">
              <span class="switchSpan">只显示不满足的点位</span>
              <el-switch v-model="value2"></el-switch>
            </div>
            <div class="count-bottom-content">
              <ev-two-table v-if="dataList.length>0" :switch="value2" :dataList="dataList"></ev-two-table>
            </div>
            <div class="count-bottom-foot">
              <ev-stacked-line v-if="stackArr.length>0" :stackArr='stackArr'></ev-stacked-line>
            </div>
          </div>
          <div v-show="num == 2">
            <ev-rate-title :tab="2" :rate="energySavingRate"></ev-rate-title>
            <div class="count-historical-data">
              <ev-history
                v-if="Object.keys(current).length>0||Object.keys(similarDay).length>0||Object.keys(maxArr).length>0"
                :current="current"
                :similarDay="similarDay"
                :maxArr="maxArr"
              ></ev-history>
              <div class="count-foot">
                <div class="count-foot-title">
                  <span class="Micbold">相似日概况</span>
                  <span class="MicrYaHei">相似度高</span>
                </div>
                <div class="count-foot-table">
                  <ev-energy-table v-if="samples.length>=0" :samples="samples"></ev-energy-table>
                </div>
              </div>
            </div>
          </div>
          <div v-show="num == 3">
            <ev-rate-title :tab="3"></ev-rate-title>
            <ev-card v-if="cardList.length>0" :cardList="cardList"></ev-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Head from "../main/index";
import EvTwoTable from "./evTwoTable";
import EvStackedLine from "./evStackedLine";
import EvEnergyTable from "./evEnergyTable";
import EvCard from "./evCard"; //执行率
import EvRateTitle from "./evRateTitle";
import EvHistory from "./evHistory";
import DateTemp from "./dateTemp";
import {
  runDataQury,
  energyDayQuery,
  querychiller,
  querySpace,
  queryHisdataQueryPeriodData,
  queryTdbDay
} from "@/api/evaluate/evaluate.js";
import { queryChillerExecuteInfo } from "@/api/appeal/appeal.js";
import bus from '@/utils/bus.js'

export default {
  data() {
    return {
      headText: "运行评价",
      num: 1, //tab @
      date: "", // 传过来的日期@
      type: "", //传过来的日期 @
      value2: true,
      current: {}, //本日概况 @
      similarDay: {}, //相似日概况 @
      samples: [], //相似日列表 @
      maxArr: [], // @
      dataList: [], //室内温度满足率@
      tindoorFillRate: "", //室内温度满足率@
      energySavingRate: "", //节能率
      cardList: [], //执行率@
      dateVal: "", //@
      stackArr:[]
    };
  },
  components: {
    Head,
    EvTwoTable,
    EvStackedLine,
    EvEnergyTable,
    EvCard,
    EvRateTitle,
    EvHistory,
    DateTemp
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.type = this.$route.query.type;
      this.date = this.$route.query.name;
      if (this.type) {
        this.num = this.type;
      }
      if (this.date) {
        this.date = this.formatterStr3(
          new Date().getFullYear() + this.formatterStr2(this.date)
        );
      }
      if (this.num && this.date) {
        this.changeNumMethod();
      }
    },
    // @
    formatterStr2(str) {
      if (str) {
        return str.substring(0, 2) + "" + str.substring(3, 5);
      }
    },
    // 室内温度table @
    queryTdbDayMethod(date) {
      this.dataList = [];
      let obj = {
        // 'Fl44130300016569b876ba5311e990f9592e6484ca96': {
        //   id: 'Fl44130300016569b876ba5311e990f9592e6484ca96',
        //   name: '1F',
        //   children: []
        // }
      };
      queryTdbDay(date, {}).then(res => {
        this.tindoorFillRate = res.tindoorFillRate;
        console.log("室内温度满足率", res);
        let content = res.content;
        this.stackArr= content
        content.forEach(({ spaceDayRpt }) => {
          if (obj.hasOwnProperty(spaceDayRpt.floorId)) {
            obj[spaceDayRpt.floorId].children.push(spaceDayRpt);
          } else {
            obj[spaceDayRpt.floorId] = {
              id: spaceDayRpt.floorId,
              name: spaceDayRpt.floorLocalName,
              children: []
            };
          }
        });

        this.dataList = Object.values(obj).map(i => {
          // 增加 isExpand 属性
          i.isExpand = i.children.some(c => c.isSatisfy == false);
          return i;
        });
        console.log(this.dataList);
      });
    },
    // @
    formatterStr3(str) {
      if (str) {
        return str.substring(0, 4) + str.substring(4, 6) + str.substring(6, 8);
      }
    },
    // 执行率@
    queryimplement(date) {
      let params = {
        postParams: {
          criteria: {
            date: date
          }
        }
      };
      queryChillerExecuteInfo(params).then(res => {
        this.cardList = res.data ? res.data : [];
        console.log("执行率", res);
      });
    },
    // 根据tab @
    changeNumMethod() {
      if (this.num == 1) {
        this.queryTdbDayMethod(this.date);
      } else if (this.num == 2) {
        this.queryEnergyDayQuery(this.date);
      } else if (this.num == 3) {
        this.queryimplement(this.date);
      }
    },
    // 点击tab @
    changeNum(index) {
      this.num = index;
      this.changeNumMethod();
    },
    // @
    formatterStr(str) {
      if (str) {
        return str.substring(0, 4) + str.substring(5, 7) + str.substring(8, 10);
      }
    },
    // @
    pickerVal(val) {
      if (val) {
        this.dateVal = this.formatterStr(val);
        this.changeNumMethod();
      }
    },
    // @
    jumpIndex() {
      this.$router.push("/evaluate");
    },
    // 节能率@
    queryEnergyDayQuery(date) {
      energyDayQuery(date, {}).then(res => {
        if (res.result == "success") {
          // 本日概况
          this.current = res.current ? res.current : {};
          // 相似日概况
          this.similarDay = res.similarDay ? res.similarDay : {};
          // 相似日列表
          this.samples = res.samples ? res.samples : [];
          if (this.samples.length > 0) {
            var outsiteTemp = [],
              indoorTemp = [],
              energy = [];
            for (var i in this.samples) {
              outsiteTemp.push(this.samples[i].outsiteTemp);
              indoorTemp.push(this.samples[i].indoorTemp);
              energy.push(this.samples[i].energy);
            }
            let maxOutsiteTemp = this.maxMethod(this.sortMethod(outsiteTemp)),
              maxIndoorTemp = this.maxMethod(this.sortMethod(indoorTemp)),
              maxEnergy = this.maxMethod(this.sortMethod(energy));
            this.maxArr.push(maxOutsiteTemp, maxIndoorTemp, maxEnergy);
          }
        } else {
          this.$message.error("申诉失败: " + res.message);
        }
      });
    },
    // @
    sortMethod(arr) {
      if (arr instanceof Array) {
        return arr.sort(function(num1, num2) {
          return num1 - num2;
        });
      } else {
        return 1;
      }
    },
    // @
    maxMethod(arr) {
      if (arr instanceof Array) {
        return eval(arr[arr.length - 1]);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.evTwoContainer {
  background: #fff;
  min-width: 1000px;
  .count-top {
    width: 100%;
    height: 100%;
    .count-top-left {
      width: 200px;
      display: flex;
      align-items: center;
      z-index: 1;
      position: fixed;
      left: 190px;
      top: 68px;
      span {
        display: inline-block;
      }
      span:nth-of-type(1) {
        height: 22px;
        font-size: 14px;
        color: #8d9399;
        line-height: 22px;
        cursor: pointer;
      }
      span:nth-of-type(2) {
        color: #c3c6cb;
        margin: 0 4px;
        margin-top: -3px;
      }
      span:nth-of-type(3) {
        height: 22px;
        font-size: 14px;
        color: #1f2429;
        line-height: 22px;
      }
    }
    ul {
      display: flex;
      padding: 0 16px;
      // width: 100%;
      justify-content: space-between;
      white-space: nowrap;
      align-items: center;
      margin: 0;
      text-align: center;
      position: fixed;
      left: 0;
      right: 0;
      top: 50px;
      z-index: 1;
      min-width: 810px;
      .count-top-right {
        width: 148px;
      }
    }

    ul li {
      cursor: pointer;
      height: 21px;
      float: left;
      font-size: 16px;
      color: rgba(31, 35, 41, 1);
      line-height: 21px;
      padding: 14px 16px;
      margin-right: 22px;
    }
    .count-bottom {
      padding: 0 16px;
      height: auto;
      background: #fff;
      margin-top: 16px;
      .count-bottom-switch {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: -14px;
        .switchSpan {
          height: 22px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(31, 36, 41, 1);
          line-height: 20px;
          margin-right: 16px;
        }
      }
      .count-historical-data {
        .count-foot {
          .count-foot-title {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
            span:nth-of-type(1) {
              height: 24px;
              font-size: 16px;
              color: rgba(31, 36, 41, 1);
              line-height: 21px;
              margin-right: 16px;
            }
            span:nth-of-type(2) {
              width: 72px;
              height: 22px;
              background: rgba(225, 242, 255, 1);
              border-radius: 2px;
              font-size: 14px;
              color: rgba(0, 101, 179, 1);
              line-height: 22px;
              text-align: center;
            }
          }
        }
      }
      .count-bottom-content {
        margin-top: 12px;
      }
      .count-bottom-foot {
        margin-top: 46px;
        height: 480px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(228, 230, 231, 1);
      }
    }
    .current {
      font-size: 16px;
      font-family: MicrosoftYaHei;
      color: #0091ff;
      line-height: 21px;
      border-bottom: 2px solid#0091FF;
    }
  }
}
</style>
<style lang="scss">
.count-bottom-switch {
  .el-switch__core {
    width: 40px !important;
    height: 22px;
    border-radius: 12px;
  }
  .el-switch.is-checked .el-switch__core::after {
    left: 100%;
    margin-left: -19px;
  }
  .el-switch__core:after {
    content: "";
    position: absolute;
    border-radius: 100%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    width: 18px;
    height: 18px;
    background-color: #fff;
    top: 1px;
  }
}
</style>