<script>
/**
1恶座、全選功能
  每一行都會別選中
  每行的小計價格會匯總加到一起放入總價
2、單選功能
  這一行會被選中或者取消選中
  將購物車內(nèi)被選中的行的小計價格匯總加到一起放入總計
  判斷是否是被全選了(全選按鈕是否該被選中)
3沥阳、數(shù)量加減按鈕(一)
  這一行被選中
  數(shù)量進行添加或者減少(最少為1)
  計算這一行的小計價格
  將購物車內(nèi)被選中的行的小計價格匯總加到一起放入總計
4跨琳、手動修改數(shù)量
  這一行被選中
  計算這一行的小計價格
  將購物車內(nèi)被選中的行的小計價格匯總加到一起放入總計
5、刪除按鈕
  這一行會被移掉
  將購物車內(nèi)被選中的行的小計價格匯總加到一起放入總計
6桐罕、刪除被選中的商品
  被選中的商品會被刪除
  購物車內(nèi)總計價格為0
*/
</script>

<script>
  // 找到 DOM 節(jié)點
  var add = document.querySelectorAll('.Increase')   // 所有的加按鈕
  var reduce = document.querySelectorAll('.Reduce')  // 所有的減按鈕
  var numIpt = document.querySelectorAll('.unm')   // 找到所有數(shù)量輸入框
  var rows = document.querySelectorAll('.row')      // 找到所有的行
  var choose = document.querySelectorAll('.choose')  // 找到所有單選框
  var chooseAll = document.querySelectorAll('choose_all')  // 找到所有的全選按鈕
  var btnDel = document.querySelectorAll('.btn-del')    // 找到所有的刪除按鈕
  var delCheck = document.querySelector('.del-check')   // 刪除被選中
 
  // 數(shù)量添加事件 1
  for(var i = 0; i < add.length; i++) {
    add[i].onclick = function() {
      numChange(this, 'add')         // this指向當(dāng)前被點擊的節(jié)點
    }
  }

  // 數(shù)量減少事件 2
  for(var i = 0; i < reduce.length; i++) {
    reduce[i].onclick = function() {
      numChange(this, 'reduce')
    }
  }

  // 手動修改數(shù)量 3
  for(var i = 0; i < numIpt; i++) {
    // 輸入完之后
    numIpt[i].onblur = function() {
      if(this.value < 1) {   // 數(shù)量不可以少于1
        this.value = 1
      }
      this.value = parseInt(this.value)   // 保證數(shù)量是整數(shù)
      numChange(this, 'cursor')
    }
  }

  // 單選框點擊事件  5
  for(var i = 0; i < choose.length; i++) {
    choose[i].onclick = function() {
      getTotal()   // 計算總價
    }
  }

  // 全選 6
  for(var i = 0; i < chooseAll.length; i++) {
    chooseAll[i].onclick = function() {
      for(var i = 0; i < rows.length; i++) {
        var check = rows[i].querySelector('.choose')   // 找到每行的選中框
        check.checked = this.checked
      }
      chooseAll[0].checked = chooseAll[1].checked = this.checked
      getTotal()
    }
  }
  
  //  刪除這一行  7 
  for(var i = 0; i < btnDel.length; i++) {
    btnDel[i].onclick = function(event) {
      event.preventDefault();
      var tr = this.parentNode.parentNode
      tr.parentNode.removeChild(tr)
      getTotal()
    }
  }

  // 刪除被選中的商品
  delCheck.onclick = function() {
    rows = document.querySelectorAll('.row')
    for(var i = 0; i < rows.length; i++) {
      // 找到被選中的行
      var check = rows[i].querySelector('.choose')   // 找到每行的選中框
      if(check.checked) {
        rows[i].parentNode.removeChild(rows[i])
      }
    }
    getTotal()
  }

  // 總計功能 4
  function getTotal() {
    // 1脉让、設(shè)置總價
    var total = 0

    // 遍歷所有行
    rows = document.querySelectorAll('.row')
    for(var i = 0; i < rows.length; i++) {
      // 找到被選中的行
      var check = rows[i].querySelector('.choose')   // 找到每行的選中框
      if(check.checked) {
        var smTot = rows[i].querySelector('.u-price').innerHTML
        smTot = Number(smTot)
        total = total + smTot
      }
    }

    var tPrice = document.querySelector('.t-price')
    tPrice.innerHTML = total.toFixed(2)

    // 2. 判斷是否全選
    var isAllCheck = true    // 
    for(var i = 0; i < rows.length; i++) {
      var check = rows[i].querySelector('.choose')   // 找到每行的選中框
      if(!check.checked) {    // 一旦有沒有被選中的
        isAllCheck = false
        break                   // 
      }
      if(rows.length) {
        isAllCheck = false
      }
    }
    chooseAll[0].checked = isAllCheck
    chooseAll[1].checked = isAllCheck

    // 3. 計算總商品個數(shù)
    var allNum = 0
    for(var i = 0; i < rows.length; i++) {
      // 找到被選中的行
      var check = rows[i].querySelector('.choose')   // 找到每行的選中框
      if(check.checked) {
        var smTot = rows[i].querySelector('.unum').value
        smTot = Number(smTot)
        allNum = allNum + smTot
      }
    }
    document.querySelector('.t-number').innerHTML = allNum
  }
  getTotal()
  /**
    數(shù)量變化的函數(shù)
    {Object} dom 被點擊的那個DOM節(jié)點
    {String} act 數(shù)量添加還是減少還是手動修改
  */
  function numChange(dom, act) {
     // 1. 數(shù)量變化
     var amount = dom.parentNode     // 父標(biāo)簽
      var ipt = amount.querySelector('.num')   // 找到數(shù)量框
      var num = ipt.value      // 數(shù)量

      //
      if(act == 'add') {   // 添加行為
        num++
        ipt.value = num
      } else if(act == 'reduce') {  // 減少行為
        if(num == 1) {
          num = 1      // 數(shù)量是一就不變化
        } else {
          num--          // 數(shù)量減一
        }
        ipt.value = num
      } else if (act == 'cursor'){
        console.log('手動修改數(shù)量')
      } else {   // 非法行為
        return
      }


      // 2. 計算這一行的小計
      var tr = amount.parentNode.parentNode         // 找到當(dāng)前行
      var unit = tr.querySelector('.unit')      // 價格框

      var price = unit.innerHTML
      var smTotal = num * price             // 小計
      smTotal = smTotal.toFixed(2)       // 保留兩位小數(shù)
      // 3. 將小計放入到對應(yīng)的位置
      var smPrice = tr.querySelector('.u-price')     // 小計框
      smPrice.innerHTML = smTotal
      // 4. 這一行被選中
      var choose = tr.querySelector('.choose')
      choose.checked = true
      // 5. 計算總計價格
      getTotal()
  }

</script>