<template>
  <div class="light" v-if="lampList && lampList.length">
    <div class="light-top">
      <div class="light-desc">
        <p class="light-title">
          {{ isShowChildLight ? "光照" : lampList[0].localName }}
        </p>
        <p :class="isShowChildLight ? 'light-status' : 'light-status'">
          {{ lampSw ? "照明已开启" : "照明已关闭" }}
        </p>
        <div class="show-all" @click.stop="showAll" v-if="isShowChildLight">
          <van-icon :name="lightIcon" class="light-icon" />
          <span>显示全部</span>
        </div>
      </div>
      <div class="light-right">
        <img :src="lightImg" alt="" />
        <Switch
          v-if="!showFlag"
          :disabled="!userIsControl"
          v-model="lampSw"
          @click="eqChange('allLamp', '', 0)"
          inactive-color="rgba(196, 196, 196, 0.4)"
          class="switch-btn"
        />
      </div>
    </div>
    <!--灯控制按钮-->
    <div
      class="light-control"
      v-for="(item, index) in lampList"
      :key="item.id"
      v-if="showFlag && isShowChildLight"
    >
      <div class="control-title">
        {{ item.localName }}
      </div>
      <Switch
        active-color="$elActiveColor"
        :disabled="!userIsControl"
        v-model="item.switch"
        @click="eqChange('main', item, index)"
        inactive-color="rgba(196, 196, 196, 0.2)"
        class="switch-btn"
      />
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  watch,
  onBeforeMount,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
import { Switch, Toast } from "vant";
import { getLampHttp, getStatusHttp, setallLampHttp } from "@/apis/envmonitor";
import { parseImgUrl } from "@/utils";

export default defineComponent({
  props: {
    projectId: {
      type: String,
      default: () => "",
    },
    spaceId: {
      type: String,
      default: () => "",
    },
    userIsControl: {
      type: Boolean,
      default: () => false,
    },
    forceOverTimeFlag: {
      type: Boolean,
      default: () => false,
    },
  },
  components: { Switch },
  setup(props, contx) {
    const lampList: any = [];
    let lightsStatusTimer: any = null;
    const timeOut: any = null;
    const initData: any = [];
    let lightParams: any = [];
    const proxyData = reactive({
      userIsControl: props.userIsControl,
      forceOverTimeFlag: props.forceOverTimeFlag,
      setStatus: false,
      lightParams: lightParams,
      allowSvg: "down_Arrow.svg",
      timeOut: timeOut,
      lightIcon: "arrow-down",
      showFlag: false,
      loadingLight: false,
      initData: initData,
      lampList: lampList,
      lightsStatusTimer: lightsStatusTimer,
      startCheckLightsTime: 0,
      lightImg: parseImgUrl("page-officehome", "lamp_close_v2.png"),
      lampSw: false, // 主灯开关
      // 点击展示所有的登录
      showAll() {
        proxyData.showFlag = !proxyData.showFlag;
        proxyData.lightIcon = "arrow-down";
      },
      // 获取灯的状态
      getLampList() {
        getLampHttp({ spaceId: props.spaceId })
          .then((res) => {
            const resData: any = res;
            if (!proxyData.setStatus) {
              if (resData && resData.result == "success") {
                let content = resData?.content ?? [];
                let lampOpen = false; // 如果有一个开 则总灯开
                for (let i = 0; i < content.length; i++) {
                  content[i].type = "lamp";
                  content[i].imgOpen = parseImgUrl(
                    "page-officehome",
                    "lampch_open.png"
                  );
                  content[i].imgClose = parseImgUrl(
                    "page-officehome",
                    "lampch_close.png"
                  );
                  content[i].switch = content[i].runStatus ? true : false;
                  if (content[i].runStatus) {
                    lampOpen = true;
                  }
                  content[i].loading = false;
                }
                proxyData.initData = JSON.parse(JSON.stringify(content)); //  灯的数据
                proxyData.lampSw = lampOpen; // 主灯开关
                proxyData.lampList = content;
                proxyData.lightImg = proxyData.lampSw
                  ? parseImgUrl("page-officehome", "lamp_open_v2.png")
                  : parseImgUrl("page-officehome", "lamp_close_v2.png");
              }
            }
            console.log("执行了----====");
            proxyData.startLightsStatusTimer();
          })
          .catch(() => {
            proxyData.startLightsStatusTimer();
          });
      },
      // 调整灯
      eqChange(type: any, item: any, index: any) {
        if (proxyData.userIsControl) {
          // debugger
          if (type === "allLamp") {
            if (proxyData.forceOverTimeFlag && proxyData.lampSw) {
              // 强制加班开灯
              contx.emit("triggerWork");
              return;
            }
            //  总开关按钮所有灯
            //  当前要执行的灯的操作
            proxyData.loadingLight = true;
            // const statusFlag = !proxyData.lampSw
            // console.log('proxyData.lampSw==')
            const statusFlag = proxyData.lampSw;
            // 瞬间修改状态
            proxyData.setStatus = true;
            proxyData.updateAllLampStatus(statusFlag);
            proxyData.setLamp(type, "", statusFlag, 0); // 调接口
          } else {
            if (proxyData.forceOverTimeFlag && item.switch) {
              // 强制加班开灯
              contx.emit("triggerWork");
              return;
            }
            //当前要执行的灯的操作
            // 按钮loading
            item.loading = true;
            const statusFlag: any = item.switch;
            let id = item.id;
            proxyData.setStatus = true;
            proxyData.updateLampStatus(item, statusFlag);
            proxyData.setLamp(type, id, statusFlag, index); // 调接口
          }
        } else {
          Toast("您没有当前空间的控制权限！");
        }
      },
      //  控制灯的接口
      setLamp(type: string, id: any, statusFlag: any, index: any) {
        let params: any = [];
        if (type === "allLamp") {
          for (let i = 0; i < proxyData.initData.length; i++) {
            proxyData.initData[i].switch = statusFlag;
          }
          params = proxyData.initData;
        } else {
          params = [
            {
              id: id,
              switch: statusFlag,
            },
          ];
        }
        proxyData.lightParams = params;
        // 调服务端的接口像后台发送灯的操作的指令
        setallLampHttp(params)
          .then((res) => {
            const resData: any = res;
            // set成功后1s关闭定时器
            setTimeout(() => {
              proxyData.setStatus = false;
            }, 1000);
            if (resData.result === "success") {
              // const checkData: any = proxyData.judgeChangeResponeseSuccess(resData)
              // proxyData.getTimeLampStatus(checkData, type, id, statusFlag, index)
            } else {
              proxyData.initLampLoading();
            }
          })
          .catch(() => {
            setTimeout(() => {
              proxyData.setStatus = false;
            }, 1000);
          });
      },
      // 报错后关闭灯的loading
      initLampLoading() {
        proxyData.loadingLight = false;
        proxyData.lampList.map((item: any) => {
          item.loading = false;
        });
      },
      //手动修改灯的状态
      updateAllLampStatus(statusFlag: any) {
        proxyData.lampSw = statusFlag;
        for (let i = 0; i < proxyData.lampList.length; i++) {
          proxyData.lampList[i].switch = statusFlag;
          // if (proxyData.lampList[i].type == 'lamp') {
          // }
        }
      },
      // 单个灯的状态修改
      updateLampStatus(item: any, statusFlag: any) {
        item.switch = statusFlag;
        // let flag: any = true
        // for (let i = 0; i < proxyData.lampList.length; i++) {
        //   if (proxyData.lampList[i].type == 'lamp') {
        //     if (proxyData.lampList[i].switch !== statusFlag) {
        //       flag = false
        //       break
        //     }
        //   }
        // }
      },
      // 轮询查看状态
      getTimeLampStatus(
        checkData: any,
        type: any,
        id: any,
        statusFlag: any,
        index: any
      ) {
        if (checkData["success"] && checkData["success"].length) {
          if (type === "allLamp") {
            // 点击主灯按钮
            proxyData.updateAllLampLoading(checkData["success"]); // 所有灯
          } else {
            // 当个的时候修改loading的状态
            proxyData.updateLampLoading(index);
          }
          proxyData.getLampList();
        }
        if (checkData["processing"] && checkData["processing"].length) {
          let checkParams: any = proxyData.lightParams;
          let processArr: any = checkData["processing"];
          let params: any = [];
          processArr.map((item: any) => {
            let obj: any = {
              id: item.id,
              orderSeqNum: item.orderSeqNum,
            };
            for (let i = 0; i < checkParams.length; i++) {
              if (item.id === checkParams[i].id) {
                obj.switch = checkParams[i].switch;
                break;
              }
            }
            params.push(obj);
          });
          proxyData.checkChangeLightStatusSuccess(
            params,
            type,
            id,
            statusFlag,
            index
          );
        }
        if (checkData["error"] && checkData["error"].length) {
          if (type === "allLamp") {
            // 点击主灯按钮
            proxyData.updateAllLampLoading(checkData["error"]); // 所有灯
          } else {
            // 当个的时候修改loading的状态
            proxyData.updateLampLoading(index);
          }
        }
      },
      // 查看指令是否成功完成
      judgeChangeResponeseSuccess(resData: any) {
        let data: any = resData?.content ?? [];
        let processingArr: any = [];
        let successArr: any = [];
        let errorArr: any = [];
        for (let i = 0; i < data.length; i++) {
          let item: any = data[i];
          if ((item.result = "success")) {
            if (item.state === 200 && item.exeResult === "success") {
              successArr.push(item);
            } else if (
              (item.state === 200 && item.exeResult === "processing:rcvd") ||
              (item.state === 202 && !item.exeResult)
            ) {
              processingArr.push(item);
            } else {
              errorArr.push(item);
            }
          } else {
            errorArr.push(item);
          }
        }
        let obj: any = {
          success: successArr,
          processing: processingArr,
          error: errorArr,
        };
        return obj;
      },
      // 操作成功后更新所有灯的真实状态
      updateAllLampLoading(arr: any) {
        for (let i = 0; i < proxyData.lampList.length; i++) {
          if (proxyData.lampList[i].type == "lamp") {
            arr.map((item: any) => {
              if (proxyData.lampList[i].id === item.id) {
                proxyData.lampList[i].loading = false;
              }
            });
          }
        }
        let loadingLen = proxyData.lampList.filter((item: any) => {
          return item.loading;
        });
        if (loadingLen.length === 0) {
          proxyData.loadingLight = false;
        }
      },
      // 动态切换主灯的状态
      updateLampLoading(index: any) {
        proxyData.lampList[index].loading = false;
      },
      // 灯的指令完成后更新状态
      checkChangeLightStatusSuccess(
        checkParams: any,
        type: any,
        id: any,
        value: any,
        index: any
      ) {
        // 轮询查询灯的状态
        getStatusHttp(checkParams).then((res) => {
          const resData: any = res;
          const checkData: any = proxyData.judgeChangeResponeseSuccess(resData);
          proxyData.getTimeLampStatus(checkData, type, id, value, index);
        });
      },
      // 定时刷新接口
      startLightsStatusTimer() {
        if (proxyData.lightsStatusTimer) {
          window.clearTimeout(proxyData.lightsStatusTimer);
          proxyData.lightsStatusTimer = null;
        }
        proxyData.lightsStatusTimer = window.setTimeout(() => {
          proxyData.getLampList();
        }, 2000);
      },
    });
    const isShowChildLight = computed(() => {
      return proxyData.lampList.length && proxyData.lampList.length > 1;
    });
    watch(
      props,
      (newProps: any) => {
        if (newProps.spaceId) {
          // 空间id改变的重新获取值调用接口
          console.log("spaceid变化了=======");
          proxyData.startLightsStatusTimer();
        }
        // 定时调空间信息
        proxyData.userIsControl = newProps.userIsControl;
        proxyData.forceOverTimeFlag = newProps.forceOverTimeFlag;
      },
      {
        deep: false,
        immediate: true,
      }
    );
    onBeforeUnmount(() => {
      if (proxyData.lightsStatusTimer) {
        window.clearTimeout(proxyData.lightsStatusTimer);
        proxyData.lightsStatusTimer = null;
      }
    });
    onMounted(() => {
      // console.log('空间切换====d')
      // 获取空调信息
      proxyData.getLampList();
      // proxyData.startLightsStatusTimer()
    });
    return {
      isShowChildLight,
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.light {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.07), 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 25px;
  margin: 15px 0px;
}

.light-top {
  padding-left: 20px;
  padding-bottom: 0px;
  display: flex;
  justify-content: space-between;
}

.light-desc {
  flex: 1 98px;
  padding-top: 10px;
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 19px;
  color: #4d5262;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 5px 0px;
}

.light-right {
  position: relative;
  width: 98px;
  margin-right: 45px;
  text-align: center;

  img {
    //width: 98px;
    height: 120px;
  }

  .switch-btn {
    position: absolute;
    right: -20px;
    bottom: 20px;
  }
}

.light-title {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 16px;
  line-height: 19px;
  color: #4d5262;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 5px 0px;
}

.light-status {
  font-family: PingFang SC;
  padding-left: 5px;
  font-size: 14px;
  line-height: 16px;
  color: #c4c4c4;
  flex: none;
  order: 1;
  flex-grow: 0;
  margin: 10px 0px;
}

.show-all {
  font-family: PingFang SC;
  //display: none;
  .light-icon {
    font-size: 12px;
    padding-right: 10px;
  }

  padding-top: 28px;
  padding-bottom: 22px;
  font-size: 14px;
  line-height: 16px;
  color: #c4c4c4;
  margin: 0px 5px;
}

.light-control {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px 10px 28px;
  border-top: 1px solid rgba(196, 196, 196, 0.4);

  .control-title {
    flex: 1 110px;
    font-weight: 500;
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 30px;
    color: #4d5262;
  }

  .switch-btn {
    margin-top: 5px;
  }
}
</style>
<style class="style" lang="scss">
.light {
  .van-loading__spinner {
    color: $elActiveColor !important;
  }

  .van-switch__loading {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 1;
  }

  .van-switch--disabled {
    opacity: 0.5;
  }
}
</style>
