<script setup>
import {ref, reactive} from "vue";
import getPath from "@/utils/getPath.js";

const systemNumList = ref([
  {
    name: '运行设备数量',
    num: '1130',
  },
  {
    name: '停机设备数量',
    num: '1130',
  }
])
const img = ref([getPath.defaultsystemnum, getPath.stopsystemnum])
const overviewList = ref([
  {
    name: "展馆面积",
    num: 83,
    unit: '万m²'
  },
  {
    name: "设备总量",
    num: 83,
    unit: '台'
  }
])
// 用电情况
const electricityContent = ref([
  {
    name:'今日用电量',
    value:66,
    unit:"kWh",
  },
  {
    name:'今日用电费用',
    value:66,
    unit:"万元",
  },
  {
    name:'本月用电量',
    value:66,
    unit:"kWh",
  },
  {
    name:'本月用电费用',
    value:66,
    unit:"万元",
  },
  {
    name:'本年用电量',
    value:66,
    unit:"kWh",
  },
  {
    name:'本月用电费用',
    value:66,
    unit:"万元",
  },
])

// 故障报警
const faultList = ref([
  {
    name:'1号机组的XX模块故障',
    date:'2023-11-28 16:58:02'
  },
  {
    name:'1号机组的XX模块故障',
    date:'2023-11-28 16:58:02'
  },
  {
    name:'1号机组的XX模块故障',
    date:'2023-11-28 16:58:02'
  },
])
// 开机策略
const runTimeList = ref([
  {
    name: "休息日",
    value: false,
  },
  {
    name: "节假日",
    value: true,
  },
  {
    name: "日常",
    value: true,
  },
  {
    name: "全开",
    value: true,
  },
  {
    name: "全关",
    value: true,
  }

]);
// 维护提醒
const maintenanceList = ref([
  {
    name: "1#主机",
    date: '10',
  },
  {
    name: "2#主机",
    date: '03',
  },
  {
    name: "3#主机",
    date: '01',
  },
  {
    name: "4#主机",
    date: '07',
  },
  {
    name: "5#主机",
    date: '09',
  },
  {
    name: "6#主机",
    date: '10',
  },
  {
    name: "7#主机",
    date: '06',
  },
  {
    name: "8#主机",
    date: '04',
  },
  {
    name: "9#主机",
    date: '12',
  },
  {
    name: "10#主机",
    date: '11',
  },
  {
    name: "11#主机",
    date: '05',
  },
  {
    name: "12#主机",
    date: '06',
  },
  {
    name: "13#主机",
    date: '09',
  }
])
</script>

<template>
  <div class="page m100">
    <div class="page-left-box">
      <!--  概况-->
      <div class="title">
        <span>概况</span>
      </div>
      <div id="overview" class="margin10 box-bg overview">
        <div class="overview-system">
          <div v-for="(item,index) in systemNumList" class="overview-system-item">
            <img :src="img[index]" alt="" srcset="">
            <p>
              <span class="name">{{ item.name }}</span>
              <span class="num">{{ item.num }}</span>
              <span>台</span>
            </p>
          </div>
        </div>
        <div v-for="(item,index) in overviewList" :class="'overview-item' + index">
          <span class="unit">{{ item.name }}</span>
          <p>
            <span class="value">{{ item.num }}</span>
            <span class="unit">{{ item.unit }}</span>
          </p>
        </div>
      </div>
      <!--  用电情况-->
      <div class="title margin10">
        <span>用电情况</span>
      </div>
      <div id="electricity" class="margin10 box-bg">
        <div class="electricity-left">
            <span>

            </span>
          <span>

          </span>
          <span></span>
        </div>
        <div class="electricity-right">
            <ul>
              <li v-for="(item,index) in electricityContent">
                <span>{{item.name}}</span>
                <span><span class="value" style="font-size: 1rem">{{item.value}}</span><span class="unit">{{item.unit}}</span></span>

              </li>
            </ul>
        </div>
      </div>
      <!--  故障报警-->
      <div class="title margin10">
        <span>故障报警</span>
      </div>
      <div id="fault" class="margin10 box-bg">
        <p v-for="s in faultList">
          <span class="name">{{s.name}}</span>
          <span class="date">时间：{{s.date}}</span>
        </p>
      </div>
    </div>
    <div class="page-right-box">
      <!--  开机策略 -->
      <div class="title">
        <span>开机策略</span>
      </div>
      <div  class="margin10 box-bg">
        <div class="runningState">
          <div class="tableTitle">
            <span>策略名称</span>
            <span>策略状态</span>
            <span>操作</span>
          </div>
          <div class="tableContent">
            <div class="tableBoby"
                v-for="(item, index) in runTimeList"
                :key="index"
            >
              <span class="name">{{ item.name }}</span>
              <el-switch v-model="item.value" style="left: 8px" />
              <span>编辑</span>
            </div>
          </div>
        </div>
      </div>
      <!--  维护提醒-->
      <div class="title margin10">
        <span>维护提醒</span>
      </div>
      <div id="reminder" class="margin10 box-bg">
        <div class="runningState">
          <div class="tableTitle" style="height: 7%">
            <span>设备名称</span>
            <span>超期</span>
          </div>
          <div class="tableContent">
            <div class="tableBoby" style="height: 7%"
                 v-for="(item, index) in maintenanceList"
                 :key="index"
            >
              <span class="name">{{ item.name }}</span>
              <span class="date">{{ item.date }} <span>小时</span></span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
#reminder {
  height: vh(576);
  background-image: url('@/assets/images/air-conditioning/reminder-bg.png');
}

#overview > div {
  width: 24.125rem;
  height: 27%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 4.75rem;
  padding-right: 1.3rem;
  box-sizing: border-box;
}

.overview {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: space-evenly;

  &-system {
    padding: 0 !important;
    display: flex;
    justify-content: space-around !important;

    &-item {
      display: flex;

      img {
        margin-right: 1rem;
      }

      .name {
        font-size: .8rem;
        margin-bottom: .5rem;
        display: block;
      }



    }
  }

  &-item0 {
    background-size: 100% 100%;
    background-image: url("@/assets/images/air-conditioning/area.png");
  }

  &-item1 {
    background-size: 100% 100%;
    background-image: url("@/assets/images/air-conditioning/system-total.png");
  }

}

.unit {
  font-size: .8rem;
  color: rgba(221, 255, 253, 1)
}

.value {
  margin-right: .7rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(91, 250, 241, 1);
}

//用电
#electricity {
  display: flex;
  justify-content: space-around;
}

.electricity-left {
  width: 12.6%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;

  span {
    display: block;
    width: 100%;
    height: 21.5%;
    background-size: 100% 100%;
    background-image: url("@/assets/images/air-conditioning/electricity.png");
  }
}
.electricity-right{
  width: 69%;
  height: 100%;
  ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    //background-color: #fff;
    li{
      height: 11%;
      width:100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .875rem;
      padding:0 .5rem;
      background-size: 100% 100%;
      background-image: url("@/assets/images/air-conditioning/electricityBg.png");
    }
  }
}
//故障
#fault{
  padding: 0 1rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  p{
    width: 100%;
    height: 20%;
    background-image: url("@/assets/images/air-conditioning/fault.png");
    background-size: 100% 100%;
    padding-left: 3.75rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    span{
      display: block;
      width: 100%;
    }
    .name{
      font-weight: 600;
    color:rgba(91, 250, 241, 1)
    }
    .num{
      color:rgba(1, 246, 139, 1);
      font-size: 1.25rem;
      font-weight: 600;
    }
    .date{
      color:rgba(202, 202, 202, 1);
      font-size: .8rem;
    }
  }
}

//开机策略
.tableBoby>span{
  //width: 4rem;
  text-align: center;
  flex-basis: 33%;
  display: block;
}
.tableBoby .date{
  font-weight: 600;
  color: rgba(61, 255, 244, 1);
  span{
    font-weight: normal;
    color: rgba(221, 255, 253, 1);
  }
}
:deep(.el-switch){
   //width: 4rem;
  flex-basis: 33%;
  justify-content: center;
 }
.runningState {
  height: 98%;
  width: 100%;
  padding: 2% 2%;
  box-sizing: border-box;
  .tableTitle {
    background: url("../../assets/images/overview/runTime.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 15.5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    span{
      flex-basis: 33%;
      text-align: center;
    }

  }
  .tableContent {
    width: 100%;
    height: calc(100% - 4.5%);
    overflow: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    .tableBoby {
      background: url("../../assets/images/air-conditioning/table-item.png") no-repeat;
      background-size: 100% 100%;
      width: 100%;
      height: 15.5%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 14px;
      margin-top: .3rem;
    }
  }
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
:deep(.el-switch__core) {
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(223, 94, 94, 1);
}

:deep(.el-switch.is-checked .el-switch__core) {
  background: transparent;
  border: 1px solid rgba(80, 233, 83, 1);
}
:deep(.el-switch__core .el-switch__action) {
  border-radius: 0;
  height: 13px;
  width: 13px;
  background: rgba(223, 94, 94, 1);
}
:deep(.el-switch.is-checked .el-switch__action) {
  border-radius: 0;
  height: 13px;
  width: 13px;
  background: rgba(80, 233, 83, 1);
}
</style>