<template>
  <div class="home-page">
    <div class="home-page-top">
      <div class="col-sm-12">
        <div class="f-group">
          <div class="f-item pull-left">
            <img src="./image/clock_icon.png" alt="" />
            <div class="card-desc">
              <span>系统运行时间</span>
            </div>
            <div class="card-text" v-if="dataList.systemRunningTime">
              <span style="color: #21acfc">{{
                dataList.systemRunningTime[0]
              }}</span
              ><span class="date-color" style="font-size: 16px">天</span
              ><span style="color: #21acfc">{{
                dataList.systemRunningTime[1]
              }}</span
              ><span class="date-color">时 </span>

              <!-- {{dataList.systemRunningTime}} -->
            </div>
          </div>
          <div class="f-item pull-left">
            <img src="./image/alarm_icon.png" alt="" />
            <div class="card-desc">
              <span>报警总数</span>
            </div>
            <div class="card-text">
              <span style="color: #f2637b">{{ dataList.faultAlarm }}</span
              ><span class="date-color">次 </span>
            </div>
          </div>
          <div class="f-item pull-left">
            <img src="./image/sun_icon.png" alt="" />
            <div class="card-desc">
              <span>候车大厅供暖模式</span>
            </div>
            <div class="card-text">
              <p v-if="dataList.sun == 1" style="color: #4ecb74">开启</p>
              <p v-else style="color: #f2637b">关闭</p>
            </div>
          </div>
          <div class="f-item pull-left">
            <img src="./image/fan_icon.png" alt="" />
            <div class="card-desc">
              <span>候车大厅机械通风模式</span>
            </div>
            <div class="card-text">
              <p v-if="dataList.fan == 1" style="color: #4ecb74">开启</p>
              <p v-else style="color: #f2637b">关闭</p>
            </div>
          </div>
          <div class="f-item pull-left">
            <img src="./image/nan_fan_icon.png" alt="" />
            <div class="card-desc">
              <span>候车大厅自然通风模式</span>
            </div>
            <div class="card-text">
              <p v-if="dataList.nan == 1" style="color: #4ecb74">开启</p>
              <p v-else style="color: #f2637b">关闭</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-page-content">
      <el-row :gutter="50" style="height: 100%">
        <el-col :span="16" style="height: 100%">
          <card-list :cardListTitle="cardListLeftTitle">
            <div slot="right">
              <span
                :class="activeIndex === index ? 'active-hight-linght' : ''"
                class="date-text"
                @click="activehandle(item, index)"
                v-for="(item, index) in dateList"
                :key="item.value"
                >{{ item.label }}</span
              >
            </div>

            <div slot="content" class="content-wrap">
              <el-row
                :gutter="12"
                type="flex"
                justify="center"
                v-if="dataList.energy"
              >
                <el-col :span="6">
                  <div class="energy-save-mode-wrap" style="">
                    <div class="font-style font_14">
                      <span>节能模式</span>
                    </div>
                    <div class="flex-save-warp">
                      <div>
                        <div>
                          <p class="font_30" v-if="activeIndex == 0">
                            {{ dataList.energy.jnSystemRunningTimeDay }}
                          </p>
                          <p class="font_30" v-else>
                            {{ dataList.energy.jnSystemRunningTimeMonth }}
                          </p>
                          <p class="font-style font_14">运行时间（h）</p>
                        </div>
                      </div>
                      <div>
                        <p class="font_30" v-if="activeIndex == 0">
                          {{ dataList.energy.jnEnergyDay }}
                        </p>
                        <p class="font_30" v-else>
                          {{ dataList.energy.jnEnergyMonth }}
                        </p>

                        <p class="font-style font_14">总能耗（kwh）</p>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="handle-mode-wrap">
                    <div class="font-style font_14">
                      <span>人工模式</span>
                    </div>
                    <div class="flex-save-warp">
                      <div>
                        <div>
                          <p class="font_30" v-if="activeIndex == 0">
                            {{ dataList.energy.sdSystemRunningTimeDay }}
                          </p>
                          <p class="font_30" v-else>
                            {{ dataList.energy.sdSystemRunningTimeMonth }}
                          </p>
                          <p class="font-style font_14">运行时间（h）</p>
                        </div>
                      </div>
                      <div>
                        <p class="font_30" v-if="activeIndex == 0">
                          {{ dataList.energy.sdEnergyDay }}
                        </p>
                        <p class="font_30" v-else>
                          {{ dataList.energy.sdEnergyMonth }}
                        </p>

                        <p class="font-style font_14">总能耗（kwh）</p>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="sys-save-mode-wrap">
                    <div class="font-style font_14">
                      <span>系统节约总能耗</span>
                    </div>
                    <div>
                      <div>
                        <p class="font_30" v-if="activeIndex == 0">
                          {{ dataList.energy.totalEnergyDay }}
                        </p>
                        <p class="font_30" v-else>
                          {{ dataList.energy.totalEnergyMonth }}
                        </p>

                        <p class="font-style font_14">（kwh）</p>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <div style="height: calc(100% - 30px)">
                <!-- <energy-total-charts></energy-total-charts> -->
                <chart
                  id="home"
                  :data="data"
                  :title="activeIndex == 0 ? '今日能耗统计' : '本月能耗统计'"
                  color="#21ACFC"
                  ref="chart"
                ></chart>
              </div>
            </div>
          </card-list>
        </el-col>
        <el-col :span="8" style="padding-left: 0; height: 100%">
          <card-list :cardListTitle="cardListRightTitle">
            <div slot="content" style="height: 100%">
              <my-pies></my-pies>
            </div>
          </card-list>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import cardList from '../components/cardList'
// import energyTotalCharts from '../components/energyTotalCharts'
import myPies from '../components/myPies'
// import CardList from './compontents/cardList.vue';
import chart from '@/pages/components/chart.vue'
export default {
  name: 'home',
  components: {
    cardList,
    // energyTotalCharts,
    myPies,
    chart
  },
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      cardListLeftTitle: '能耗统计',
      cardListRightTitle: '旅客满意度调查',
      activeIndex: 0,
      dataList: [] || this.$store.state.d2admin.paramsList.list.syBean,
      dateList: [
        {
          value: 0,
          label: '今日'
        },
        {
          value: 1,
          label: '本月'
        }
      ],
      data: []
    }
  },
  methods: {
    getDataList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/analysis/getSyParam'),
        method: 'get'
      }).then((data) => {
        if (data && data.code === 0) {
          console.log('首页：', data)
          this.dataList = data.bean

          this.data = data.bean.energyList //默认
        }
      })
    },
    activehandle(item, index) {
      this.activeIndex = index
      // 本月
      if (index === 1) {
        this.data = this.dataList.energyListMonth
      } else {
        this.data = this.dataList.energyList
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.home-page {
  height: calc(100vh - 155px);
  width: 100%;
  &-top {
    margin: 20px;
    margin-bottom: 24px;
    .f-group {
      width: 100%;
      display: flex;
      .f-item {
        box-sizing: border-box;
        width: calc(20% - 18px);
        height: 216px;
        margin-right: 24px;
        padding-top: 40px;
        background-color: #fff;
        text-align: center;

        // box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        img {
          width: 50px;
          height: 50px;
          padding-bottom: 13px;
        }
        .card-desc {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          // padding-bottom: 16px;
        }
        .card-text {
          font-size: 26px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #333333;
          padding-bottom: 45px;
        }
      }
      .f-item:last-child {
        margin-right: 0;
      }
    }
  }
  .home-page-content {
    margin: 20px;
    height: calc(100vh - 450px);
    .date-text {
      padding-right: 20px;
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1d1d1d;
      cursor: pointer;
    }
    .active-hight-linght {
      color: #21acfc;
    }

    .content-wrap {
      // margin: 20px;
      height: 100%;
      .energy-save-mode-wrap {
        // width: ;
        box-sizing: border-box;
        // padding: 24px 30px 25px 30px;
        padding-top: 24px;
        height: 138px;
        text-align: center;
        background: #21acfc;
        border-radius: 6px;
        .flex-save-warp {
          display: flex;
          justify-content: space-around;
        }
      }
      .handle-mode-wrap {
        background: #36cbcb;
        box-sizing: border-box;
        // padding: 24px 30px 25px 30px;
        padding-top: 24px;

        height: 138px;
        text-align: center;
        border-radius: 6px;
        .flex-save-warp {
          display: flex;
          justify-content: space-around;
        }
      }
      .sys-save-mode-wrap {
        box-sizing: border-box;
        height: 138px;
        background: #4ecb74;
        padding: 24px 30px 25px 30px;
        text-align: center;
        border-radius: 6px;
        .flex-save-warp {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.date-color {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}
.margin_top_25 {
  margin-top: 25px;
}
.font-style {
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.font_14 {
  font-size: 16px;
}
.font_30 {
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #ffffff;
}
p {
  margin: 0;
  padding: 0;
}
</style>