<template>
  <div class="main">
    <div class="top">
      <div class="left">
        <span>当前RGV通道</span>
        <span class="text">{{ store.user.opDescription || store.user.opName }}</span>
      </div>
      <div class="right">
        <el-button type="success" @mousedown="WritePlc('启动',1)" @mouseup="WritePlc('启动',0)">启动</el-button>
        <el-button type="warning" @mousedown="WritePlc('复位',1)" @mouseup="WritePlc('复位',0)">复位</el-button>
      </div>
    </div>
    <div class="center">
      <fieldset class="left">
        <legend class="title">主界面</legend>
        <div class="main">
          <div class="carBattery">
            当前电量
            <div class="battery">
              <div :style="{ height: data.batteryLevel + '%' }" class="battery-bar"></div>
              <div style="position: relative;top: 40%">{{ data.batteryLevel }} %</div>
            </div>
          </div>
          <div class="carPosList">
            <div class="item">
              <div class="unit">{{ data.XCWZ }} mm</div>
              <div class="text">小车位置</div>
            </div>
            <div class="item">
              <div class="unit">{{ data.SJWZ }} mm</div>
              <div class="text">升降位置</div>
            </div>
          </div>
          <div class="carStatus">
            <div class="item">
              <div :style="{ backgroundColor: data.carStatus1 ? '#1afa29' : '#8a8a8a' }" class="status"></div>
              <el-button type="primary" @mousedown="WritePlc('点动',1)" @mouseup="WritePlc('点动',0)">点动</el-button>
            </div>
            <div class="item">
              <div :style="{ backgroundColor: data.carStatus2 ? '#1afa29' : '#8a8a8a' }" class="status"></div>
              <el-button type="primary" @mousedown="WritePlc('半自动',1)" @mouseup="WritePlc('半自动',0)">半自动</el-button>
            </div>
            <div class="item">
              <div :style="{ backgroundColor: data.carStatus3 ? '#1afa29' : '#8a8a8a' }" class="status"></div>
              <el-button type="primary" @mousedown="WritePlc('上料自动',1)" @mouseup="WritePlc('上料自动',0)">上料自动</el-button>
            </div>
            <div class="item">
              <div :style="{ backgroundColor: data.carStatus4 ? '#1afa29' : '#8a8a8a' }" class="status"></div>
              <el-button type="primary" @mousedown="WritePlc('下料自动',1)" @mouseup="WritePlc('下料自动',0)">下料自动</el-button>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset class="right">
        <legend class="title">手动操作</legend>
        <div class="itemList">
          <div class="item"></div>
          <div class="item">
            <div class="ellipseTest"
              :style="{ backgroundColor: data.SJHYWC ? 'rgba(26, 250, 41,1)' : 'rgba(26, 250, 41,0)' }">升降回原完成</div>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('小车前进',1)" @mouseup="WritePlc('小车前进',0)">小车前进</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('升降回原位',1)" @mouseup="WritePlc('升降回原位',0)">升降回原位</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('小车后退',1)" @mouseup="WritePlc('小车后退',0)">小车后退</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('上升定位',1)" @mouseup="WritePlc('上升定位',0)">上升定位</el-button>
          </div>
          <div class="item"></div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('下降定位',1)" @mouseup="WritePlc('下降定位',0)">下降定位</el-button>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="bottom">
      <fieldset class="left">
        <legend class="title">充电桩</legend>
        <div class="itemList">
          <div class="item">
            <div class="ellipseTest"
              :style="{ backgroundColor: data.ZZCD ? 'rgba(26, 250, 41,1)' : 'rgba(26, 250, 41,0)' }">正在充电</div>
          </div>
          <div class="item">
            <div class="unit">{{ data.CDDL }}</div>
            <div class="text">充电电流</div>
          </div>
          <div class="item">
            <div class="unit">{{ data.CDDY }}</div>
            <div class="text">充电电压</div>
          </div>
          <div class="item">
            <div class="ellipseTest"
              :style="{ backgroundColor: data.DSSCDW ? 'rgba(26, 250, 41,1)' : 'rgba(26, 250, 41,0)' }">电刷伸出到位</div>
          </div>
          <div class="item">
            <div class="unit">{{ data.CDMS }}</div>
            <div class="text">充电模式</div>
          </div>
          <div class="item">
            <div class="unit">{{ data.XT }}</div>
            <div class="text">心跳</div>
          </div>
        </div>
        <div style="display: flex">
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('开始充电',1)" @mouseup="WritePlc('开始充电',0)">开始充电</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('停止充电',1)" @mouseup="WritePlc('停止充电',0)">停止充电</el-button>
          </div>
        </div>
      </fieldset>
      <fieldset class="right">
        <legend class="title">工位操作</legend>
        <div class="itemList">
          <div class="item">上料位</div>
          <div class="item">充电位</div>
          <div class="item">位置1</div>
          <div class="item">位置2</div>
          <div class="item">位置3</div>
          <div class="item">位置4</div>
          <div class="item">位置5</div>
          <div class="item" :style="{ color: getYdColor(data.SLDD) }">{{ data.SLDD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.CDWDD) }">{{ data.CDWDD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ1DD) }">{{ data.WZ1DD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ2DD) }">{{ data.WZ2DD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ3DD) }">{{ data.WZ3DD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ4DD) }">{{ data.WZ4DD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ5DD) }">{{ data.WZ5DD ? '已到' : '未到' }}</div>
          <div class="item" :style="{ color: getYdColor(data.SLXZ) }">{{ data.SLXZ ? '已选' : '未选' }}</div>
          <div class="item" :style="{ color: getYdColor(data.CDXZ) }">{{ data.CDXZ ? '已选' : '未选' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ1XZ) }">{{ data.WZ1XZ ? '已选' : '未选' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ2XZ) }">{{ data.WZ2XZ ? '已选' : '未选' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ3XZ) }">{{ data.WZ3XZ ? '已选' : '未选' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ4XZ) }">{{ data.WZ4XZ ? '已选' : '未选' }}</div>
          <div class="item" :style="{ color: getYdColor(data.WZ5XZ) }">{{ data.WZ5XZ ? '已选' : '未选' }}</div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('上料位选择',1)" @mouseup="WritePlc('上料位选择',0)">选择</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('充电位选择',1)" @mouseup="WritePlc('充电位选择',0)">选择</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('位置1选择',1)" @mouseup="WritePlc('位置1选择',0)">选择</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('位置2选择',1)" @mouseup="WritePlc('位置2选择',0)">选择</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('位置3选择',1)" @mouseup="WritePlc('位置3选择',0)">选择</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('位置4选择',1)" @mouseup="WritePlc('位置4选择',0)">选择</el-button>
          </div>
          <div class="item">
            <el-button type="primary" @mousedown="WritePlc('位置5选择',1)" @mouseup="WritePlc('位置5选择',0)">选择</el-button>
          </div>
        </div>
        <el-button type="primary" @mousedown="WritePlc('定位启动',1)" @mouseup="WritePlc('定位启动',0)">定位启动</el-button>

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

<script setup>
import { useAppStore } from "@/store/app.js";
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
import mqtt from "mqtt";
import { ElMessage, ElMessageBox } from 'element-plus'

const store = useAppStore();
const CreateData = inject('CreateData')
const ExecDatabase = inject('ExecDatabase')
const ExecReadPLC = inject('ExecReadPLC')
const ExecIMESAPI = inject('ExecIMESAPI')
const ExecWritePLC = inject('ExecWritePLC')
const ExecMultReadPLC = inject('ExecMultReadPLC')

const data = reactive({
  batteryLevel: 0, // 当前电量
  XCWZ: '0', // 小车位置
  SJWZ: '0.00', // 升降位置
  carStatus1: false,  // 点动
  carStatus2: false, // 半自动
  carStatus3: false, // 上料自动
  carStatus4: false,  // 下料自动
  SJHYWC: false,  // 升降回原完成 
  ZZCD: false,  // 正在充电
  DSSCDW: false,  // 电刷伸出到位
  CDDL: '0.00', // 充电电流
  CDDY: '0.00', // 充电电压
  CDMS: '0.00', // 充电模式
  XT: '0.00', // 心跳
  SLDD: false, // 上料到达
  CDWDD: false, // 充电位到达
  WZ1DD: false, // 位置1到达
  WZ2DD: false, // 位置2到达
  WZ3DD: false, // 位置3到达
  WZ4DD: false, // 位置4到达
  WZ5DD: false, // 位置5到达
  SLXZ: false, // 上料选择
  CDWXZ: false, // 充电位选择
  WZ1XZ: false, // 位置1选择
  WZ2XZ: false, // 位置2选择
  WZ3XZ: false, // 位置3选择
  WZ4XZ: false, // 位置4选择
  WZ5XZ: false, // 位置5选择
})

var client = null
var timer1 = null
onMounted(() => {
  connectMqtt()
  initData()
  timer1 = setInterval(() => {
    readMultiPLCByTagIds()
  }, 1000 * 2)
})

onUnmounted(() => {
  try {
    if (client) {
      client.end();
    }
  } catch (error) {
    console.log('关闭连接失败:', error);
  }

  // 可选：重置 client 为 null
  client = null;
  // 关闭定时器
  clearInterval(timer1);
});

//连接MQTT
const connectMqtt = async () => {
  const topics = ['PLCToWebUI']
  // 连接选项
  const options = {
    keepalive: 60,          // 心跳时间
    reconnectPeriod: 3000,  // 重新连接间隔时间
    clean: true,            // 是否清除会话
    clientId: 'WEB_Op_' + getUUID(),//要确保唯一性，例如随机数或者UUID,
    username: '',//mqtt服务器配置里面的账号,
    password: ''//mqtt服务器配置里面的密码,
  }
  console.log(window.g.Mqtt_Ip)
  client = mqtt.connect(window.g.Mqtt_Ip, options);
  client.on('reconnect', (error) => {
    console.log('正在重连:', error)
    ElMessage.warning('正在重连' + error)
  })
  client.on('error', (error) => {
    console.log('连接失败:', error)
    ElMessage.warning('连接失败' + error)
  })
  client.on('connect', (e) => {
    console.log('MQTT连接成功');
    // 订阅多个主题
    client.subscribe(topics, { qos: 0 }, function (err) {
      if (!err) {
        console.log('订阅成功');
      } else {
        console.error('订阅失败:', err);
        ElMessage.warning('订阅失败' + err)
      }
    })
  })
  client.on('message', (topic, message, packet) => {
    messageHandle(topic, message.toString())
  })
}

//状态灯信号监控
// case 600004://点动选择灯
// case 600005://半自动选择灯
// case 600006://上料自动选择灯
// case 600007://下料自动选择灯
// case 600010://正在充电灯
// case 600011://电刷伸出到位灯
// case 600020://升降回原完成灯
// case 600025://上料位选择状态灯
// case 600026://上料位到达状态灯
// case 600030://充电位选择状态灯
// case 600031://充电位到达状态灯
// case 600033://位置1选择状态灯
// case 600034://位置1到达状态灯
// case 600036://位置2选择状态灯
// case 600037://位置2到达状态灯
// case 600041://位置3选择状态灯
// case 600042://位置3到达状态灯
// case 600044://位置4选择状态灯
// case 600045://位置4到达状态灯
// case 600047://位置5选择状态灯
// case 600050://位置5到达状态灯
// case 600060://当前电量
// case 600100://小车位置
// case 600100://小车位置
// case 600140://升降位置
// case 600180://充电电流
// case 600200://充电电压
// case 600220://心跳计数
// case 600240://充电模式

const correspondenceList = window.plcPos.correspondenceList

const buttonList = window.plcPos.buttonList


const messageHandle = (topic, message) => {
  switch (topic) {
    case 'PLCToWebUI':
      let reqData = JSON.parse(message)
      console.log(reqData)
      if (reqData.OPCode == store.user.opName) {
        // 先判断data对象是否存在该tagId 如果存在 则该对应的数据
        if (reqData.tagTypeCodeID in correspondenceList) {
          data[correspondenceList[reqData.tagTypeCodeID].value] = reqData.tagValue
          console.log('接收到信号【' + correspondenceList[reqData.tagTypeCodeID].name + '】信号值：' + reqData.tagValue)
        }
      }
      break;
    default:
      return
      break;
  }
}

const getUUID = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

// 批量读取PLC标签
const readMultiPLCByTagIds = () => {
  // 需要读取的所有标签ID
  const tagIds = ["600060", "600100", "600140", "600180", "600200", "600220", "600240"]
  
  ExecMultReadPLC(store.user.opName, tagIds).then(response => {
    if (response.data.code == 0) {
      const results = response.data.ReadRes_SignalValues
      
      // 处理所有返回的数据
      results.forEach(result => {
        const tagId = result.tagTypeCodeID
        let value = result.tagValue
        
        // 转换布尔值
        if (value === 'True') {
          value = true
        } else if (value === 'False') {
          value = false
        }
        
        // 如果对应表中有该标签，则更新数据
        if (tagId in correspondenceList) {
          data[correspondenceList[tagId].value] = value
        }
      })
    }
  })
}

// 保留原始方法，但不再使用
const readPLCByTagId = (tagId) => {
  ExecReadPLC(store.user.opName, tagId).then(responseReadPLC => {
    if (responseReadPLC.data.code == 0) {
      if (responseReadPLC.data.tagValue == 'True') {
        responseReadPLC.data.tagValue = true
      } else if (responseReadPLC.data.tagValue == 'False') {
        responseReadPLC.data.tagValue = false
      }

      data[correspondenceList[tagId].value] = responseReadPLC.data.tagValue
    }
  })
}

const initData = async () => {
  var param = {
    OPName: store.user.opName,
    Operator: store.user.AID
  }
  let response = await ExecIMESAPI('WebHMIInit', param)
  if (response.data.code != 0) {
    ElMessage.error(response.data.msg)
  } else {
    for (let item of response.data.dataValues) {
      if (item.tagValue == 'True') {
        item.tagValue = true
      } else if (item.tagValue == 'False') {
        item.tagValue = false
      }

      data[correspondenceList[item.tagTypeCodeID].value] = item.tagValue
    }
    ElMessage.success('初始化成功！')
  }
}

const getYdColor = (isOk) => {
  if (isOk) {
    return '#1afa29'
  } else {
    return '#000000'
  }
}

const WritePlc = async (tagName, value) => {
  let tagId = buttonList[tagName]
  console.log('WritePlc',tagName,tagId, value)
  let responseReadPLC = await ExecWritePLC(store.user.opName, tagId, value)
  if (responseReadPLC.data.code == 0) {
    if (value == 1) {
      ElMessage.warning(tagName+'按钮按下')
    } else if(value == 0) {
      ElMessage.success(tagName+'按钮抬起')
    }
  } else {
    ElMessage.error(responseReadPLC.data.msg)
  }
}

</script>

<style lang="scss" scoped>
// 左侧盒子
.left {
  width: 49vw;
  padding-left: 1vw;
}

// 右侧盒子
.right {
  width: 49vw;
  padding-left: 1vw;
}

// 标题
.title {
  font-size: 1.5vw;
}

// 椭圆状态球
.ellipseTest {
  width: 15vw;
  height: 6vh;
  line-height: 6vh;
  font-size: 1.5vw;
  //color: #fff;
  border-radius: 50%;
  //background-color: #1296db;
  border: 10px solid #1296db;
  margin: 0 auto;
}

.main {
  font-size: 1vw;

  .top {
    display: flex;
    padding: 2vh 0;
    font-size: 2vw;
    height: 7vh;

    .left {
      .text {
        background-color: #008000;
        margin-left: 20px;
        color: #fff;
      }
    }

    .right {
      .el-button {
        width: 9vw;
        height: 6vh;
        font-size: 1.5vw;
        margin: 0 20px;
      }
    }
  }

  //中间部分
  .center {
    display: flex;

    // 主界面
    .left {
      .main {
        display: flex;
        justify-content: space-around;

        .carBattery {
          text-align: center;

          .battery {
            width: 8vw;
            height: 30vh;
            background-color: #ddd;
            position: relative;
            border-radius: 3px;
            overflow: hidden;

            .battery-bar {
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              background-color: #32cd32;
              transition: height 0.3s ease;
              /* 平滑过渡效果 */
            }
          }
        }

        .carPosList {
          width: 15vw;
          text-align: center;
          line-height: 8.2vh;

          .item {
            font-size: 1.5vw;

            .unit {
              height: 8.2vh;
              background-color: #ffffc0;
            }

            .text {
              height: 8.2vh;
              background-color: #48d1cc;
            }
          }
        }

        .carStatus {
          .item {
            display: flex;
            margin: 1.5vh 0;

            .status {
              width: 3vw;
              height: 3vw;
              border-radius: 50%;
              background-color: #1afa29;
            }

            .el-button {
              width: 9vw;
              height: 6vh;
              font-size: 1.5vw;
              margin: 0 20px;
            }
          }
        }
      }
    }

    // 手动操作
    .right {
      .itemList {
        display: flex;
        flex-wrap: wrap;
        height: 100%;

        .item {
          width: 50%;
          height: 25%;
          text-align: center;

          .el-button {
            height: 80%;
            width: 60%;
            font-size: 1.5vw;
          }
        }
      }
    }
  }

  .bottom {
    display: flex;

    .left {
      .itemList {
        display: flex;
        flex-wrap: wrap;
        height: 100%;

        .item {
          width: 30%;
          height: 25%;
          margin: 1vh 1.6%;
          text-align: center;
          font-size: 1.5vw;

          .unit {
            height: 5.2vh;
            background-color: #ffffc0;
          }

          .text {
            height: 5.2vh;
            background-color: #48d1cc;
          }

          .ellipseTest {
            position: relative;
            left: -1vw;
            top: 2vh;
          }
        }
      }

      .el-button {
        margin: 2vh 2vw;
        width: 9vw;
        height: 6vh;
        font-size: 1.5vw;
      }
    }

    .right {
      .itemList {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;

        .item {
          width: 14.28%;
          height: 7vh;
          text-align: center;
          font-size: 1.5vw;

          .el-button {
            width: 6vw;
            height: 5vh;
            font-size: 1.3vw;
            margin: 0;
          }
        }
      }

      .el-button {
        width: 9vw;
        height: 6vh;
        font-size: 1.5vw;
      }
    }
  }
}
</style>
