function addCard(deviceId, type, name, code) {
  var a = '<div class="myrow">' +
    '< div style = "width: 100px;height: 70px; background-color: #2991b6;border-radius: 10px;" > </div>' +
    '< div class="mycolumn" style = "margin-left: 10px;" > ' +
    '<div>3201001234567890</div>' +
    '<div>逆变器1 </div>' +
    '<div style="color: #08afff; font-size:14px; font-weight: bold;">逆变器 </div>' +
    '</div >' +
    '</div >'

  var elementDeviceList = document.getElementById('deviceList')
  // <div class="mycard" ></div>
  var card = document.createElement('div')
  card.className = 'mycard'
  card.innerHTML = '<div class="myrow" style="margin-bottom: 20px">' +
    '<div style="width: 100px;height: 70px; background-color: #2991b6;border-radius: 10px;"></div>' +
    '<div class="mycolumn" style="margin-left: 10px;">' +
    '<div>' + code + '</div><div>' + name + '</div>' +
    '<div style="color: #08afff; font-size:14px; font-weight: bold;">' + type + '</div>' +
    '</div></div>'

  var params = {
    工作状态: '运行',
    在线状态: '运行',
    故障状态: '运行',
    额定功率: '20 kW',
    电压: '220 V',
    电流: '30 A',
    功率: '11 kW',
  }

  Object.keys(params).forEach((k) => {
    var id = deviceId + '_' + k
    card.innerHTML += ('<div class="mycard-param">' +
      '<div class="mycard-param-title">' + k + '</div>' + '<div id="' + id + '" class="mycard-param-text">' + params[k] + '</div>' +
      '</div>')
  });

  elementDeviceList.appendChild(card)
}

function updateParam(deviceId, k, v) {
  var id = deviceId + '_' + k
  document.getElementById(id).innerHTML = v
}


var activeCardBtn = null
function clickCardBtn(btn, id) {
  if (activeCardBtn) activeCardBtn.className = 'mycardbtn'
  activeCardBtn = btn
  activeCardBtn.className = 'mycardbtn-active'
}

function initDeviceList() {
}

// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 开启定时器更新页面数据
var timerId = null
// 【注意】 DOM 元素的移除不会自动清理 JavaScript 运行时创建的资源（如定时器、事件监听器等），这些都需要手动管理
// 监听当前script元素的移除事件，清理定时器
document.currentScript.addEventListener('DOMNodeRemoved', () => {
  G.cppNative.log('DOMNodeRemoved: 运行监控')
  clearInterval(timerId);
});

$(document).ready(function () {
  addCard('1', '逆变器', '逆变器1', '1111')
  addCard('2', '汇流箱', '汇流箱', '2222')
  addCard('3', '光伏板', '光伏板1', '3333')
  addCard('4', '光伏板', '光伏板2', '4444')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')
  addCard('5', '光伏板', '光伏板3', '5555')

  clickCardBtn(document.getElementById('solarCardBtn'), 'solar')

  timerId = setInterval(() => {
    updateParam('1', '电压', Math.floor(Math.random() * 220) + ' V')
  }, 2000);
})