document.write('<script src="public.js?t=20261020"></script>')
let animateTimer = null

var hardwareProducts = [
  {
    id: 'iotDoor',
    name: '鐗╄仈缃戦棬浣?,
    desc: '浜查偦绉戞妧闈㈠悜绀惧尯銆佸洯鍖恒€佸晢涓氫綋绛変笉鍚屽満鏅嚜鐮旂殑鍑哄叆鍙ｉ棬浣擄紝娑电洊澶氱鍝佺被锛屾敮鎸佸昂瀵稿畾鍒朵笌鍦烘櫙鍖栭儴缃诧紝璁惧绋冲畾鍙潬銆?,
    img: './images/productService/hardware/hardware_1.png'
  },
  {
    id: 'aiControl',
    name: '鏅鸿兘闂ㄧ鏈?,
    desc: '鏀寔纰颁竴涓嬨€侀棬绂佸崱銆丄PP銆丯FC绛夊绉嶅紑闂ㄦ柟寮忥紝鍏峰鑴辨満璁板綍涓庢潈闄愭牳楠屽姛鑳斤紝杩愯绋冲畾锛岄€傜敤浜庡悇绫诲叕鍏卞嚭鍏ュ彛鍦烘櫙銆?,
    img: './images/productService/hardware/hardware_2.png'
  },
  {
    id: 'aiLightbox',
    name: 'AI鏅鸿兘鍗曞厓闂ㄧ',
    desc: '闆嗘垚浜鸿劯璇嗗埆涓庢埛澶栧箍鍛婂姛鑳斤紝鏀寔澶氱寮€闂ㄦ柟寮忓苟鑱斿姩浜戠绠＄悊锛岄€傜敤浜庣ぞ鍖恒€佸晢涓氫綋绛夊満鏅紝瀹炵幇閫氳绠℃帶涓庝俊鎭睍绀轰竴浣撳寲銆?,
    img: './images/productService/hardware/hardware_3.png'
  },
  {
    id: 'faceScreen',
    name: '闂ㄧ鏅鸿兘灞?,
    desc: '鍩轰簬鐢熺墿璇嗗埆鑷爺鐨勫嚭鍏ュ彛鎺у埗璁惧锛屾敮鎸佷汉鑴搞€侀棬绂佸崱銆丄PP銆丯FC绛夊紑闂ㄦ柟寮忥紝鍙帴鍏ヤ簯绔疄鐜版潈闄愬垎绾т笌杩滅▼绠＄悊锛屾彁鍗囧畨鍏ㄤ笌閫氳鏁堢巼銆?,
    img: './images/productService/hardware/hardware_4.png'
  },
  {
    id: 'parkingEquipment',
    name: '鍋滆溅鍦鸿澶?,
    desc: '闆嗘憚鍍忋€佹樉绀轰簬涓€浣擄紝鏀寔鑴辨満鏀惰垂銆侀珮娓呰溅鐗岃瘑鍒強浜戠鑱斿姩锛岄€傞厤澶嶆潅鐜锛屽疄鐜扮嚎涓婄即璐逛笌鏁版嵁鍚屾锛屾彁鍗囪溅鍦洪€氳鏁堢巼銆?,
    img: './images/productService/hardware/hardware_5.png'
  },
  {
    id: 'intercomEquipment',
    name: '鏅鸿兘鍏ユ埛鏈?,
    desc: '浜查偦鏅烘収绀惧尯鐨勪綇鎴风粓绔紝鎼浇闀胯€呭弸濂界晫闈紝鏀寔璇煶瀵硅銆佽繙绋嬪紑闂ㄣ€佷竴閿懠鍙墿涓氬強鎵嬫満浜掕仈锛屾彁鍗囩ぞ鍖烘矡閫氫笌閫氳绠＄悊鏁堢巼銆?,
    img: './images/productService/hardware/hardware_6.png'
  }
]

var softwareProducts = [
  {
    id: 'communityManagement',
    name: '灏忓尯绠＄悊绯荤粺',
    desc: '鍩轰簬鐗╄仈缃戜笌鏁版嵁鎶€鏈瀯寤虹殑浜查偦鏅烘収绀惧尯骞冲彴锛岃繛鎺ヤ笟涓讳笌鐗╀笟绔紝瀹炵幇闂ㄧ绛夎澶囬泦涓鐞嗐€佹晠闅滄姤璀︼紝鍙婅瀹㈢鎺с€佸畨闃茬爺鍒ょ瓑涓氬姟鏁板瓧鍖栬繍钀ャ€?,
    img: './images/productService/software/software_1.png'
  },
  {
    id: 'marketingManagement',
    name: '钀ラ攢绠＄悊绯荤粺',
    desc: '闈㈠悜鏅烘収绀惧尯鐨勬暟瀛楀寲骞垮憡杩愯惀骞冲彴锛屽彲缁熶竴绠＄悊绾夸笅鍙婄嚎涓婂箍鍛婅祫婧愶紝鏀寔鎶曟斁閰嶇疆銆佸彂甯冩墽琛屼笌鏁堟灉鍒嗘瀽锛屽疄鐜板箍鍛婅繍钀ョ嚎涓婂寲涓庢爣鍑嗗寲銆?,
    img: './images/productService/software/software_2.png'
  },
  {
    id: 'iotPlatform',
    name: '鏅鸿兘鐗╄仈缃戝钩鍙?,
    desc: '鍩轰簬鐗╄仈缃戞妧鏈紝瀵归棬浣撱€侀棬绂佽繘琛岄泦涓湪绾跨鐞嗭紝瀹炵幇瀹炴椂鐩戞祴銆佸紓甯稿弽棣堜笌灏辫繎鎶ヤ慨锛屾彁鍗囪繍钀ユ晥鐜囷紝闄嶄綆鎴愭湰銆?,
    img: './images/productService/software/software_3.png'
  },
  {
    id: 'digitalOffice',
    name: '鏁板瓧鍖栧姙鍏郴缁?,
    desc: '闈㈠悜鎴峰濯掍綋琛屼笟鐨勪紒涓氱鐞嗙郴缁燂紝鏀寔骞垮憡閫夌偣銆佷笅鍗曘€佹暟鎹煡璇㈠強浜哄憳鏉冮檺绠＄悊锛屾彁鍗囧崗鍚屾晥鐜囷紝鍔╁姏浼佷笟闄嶆湰澧炴晥涓庢暟瀛楀寲鍗囩骇銆?,
    img: './images/productService/software/software_4.png'
  },
  {
    id: 'communityEcosystem',
    name: '绀惧尯鐢熸€佹湇鍔?,
    desc: '浜查偦寮€闂ˋPP涓鸿仛鍚堟櫤鑳藉紑闂ㄣ€佹枃鍖栨椿鍔ㄣ€佹湰鍦拌祫璁瓑鍐呭鐨勭嚎涓婂钩鍙帮紝鏋勫缓渚挎皯銆佹枃鍖栦笌璧勮铻嶅悎鐨勫弸濂界ぞ鍖虹敓鎬併€?,
    img: './images/productService/software/software_5.png'
  }
]

function renderProductCards(products, containerId) {
  var html = ''
  for (var i = 0; i < products.length; i++) {
    var p = products[i]
    var coverHtml = p.img
      ? '<img src="' + p.img + '" alt="' + p.name + '">'
      : '<div class="u-card-placeholder"></div>'

    html +=
      '<div class="m-product-card" onclick="goToProductDetail(\'' +
      p.id +
      '\')">' +
      coverHtml +
      '<div class="u-card-title f-text">' +
      p.name +
      '</div>' +
      '<div class="u-card-line f-text"></div>' +
      '<div class="u-card-desc f-text">' +
      p.desc +
      '</div>' +
      '</div>'
  }
  $('#' + containerId).html(html)
}

$(document).ready(function () {
  setNav('productService')
  autoPlayAnimate(5)
  handlePyramidAnimated()
  renderProductCards(hardwareProducts, 'hardwareGrid')
  renderProductCards(softwareProducts, 'softwareGrid')
})

function goToProductDetail(code) {
  window.open('productDetail-' + code + '.html', '_blank')
}

function autoPlayAnimate(index) {
  let play = function () {
    let lastLayer = $('.animated-wrap').find('.layer').eq(index)
    let currLayer = $('.animated-wrap')
      .find('.layer')
      .eq(index - 1)
    if (index == 5) {
      $('#out1').css({ opacity: 0, top: '0px' }).stop(true)
      $('#in1').css({ opacity: 1 }).stop(true)
      $('#text1').css({ opacity: 0 }).stop(true)
      $('#icon1').css({ opacity: 0, top: '0px' }).stop(true)
      $('#in5').css({ opacity: 0 })
      $('#out5').animate({ top: '10px', width: '100%', opacity: 1 }, 300)
      $('#icon5').stop(true).delay(200).animate({ opacity: 1, top: '-20px' }, 400)
      $('#text5').stop(true).delay(400).animate({ opacity: 1 }, 1000)
    } else {
      lastLayer.find('.out').css({ opacity: 0, top: '0px' }).stop(true)
      lastLayer.find('.in').css({ opacity: 1 }).stop(true)
      lastLayer.find('.text').css({ opacity: 0 }).stop(true)
      lastLayer.find('.icon').css({ opacity: 0, top: '0px' }).stop(true)
      currLayer.find('.in').css({ opacity: 0 })
      currLayer.find('.out').animate({ top: '10px', width: '100%', opacity: 1 }, 300)
      currLayer.find('.icon').stop(true).delay(200).animate({ opacity: 1, top: '-20px' }, 300)
      currLayer.find('.text').stop(true).delay(400).animate({ opacity: 1 }, 700)
    }
    if (index == 0) {
      clearInterval(animateTimer)
      autoPlayAnimate(5)
    }
    index--
  }
  play()
  animateTimer = setInterval(play, 4000)
}

function handlePyramidAnimated() {
  let currLayer = ''
  let t = ''
  $('.layer').hover(
    function (event) {
      clearInterval(animateTimer)
      clearTimeout(t)
      currLayer = $('.animated-wrap').find('.layer').eq($(this).index())
      $('.layer').find('.icon').stop(true)
      $('.layer').find('.out').stop(true)
      $('.layer').find('.text').stop(true)
      $('.layer').find('.out').css({ opacity: 0, top: '0px' })
      $('.layer').find('.in').animate({ opacity: 1 }, 200)
      $('.layer').find('.text').animate({ opacity: 0 }, 200)
      $('.layer').find('.icon').animate({ opacity: 0, top: '0px' }, 200)
      currLayer.find('.in').stop(true, true)
      currLayer.find('.in').css({ opacity: 0 })
      currLayer.find('.out').animate({ top: '10px', width: '100%', opacity: 1 }, 300)
      currLayer.find('.icon').stop(true).delay(200).animate({ opacity: 1, top: '-20px' }, 300)
      currLayer.find('.text').stop(true).delay(400).animate({ opacity: 1 }, 700)
      event.stopPropagation()
      return false
    },
    function () {
      event.stopPropagation()
      var self = this
      t = setTimeout(function () {
        if ($(self).index() == 0) {
          autoPlayAnimate(5)
        } else {
          autoPlayAnimate($(self).index() + 1)
        }
      }, 300)
      return false
    }
  )
}