<template>
  <div class="main-box">
    <div class="box-first">
      <!-- <div class="machine"><img src="@/assets/machine.png"></div> -->
      <div class="machine-right">
        <!-- <sub-title name="机器人信息" statement="ROBOT INFORMATION" /> -->
        <div class="machine-bottom">
          <ul>
            <li>
              <sub-title name="机器人状态" statement="Robot status" />
              <div class="status">
                <div class="status-list">
                  <img
                    class="robot_img"
                    :src="
                      robotInfoVo.robotState === 1
                        ? require('./assets/status1-active.png')
                        : require('./assets/status1.png')
                    "
                  />
                  <div class="staus-info">
                    <div class="infoimg">
                      <img
                        v-if="robotInfoVo.robotState === 1"
                        src="./assets/success.png"
                      />
                    </div>
                    <div
                      class="infotext"
                      :class="{ active: robotInfoVo.robotState === 1 }"
                    >
                      就绪
                    </div>
                  </div>
                </div>

                <div class="status-list">
                  <img
                    class="robot_img"
                    :src="
                      robotInfoVo.robotState === 2
                        ? require('./assets/status2-active.png')
                        : require('./assets/status2.png')
                    "
                  />
                  <div class="staus-info">
                    <div class="infoimg">
                      <img
                        class="robot_img"
                        v-if="robotInfoVo.robotState === 2"
                        src="./assets/yunxing.png"
                      />
                    </div>
                    <div
                      class="infotext"
                      :class="{ active: robotInfoVo.robotState === 2 }"
                    >
                      运行
                    </div>
                  </div>
                </div>
                <div class="status-list">
                  <img
                    class="robot_code"
                    :src="
                      robotInfoVo.robotState === 3
                        ? require('./assets/status3-active.png')
                        : require('./assets/status3.png')
                    "
                  />
                  <div class="staus-info">
                    <div class="infoimg">
                      <img
                        v-if="robotInfoVo.robotState === 3"
                        src="./assets/yunxing.png"
                      />
                    </div>
                    <div
                      class="infotext"
                      :class="{ active: robotInfoVo.robotState === 3 }"
                    >
                      完成
                    </div>
                  </div>
                </div>
                <div class="status-list">
                  <img
                    class="robot_img"
                    :src="
                      robotInfoVo.robotState === 4
                        ? require('./assets/status4-active.png')
                        : require('./assets/status4.png')
                    "
                  />
                  <div class="staus-info">
                    <div class="infoimg">
                      <img
                        v-if="robotInfoVo.robotState === 4"
                        src="./assets/zhongzhi.png"
                      />
                    </div>
                    <div
                      class="infotext"
                      :class="{ active: robotInfoVo.robotState === 4 }"
                    >
                      故障
                    </div>
                  </div>
                </div>
                <div class="status-list">
                  <img
                    class="robot_code"
                    :src="
                      robotInfoVo.robotState === 5
                        ? require('./assets/status5-active.png')
                        : require('./assets/status5.png')
                    "
                  />
                  <div class="staus-info">
                    <div class="infoimg">
                      <img
                        v-if="robotInfoVo.robotState === 5"
                        src="./assets/zhongzhi.png"
                      />
                    </div>
                    <div
                      class="infotext"
                      :class="{ active: robotInfoVo.robotState === 5 }"
                    >
                      中止
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <sub-title name="信号状态" statement="Signal status" />
              <div class="signal-status">
                <div class="signal-status-list">
                  <div class="signal-icon">
                    <img src="./assets/info1.png" width="58" /><img
                      :src="
                        robotInfoVo.plcState
                          ? require('./assets/signal1.png')
                          : require('./assets/signal2.png')
                      "
                    />
                  </div>
                  <div class="signal-text">PLC通信</div>
                </div>
              </div>
            </li>
            <li>
              <sub-title name="速度" statement="SPEED" />
              <div class="speed">
                <div class="p">
                  行走：<font>{{ robotInfoVo.xAxis | equipmentFilter }}</font>
                  <em> mm/s</em>
                </div>
                <div class="p">
                  伸缩：<font>{{ robotInfoVo.yAxis | equipmentFilter }}</font>
                  <em> mm/s</em>
                </div>
                <div class="p">
                  举升：<font>{{ robotInfoVo.zAxis | equipmentFilter }}</font>
                  <em> mm/s</em>
                </div>
                <div class="p">
                  旋转：<font>{{ robotInfoVo.rAxis | equipmentFilter }}</font>
                  <em> mm/s</em>
                </div>
              </div>
            </li>
            <li>
              <sub-title name="位置" statement="POSITION" />
              <div class="speed">
                <div class="p">
                  行走：<font>{{ robotInfoVo.xDpmt | equipmentFilter }}</font>
                  <em> mm</em>
                </div>
                <div class="p">
                  伸缩：<font>{{ robotInfoVo.yDpmt | equipmentFilter }}</font>
                  <em> mm</em>
                </div>
                <div class="p">
                  举升：<font>{{ robotInfoVo.zDpmt | equipmentFilter }}</font>
                  <em> mm</em>
                </div>
                <div class="p">
                  旋转：<font>{{ robotInfoVo.rDpmt | equipmentFilter }}</font>
                  <em> mm</em>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box-second">
      <sub-title
        name="储充信息"
        statement="STORAGE AND CHARGING INFORMATION"
        :num="storeInfoListFirst.length + storeInfoListSecond.length"
        step="1"
      />
      <div class="storage-bottom">
        <el-carousel
          indicator-position="none"
          arrow="never"
          :height="height"
          :autoplay="false"
          ref="chargerPages"
        >
          <el-carousel-item :key="1" :name="pageName[0]">
            <div class="storagebox">
              <StorageInfo
                v-for="(item, index) in storeInfoListFirst"
                :key="index"
                :store-code="item.storeCode"
                :com-state="item.comState"
                :sn="item.sn"
                :soc="item.soc"
                :chg-estimated-time="item.chargerInfoVo.chgEstimatedTime"
                :current="item.current"
                :voltage="item.voltage"
                :min-temperature="item.minTemperature"
                :max-temperature="item.maxTemperature"
                :max-cell-voltage="item.maxCellVoltage"
                :min-cell-voltage="item.minCellVoltage"
                :soh="item.soh"
                :store-state="item.storeState"
                :charger-info-vo="item.chargerInfoVo"
                :chgType="item.chgType"
                :batInfoOneVo="item.batInfoOneVo"
                :batInfoTwoVo="item.batInfoTwoVo"
                :chargerInfoOneVo="item.chargerInfoOneVo"
                :chargerInfoTwoVo="item.chargerInfoTwoVo"
                :showCodeNum="item.showCodeNum"
                @showDislog="showDislog"
              />
            </div>
          </el-carousel-item>
          <el-carousel-item :key="2" :name="pageName[1]">
            <div class="storagebox">
              <StorageInfo
                v-for="(item, index) in storeInfoListSecond"
                :key="index"
                :store-code="item.storeCode"
                :com-state="item.comState"
                :sn="item.sn"
                :soc="item.soc"
                :chg-estimated-time="item.chargerInfoVo.chgEstimatedTime"
                :current="item.current"
                :voltage="item.voltage"
                :min-temperature="item.minTemperature"
                :max-temperature="item.maxTemperature"
                :max-cell-voltage="item.maxCellVoltage"
                :min-cell-voltage="item.minCellVoltage"
                :soh="item.soh"
                :store-state="item.storeState"
                :charger-info-vo="item.chargerInfoVo"
                :chgType="item.chgType"
                :batInfoOneVo="item.batInfoOneVo"
                :batInfoTwoVo="item.batInfoTwoVo"
                :chargerInfoOneVo="item.chargerInfoOneVo"
                :chargerInfoTwoVo="item.chargerInfoTwoVo"
                :showCodeNum="item.showCodeNum"
                @showDislog="showDislog"
              />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="storage-page">
        <a @click="clickPrev()">&lt;</a>
        <a @click="clickPage(pageName[0])" :class="{ active: !Isactive }">1</a>
        <span>/</span>
        <a @click="clickPage(pageName[1])" :class="{ active: Isactive }">2</a>
        <a @click="clickNext()">&gt;</a>
      </div>
    </div>
    <!--设置弹窗-->
    <div class="rolemanage">
      <el-dialog title="充电设置" :visible.sync="dialogChargeVisible">
        <div>
          <el-form :model="fromData" ref="ExportForm" v-loading="loading">
            <el-form-item label="当前充电:" label-width="120px">
              <el-input
                v-model="fromData.comState"
                placeholder=""
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="枪号：" label-width="120px">
              <el-select v-model="Guncall" placeholder="请选择状态">
                <el-option
                  v-for="item in fromData.arr"
                  :key="item.text"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="按类型设置：" label-width="120px">
              <el-select v-model="setType" placeholder="请选择状态">
                <el-option
                  v-for="item in fromData.arrType"
                  :key="item.text"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="充电功率:" label-width="120px">
              <el-input
                v-model="fromData.powerNum"
                placeholder="请输入充电功率"
                maxlength="4"
                @input="handleEdit"
              ></el-input>
              <span class="kwh">kWh</span>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="exit" @click="dialogChargeVisible = false"
            >取消</el-button
          >
          <el-button type="primary" class="save" @click="setCharge"
            >设置</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!--设置弹窗结束-->
  </div>
</template>

<script>
import "./index.scss";
import SubTitle from "./components/SubTitle.vue";
import StorageInfo from "./components/StorageInfo.vue";
import { getToken } from "@/utils/auth";
import { getlimitPower } from "@/api/powerCharge.js";
export default {
  name: "EquipmentMonitoring",
  components: {
    SubTitle,
    StorageInfo,
  },
  data() {
    return {
      ws: null,
      height: "100%",
      screenHeight: null,
      robotInfoVo: {},
      storeInfoListFirst: [], // 第一屏储充信息
      storeInfoListSecond: [], // 第二屏储充信
      pageName: ["pfirst", "psecond"],
      Isactive: false,
      test: "2.121212",
      dialogChargeVisible: false, //弹窗
      fromData: {
        arr: [
          {
            text: "A枪",
            value: "0",
          },
          {
            text: "B枪",
            value: "1",
          },
        ],
        arrType: [
          {
            text: "桩自主控制功率",
            value: "0",
          },
          {
            text: "功率值",
            value: "1",
          },
          {
            text: "功率百分比",
            value: "2",
          },
          {
            text: "输出电流",
            value: "3",
          },
        ],
        gunNo: "",
        comState: 1, //充电类型
        cangnum: 0, //仓号
        powerNum: "",
      },
      Guncall: "",
      setType: "",
      loading: false,
    };
  },
  mounted() {
    this.onLoadHeight();
    this.changeWindow();
    if (getToken()) {
      if (this.ws) {
        this.ws.close();
      }
      this.websocketConnect();
      // 清除定时器
      this.clearTimerList();
      // 检测断开重连
      this.detectWebsocketConnection();
    }
  },
  destroyed() {
    this.websocketOnClose();
    this.clearTimerList();
  },
  methods: {
    // 在 Input 值改变时触发
    handleEdit(e) {
      let value = e.replace(/[^\d]/g, ""); // 只能输入数字
      value = value.replace(/^0+(\d)/, "$1"); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      this.fromData.powerNum = value;
    },
    //弹窗方法
    showDislog(data) {
      console.log(data, "data");
      if (data.comState == 0) {
        this.fromData.comState = "插枪充电";
      } else {
        this.fromData.comState = "线束充电";
      }
      this.fromData.cangnum = data.cangnum;
      this.dialogChargeVisible = true;
    },
    //弹窗设置方法
    setCharge() {
      let data = {
        chargerId: this.fromData.cangnum,
        gunNo: this.Guncall,
        powerNum: this.fromData.powerNum,
        powerType: this.setType,
      };
      console.log(data, "data");
      if (data.gunNo == "" || data.powerNum == "" || data.powerNum == "") {
        this.$message({
          type: "warning",
          message: "请填写完整!",
        });
      } else {
        getlimitPower().then((res) => {
          this.$message({
            type: res.code === 0 ? "success" : "error",
            message: res.code === 0 ? "设置功率下发成功!" : "设置功率下发失败!",
          });
          this.dialogChargeVisible = false;
        });
      }
    },
    //走马灯分页
    clickPage(pageId) {
      this.$refs.chargerPages.setActiveItem(pageId);
      this.Isactive = !this.Isactive;
    },
    clickPrev() {
      this.$refs.chargerPages.prev();
      this.Isactive = !this.Isactive;
    },
    clickNext() {
      this.$refs.chargerPages.next();
      this.Isactive = !this.Isactive;
    },
    // 清除定时器列表
    clearTimerList() {
      if (this.wsTimer) {
        clearInterval(this.wsTimer);
      }
    },
    /* 设置初始视窗高度*/
    onLoadHeight() {
      this.$nextTick(() => {
        if (document.body.clientHeight >= 1080) {
          this.screenHeight = "63vh";
        } else {
          this.screenHeight = "70vh";
        }
      });
    },
    /* 设置窗口变化高度*/
    changeWindow() {
      window.onresize = () => {
        return (() => {
          if (document.body.clientHeight >= 1080) {
            this.screenHeight = "63vh";
          } else {
            this.screenHeight = "70vh";
          }
        })();
      };
    },
    websocketOnOpen() {
      console.log("socket连接成功");
      const wsMessage = {
        type: "page",
        payload: "equipment-monitoring",
      };
      this.ws.send(JSON.stringify(wsMessage));
    },
    websocketOnMessage(m) {
      const d = JSON.parse(m.data);
      console.log(d, "d");
      if (d.robotInfoVo) {
        this.robotInfoVo = d.robotInfoVo;
      }
      if (d.storeInfoList) {
        d.storeInfoList.forEach(item=>{
						if(item.chgType == 0){
							item.showCodeNum = 0 //仓内充电  显示电池
						}else{
							if(!item.batInfoOneVo.sn && item.batInfoTwoVo.sn){ //A枪不存在数据B枪有数据
								item.showCodeNum = 2
							}else{
								item.showCodeNum = 1 
							}
						}
						})
        this.storeInfoListFirst = d.storeInfoList;
        this.storeInfoListSecond = d.storeInfoList.splice(5);
      }
    },
    websocketOnError(e) {
      console.log("socket错误", e);
    },
    websocketOnClose(e) {
      console.log("socket断开", e);
    },
    detectWebsocketConnection() {
      this.wsTimer = setInterval(() => {
        if (this.ws.readyState != 1) {
          this.ws.close();
          this.websocketConnect();
        }
      }, 3000);
    },
    websocketConnect() {
      const wstoken = getToken();
      this.ws = new WebSocket(process.env.VUE_APP_WS + "/" + wstoken);
      this.ws.onopen = this.websocketOnOpen;
      this.ws.onerror = this.websocketOnError;
      this.ws.onmessage = this.websocketOnMessage;
      this.ws.onclose = this.websocketOnClose;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-carousel {
  width: 100%;
  min-height: 100%;
  height: auto !important;
  ul {
    display: none;
  }
}
::v-deep .el-form {
  .el-form-item {
    display: flex;
    .el-form-item__content {
      margin-left: 0px !important;
      .is-disabled {
        .el-input__inner {
          border: #263042 solid 1px;
        }
      }
    }
  }
}
.kwh {
  position: absolute;
  right: 10px;
  font-size: 14px;
}
</style>
