# shop

/* jshint esversion: 8 */

window.addEventListener("load", (event) => {
   function setMasksInfoArray()
   // 產生口罩套資訊的array。
   {
      let masksInfoArr = [{
         html: './promotion_detail.html',
         image: './assets/images/mask-1.jpg',
         title: '小偵MD-309超耐用套',
         text: '小偵出品，保證安全，讓您安心。<br>1個80，3個200。'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/mask-2.jpg',
         title: '三耳牌睡眠用口罩套',
         text: '讓您安心睡眠，睡個好覺。<br>特價120元。買再多也沒打折。'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/mask-3.jpg',
         title: '湘江標戰鬥型口罩套',
         text: '這型口罩套可用於戰場，軍規，防彈。<br>1000元，沒價講。'
      }
      ]
      return masksInfoArr
   }


   function setReadersInfoArray()
   // 產生讀卡機資訊的array。
   {
      let readersInfoArr = [{
         html: './promotion_detail.html',
         image: './assets/images/讀卡機-1.jpg',
         title: 'EZ100PU ATM 讀卡機',
         text: '智慧型IC 晶片 自然憑證/健保卡 報稅好幫手.<br><br><br>$156'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/讀卡機-2.jpg',
         title: 'fujiei ATM 晶片讀卡機',
         text: '口罩實名制2.0上網讀取健保卡買口罩必備,支援各類IC卡讀卡程式.網路轉帳.繳費.報稅.<br>$269'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/讀卡機-3.jpg',
         title: 'IT-500U報稅晶片讀卡機',
         text: 'ATM轉帳 報稅 自然人憑證 工商憑證一指搞定,流線造型,隨插即用<br>$239<br>'
      }
      ]
      return readersInfoArr
   }

   function setChairsInfoArray()
   // 產生摺疊椅資訊的array。
   {
      let chairsInfoArr = [{
         html: './promotion_detail.html',
         image: './assets/images/折疊椅-1.jpg',
         title: '7075超輕量鋁折疊椅',
         text: '歐洲波希米亞風限量款超輕量鋁合金折疊椅/童軍<br><br>$249'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/折疊椅-2.jpg',
         title: 'DF羅恩-戶外圓桌椅',
         text: '戶外一圓桌二椅,舒適靠背設計,休閒自在的享受<br><br>$3840'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/折疊椅-3.jpg',
         title: '特力屋便利階梯椅',
         text: '真心良品便利可收折三階梯椅1入組藍色<br><br><br>$1080'
      },
      {
         html: './promotion_detail.html',
         image: './assets/images/折疊椅-4.jpg',
         title: 'AMOS 亞摩斯折疊椅',
         text: '輕巧耐用素面白塑膠折疊椅<br><br><br><br>$699'
      }
      ]
      return chairsInfoArr
   }

   let masksInfo = { // 要給pure.js用的資料object。
      masks: setMasksInfoArray(),
      readers: setReadersInfoArray(),
      chairs: setChairsInfoArray()
   }

   function renderProductsInfo(productsInfo) {
      let directive = {
         '.card-mask-col': {
            'mask<-masks': {
               '.card-anchor@href': 'mask.html',
               'img@src': 'mask.image',
               '.card-title': 'mask.title',
               '.card-text': 'mask.text'
            }
         },
         '.card-reader-col': {
            'reader<-readers': {
               '.card-anchor@href': 'reader.html',
               'img@src': 'reader.image',
               '.card-title': 'reader.title',
               '.card-text': 'reader.text'
            }
         },
         '.card-chair-col': {
            'chair<-chairs': {
               '.card-anchor@href': 'chair.html',
               'img@src': 'chair.image',
               '.card-title': 'chair.title',
               '.card-text': 'chair.text'
            }
         }
      }
      $p('main').render(productsInfo, directive)
   }

   // 渲染
   renderProductsInfo(masksInfo)
})