<script setup>
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import getPath from "@/utils/getPath.js";
import dialogBox from "./components/dialogBox.vue";
import {
  getGeneralSituation,
  getElectricalCondition,
  getFailureWarning,
  getBootStrategy,
  getMaintenanceReminder,
  getPolicyEditing,
  setAircondition,
} from "@/api/air-conditioning";
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",
  },
]);
const emit = defineEmits(["closeAir"]);
// 弹窗
const dialogBoxShow = ref(false);
const dialogName = ref("");
const id = ref("");
const openDialog = (item) => {
  emit("closeAir", "");
  dialogBoxShow.value = true;
  dialogName.value = item.name;
  id.value = item.StrategyId;
};
const closeDialog = (val) => {
  console.log(val, "xxxxxxxxxx");
  let params = {
    id: id.value,
    name: dialogName.value,
    value: deviceList.value === "" ? null : deviceList.value,
  };
  console.log(deviceList.value, "参数", params);
  getPolicyEditing(params).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: res.msg,
        type: "success",
      });
    } else {
      ElMessage({
        message: res.msg,
        type: "error",
      });
    }
  });
  dialogBoxShow.value = val;
};
const deviceList = ref("");
// 获取设备数组
const getDevice = (data) => {
  console.log(data);
  // 获取设备
  deviceList.value = data.join(",");
};
//维护提醒
const controlBtn = ref("on");
const toggleControl = (event) => {
  controlBtn.value = event.srcElement.className;
  maintenanceReminderInterface();
};
// 获取概况数据
const generalSituationInterface = () => {
  getGeneralSituation().then((res) => {
    systemNumList.value[0].num = res.data[0].Operation;
    systemNumList.value[1].num = res.data[0].Stop;
    overviewList.value[0].num = res.data[0].Area;
    overviewList.value[1].num = res.data[0].Amount;
  });
};
// 获取故障报警
const failureWarningInterface = () => {
  getFailureWarning().then((res) => {
    faultList.value = res.data.map((el) => {
      return {
        name: el.FailureWarning,
        date: el.FailureTime,
      };
    });
  });
};
// 获取用电情况数据
const electricalConditionInterface = () => {
  getElectricalCondition().then((res) => {
    // 今日
    // electricityContent.value[0].value = res.data[0].EH;
    // electricityContent.value[1].value = res.data[0].Electricity;
    electricityContent.value[0].value = unitConversion(res.data[0].EH, 0);
    electricityContent.value[1].value = unitConversion(res.data[0].Electricity, 1);
    // 本月
    // electricityContent.value[2].value = res.data[1].EH;
    // electricityContent.value[3].value = res.data[1].Electricity;
    electricityContent.value[2].value = unitConversion(res.data[1].EH, 2);
    electricityContent.value[3].value = unitConversion(res.data[1].Electricity, 3);

    // electricityContent.value[4].value = res.data[2].EH;
    electricityContent.value[4].value = unitConversion(res.data[2].EH, 4);
    // electricityContent.value[5].value = res.data[2].Electricity;
    electricityContent.value[5].value = unitConversion(res.data[2].Electricity, 5);
  });
};
//单位换算
function unitConversion(params, num) {
  // 本年
  let dataString = params.toString();

  // 使用 split 方法按小数点分割
  let integerPart = dataString.split(".")[0];

  // 获取整数部分的长度
  let lengthOfIntegerPart = integerPart.length;
  let updatedValue = null;
  // 判断整数部分的长度是否大于等于5
  if (lengthOfIntegerPart >= 5) {
    if (num == 0 || num == 2 || num == 4) {
      electricityContent.value[num].unit = "万kWh";
    } else {
      electricityContent.value[num].unit = "万元";
    }
    return (updatedValue = formatNumber(integerPart, true));
  } else {
    return formatNumber(params, false);
  }
}
//整数转换
function formatNumber(num, status) {
  // 检查数字是否为整数
  if (Number.isInteger(num)) {
    return num; // 如果是整数，直接返回
  } else {
    if (status == true) {
      return parseFloat((num / 10000).toFixed(3)); // 否则，保留三位小数并转换回数字
    } else {
      return parseFloat(num.toFixed(3)); // 否则，保留三位小数并转换回数字
    }
  }
}
// 开机策略
const bootStrategyInterface = () => {
  getBootStrategy().then((res) => {
    runTimeList.value = res.data.map((el) => {
      return {
        name: el.StrategyName,
        value: el.StrategyState,
        StrategyId: el.StrategyId,
      };
    });
  });
};
// 维护提醒
const maintenanceReminderInterface = () => {
  console.log(controlBtn.value);
  // let params = {
  //   name: controlBtn.value === "on" ? "已超期" : "即将开始",
  // };
  getMaintenanceReminder().then((res) => {
    maintenanceList.value = res.data.map((el) => {
      return {
        name: el.DeviceName,
        date: el.Status,
      };
    });
  });
};

function btnControl(item, type) {
  let params = {
    StrategyId: item.StrategyId,
    Type: type,
  };
  setAircondition(params).then((res) => {
    if (res.code == 200) {
      ElMessage({
        message: "开机策略操作成功",
        type: "success",
      });
      bootStrategyInterface();
    } else {
      ElMessage({
        message: res.msg,
        type: "error",
      });
    }
  });
}
onMounted(() => {
  // 概况接口
  generalSituationInterface();
  // 用电接口
  electricalConditionInterface();
  // 故障报警接口
  failureWarningInterface();
  // 开机策略接口
  bootStrategyInterface();
  // 维护提醒接口
  maintenanceReminderInterface();
});
</script>

<template>
  <div class="page m100">
    <!--    弹窗-->
    <dialogBox
      v-if="dialogBoxShow"
      @update="closeDialog"
      :dialogName="dialogName"
      @sendDevice="getDevice"
    />
    <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="name">{{ 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" style="height: 32.7%">
        <!--   tbale -->
        <div class="runningState">
          <div class="tableTitle">
            <span>策略名称</span>
            <span>策略状态</span>
            <span>操作</span>
          </div>
          <div class="tableContent">
            <div
              class="tableBoby"
              @click="openDialog(item)"
              v-for="(item, index) in runTimeList"
              :key="index"
            >
              <span class="name">{{ item.name }}</span>
              <span class="control">
                <div class="tooltip-text" v-if="item.value == '0'">停止</div>
                <div class="tooltip-text" v-else-if="item.value == '1'">运行</div>
                <i :class="'state' + item.value"></i>
              </span>
              <p class="control-btn">
                <!-- :class="item.value === '0' ? 'select' : ''" -->
                <span class="on" @click.stop="btnControl(item, 1)">开</span>
                <!-- :class="item.value !== '0' ? 'select' : ''" -->
                <span
                  class="off"
                  style="margin-left: 0.7rem"
                  @click.stop="btnControl(item, 0)"
                  >关</span
                >
              </p>
              <!-- <el-switch v-model="item.value" style="left: 8px" /> -->
              <!-- <span  style="cursor: pointer">编辑</span> -->
            </div>
          </div>
        </div>
      </div>
      <!--  维护提醒-->
      <div class="title margin10">
        <span>设备运行状态</span>
        <!-- <p class="control-btn">
          <span
            :class="controlBtn === 'on' ? 'select' : ''"
            class="on"
            @click="toggleControl"
            >已超期</span
          >
          <span
            :class="controlBtn === 'off' ? 'select' : ''"
            class="off"
            style="margin-left: 0.7rem"
            @click="toggleControl"
            >即将开始</span
          >
        </p> -->
      </div>
      <div id="reminder" class="margin10 box-bg" style="height: 42%">
        <div class="runningState">
          <div class="tableTitle" style="height: 12%">
            <span>策略名称</span>
            <span>状态</span>
          </div>
          <div class="tableContent">
            <div
              class="tableBoby"
              style="height: 12%"
              v-for="(item, index) in maintenanceList"
              :key="index"
            >
              <span class="name">{{ item.name }}</span>
              <span class="date">
                <!-- {{ item.date }} -->
                <div class="tooltip-text" v-if="item.date == 0">停止</div>
                <div class="tooltip-text" v-else-if="item.date == 1">运行</div>
                <div class="tooltip-text" v-else>离线</div>
                <i :class="'state' + item.date"></i>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.state0,
.state1,
.state2,
.statebad {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  background-size: 100% 100%;
  margin: 0 auto;
}

.state0 {
  background-image: url("@/assets/images/lighting/state0.png");
}
.tooltip-text {
  visibility: hidden; /* 默认隐藏 */
  color: #fff;
  text-align: center;
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  margin-top: 0;
  margin-left: 80px; /* 居中对齐 */
  opacity: 0; /* 透明度设置为0 */
  transition: opacity 0.3s; /* 添加过渡效果 */
  font-weight: 600;
}
.date:hover .tooltip-text {
  visibility: visible; /* 悬停时可见 */
  opacity: 1; /* 悬停时不透明 */
}
.control:hover .tooltip-text {
  visibility: visible; /* 悬停时可见 */
  opacity: 1; /* 悬停时不透明 */
}
.state1 {
  background-image: url("@/assets/images/lighting/state1.png");
}
.state2 {
  background-image: url("@/assets/images/lighting/state2.png");
}
.statebad {
  background-image: url("@/assets/images/lighting/state2.png");
}
#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: 0.8rem;
        margin-bottom: 0.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: 0.8rem;
  color: rgba(221, 255, 253, 1);
}

.value {
  margin-right: 0.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: 0.875rem;
      padding: 0 0.5rem;
      background-size: 100% 100%;
      background-image: url("@/assets/images/air-conditioning/electricityBg.png");
    }
  }
}
//故障
#fault::-webkit-scrollbar {
  display: none;
}
#fault {
  padding: 0 1rem;
  overflow-y: scroll;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  // align-content: space-evenly;
  p {
    margin: 0.8rem;
    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: 0.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 {
      cursor: pointer;
      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: 0.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);
}
.control-btn {
  display: flex;
  span:hover {
    background-image: url("@/assets/images/air-tab-select.png") !important;
  }
  .select {
    background-image: url("@/assets/images/air-tab-select.png") !important;
  }

  span {
    background-image: url("@/assets/images/air-tab.png");
    cursor: pointer;
    font-family: normal;
    color: rgba(221, 255, 253, 1);
    background-size: 100% 100%;
    font-size: 0.8rem;
    padding: 0.2rem 1.1rem;
  }
}
// .state0 {

// }
</style>
