// 引入一些需要用到的庫(kù)以及一些聲明
import * as puppeteer from 'puppeteer' // 引入Puppeteer
import mongo from '../lib/mongoDb' // 需要用到的 mongodb庫(kù)，用來(lái)存取爬取的數(shù)據(jù)
import chalk from 'chalk' // 一個(gè)美化 console 輸出的庫(kù)

const log = console.log // 縮寫 console.log
const TOTAL_PAGE = 50 // 定義需要爬取的網(wǎng)頁(yè)數(shù)量，對(duì)應(yīng)頁(yè)面下部的跳轉(zhuǎn)鏈接

// 定義要爬去的數(shù)據(jù)結(jié)構(gòu)
interface IWriteData { 
 link: string // 爬取到的商品詳情鏈接
 picture: string // 爬取到的圖片鏈接
 price: number // 價(jià)格，number類型，需要從爬取下來(lái)的數(shù)據(jù)進(jìn)行轉(zhuǎn)型
 title: string // 爬取到的商品標(biāo)題
}

// 格式化的進(jìn)度輸出 用來(lái)顯示當(dāng)前爬取的進(jìn)度
function formatProgress (current: number): string { 
 let percent = (current / TOTAL_PAGE) * 100
 let done = ~~(current / TOTAL_PAGE * 40)
 let left = 40 - done
 let str = `當(dāng)前進(jìn)度：[${''.padStart(done, '=')}${''.padStart(left, '-')}]  ${percent}%`
 return str
}

// 因?yàn)槲覀冃枰玫酱罅康?await 語(yǔ)句，因此在外層包裹一個(gè) async function
async function main() {
 // Do something
}
main()

// 進(jìn)入代碼的主邏輯
async function main() {
 // 首先通過(guò)Puppeteer啟動(dòng)一個(gè)瀏覽器環(huán)境
 const browser = await puppeteer.launch()
 log(chalk.green('服務(wù)正常啟動(dòng)'))
 // 使用 try catch 捕獲異步中的錯(cuò)誤進(jìn)行統(tǒng)一的錯(cuò)誤處理
 try {
  // 打開一個(gè)新的頁(yè)面
  const page = await browser.newPage()
  // 監(jiān)聽頁(yè)面內(nèi)部的console消息
  page.on('console', msg => {
   if (typeof msg === 'object') {
    console.dir(msg)
   } else {
    log(chalk.blue(msg))
   }
  })

  // 打開我們剛剛看見的淘寶頁(yè)面
  await page.goto('https://s.taobao.com/search?q=gtx1080&imgfile=&js=1&stats_click=search_radio_all%3A1&initiative_id=staobaoz_20180416&ie=utf8')
  log(chalk.yellow('頁(yè)面初次加載完畢'))

  // 使用一個(gè) for await 循環(huán)，不能一個(gè)時(shí)間打開多個(gè)網(wǎng)絡(luò)請(qǐng)求，這樣容易因?yàn)閮?nèi)存過(guò)大而掛掉
  for (let i = 1; i <= TOTAL_PAGE; i++) {
   // 找到分頁(yè)的輸入框以及跳轉(zhuǎn)按鈕
   const pageInput = await page.$(`.J_Input[type='number']`)
   const submit = await page.$('.J_Submit')
   // 模擬輸入要跳轉(zhuǎn)的頁(yè)數(shù)
   await pageInput.type('' + i)
   // 模擬點(diǎn)擊跳轉(zhuǎn)
   await submit.click()
   // 等待頁(yè)面加載完畢，這里設(shè)置的是固定的時(shí)間間隔，之前使用過(guò)page.waitForNavigation()，但是因?yàn)榈却臅r(shí)間過(guò)久導(dǎo)致報(bào)錯(cuò)（Puppeteer默認(rèn)的請(qǐng)求超時(shí)是30s,可以修改）,因?yàn)檫@個(gè)頁(yè)面總有一些不需要的資源要加載，而我的網(wǎng)絡(luò)最近日了狗，會(huì)導(dǎo)致超時(shí)，因此我設(shè)定等待2.5s就夠了
   await page.waitFor(2500)

   // 清除當(dāng)前的控制臺(tái)信息
   console.clear()
   // 打印當(dāng)前的爬取進(jìn)度
   log(chalk.yellow(formatProgress(i)))
   log(chalk.yellow('頁(yè)面數(shù)據(jù)加載完畢'))

   // 處理數(shù)據(jù)，這個(gè)函數(shù)的實(shí)現(xiàn)在下面
   await handleData()
   // 一個(gè)頁(yè)面爬取完畢以后稍微歇歇，不然太快淘寶會(huì)把你當(dāng)成機(jī)器人彈出驗(yàn)證碼（雖然我們本來(lái)就是機(jī)器人）
   await page.waitFor(2500)
  }

  // 所有的數(shù)據(jù)爬取完畢后關(guān)閉瀏覽器
  await browser.close()
  log(chalk.green('服務(wù)正常結(jié)束'))

  // 這是一個(gè)在內(nèi)部聲明的函數(shù)，之所以在內(nèi)部聲明而不是外部，是因?yàn)樵趦?nèi)部可以獲取相關(guān)的上下文信息，如果在外部聲明我還要傳入 page 這個(gè)對(duì)象
  async function handleData() {
   // 現(xiàn)在我們進(jìn)入瀏覽器內(nèi)部搞些事情，通過(guò)page.evaluate方法，該方法的參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)將會(huì)在頁(yè)面內(nèi)部運(yùn)行，這個(gè)函數(shù)的返回的數(shù)據(jù)將會(huì)以Promise的形式返回到外部 
   const list = await page.evaluate(() => {
    
    // 先聲明一個(gè)用于存儲(chǔ)爬取數(shù)據(jù)的數(shù)組
    const writeDataList: IWriteData[] = []

    // 獲取到所有的商品元素
    let itemList = document.querySelectorAll('.item.J_MouserOnverReq')
    // 遍歷每一個(gè)元素，整理需要爬取的數(shù)據(jù)
    for (let item of itemList) {
     // 首先聲明一個(gè)爬取的數(shù)據(jù)結(jié)構(gòu)
     let writeData: IWriteData = {
      picture: undefined,
      link: undefined,
      title: undefined,
      price: undefined
     }

     // 找到商品圖片的地址
     let img = item.querySelector('img')
     writeData.picture = img.src

     // 找到商品的鏈接
     let link: HTMLAnchorElement = item.querySelector('.pic-link.J_ClickStat.J_ItemPicA')
     writeData.link = link.href

     // 找到商品的價(jià)格，默認(rèn)是string類型 通過(guò)~~轉(zhuǎn)換為整數(shù)number類型
     let price = item.querySelector('strong')
     writeData.price = ~~price.innerText
     
     // 找到商品的標(biāo)題，淘寶的商品標(biāo)題有高亮效果，里面有很多的span標(biāo)簽，不過(guò)一樣可以通過(guò)innerText獲取文本信息
     let title: HTMLAnchorElement = item.querySelector('.title>a')
 
     writeData.title = title.innerText

     // 將這個(gè)標(biāo)簽頁(yè)的數(shù)據(jù)push進(jìn)剛才聲明的結(jié)果數(shù)組
     writeDataList.push(writeData)
    }
    // 當(dāng)前頁(yè)面所有的返回給外部環(huán)境
    return writeDataList
    
   })
   // 得到數(shù)據(jù)以后寫入到mongodb
   const result = await mongo.insertMany('GTX1080', list)

   log(chalk.yellow('寫入數(shù)據(jù)庫(kù)完畢'))
  }

 } catch (error) {
  // 出現(xiàn)任何錯(cuò)誤，打印錯(cuò)誤消息并且關(guān)閉瀏覽器
  console.log(error)
  log(chalk.red('服務(wù)意外終止'))
  await browser.close()
 } finally {
  // 最后要退出進(jìn)程
  process.exit(0)
 }
}