<!-- 占位 -->
<template>
 <div>
 <div class="product_table">
 <div class="product_info">商品信息</div>
 <div class="product_info">商品金額</div>
 <div class="product_info">商品數量</div>
 <div class="product_info">總金額</div>
 <div class="product_info">編輯</div>
 </div>
 <div class="product_table" v-for="(item,index) in getProductList" :key="index">
 <div style="width:20px;height:20px;border-radius:10px;border:1px solid black;" @click="checkSingle(item)" :class="{checked:item.makeChoose}"></div>
 <div class="product_info">{{item.productName}}</div>
 <div class="product_info">{{item.productPrice}}</div>
 <span @click="changeNumber(item,1)">+</span>
 <input type="text" v-model="item.prductQty" style="width: 30px;">
 <span @click="changeNumber(item,-1)">-</span>
 <div class="product_info">{{item.productPrice*item.prductQty}}</div>
 <div class="product_info" @click="deleteProduct(index)">刪除</div>
 </div>
 <div style="width:20px;height:20px;border-radius:10px;border:1px solid black;margin-top:10px" @click="checkAll()" :class="{checked:checkAllItem}"></div>
 <div>總價格:{{totalPrice}}</div>
 </div>
</template>
<script>
 import Vue from 'vue'
 export default {
 name: 'side-bar-placeholder',
 data () {
 return {
 getProductList:[
 {
 productName:'西瓜',
 productPrice:100,
 prductQty:3
 },
 {
 productName:'南瓜',
 productPrice:50,
 prductQty:2
 },
 {
 productName:'蘋果',
 productPrice:300,
 prductQty:3
 },
 ],
 totalPrice:0, //總金額
 checkAllItem:false, //全部選中
 checkedList:[] //選中的數
 }
 },
 methods:{
 //刪除某一項
 deleteProduct:function (index) {
 this.getProductList.splice(index,1) 
 this.calcTotalPrice() //這里要注意,當某一項刪除時,如果你選中了,這里也是要做計算總價格的
 },
 //修改數量
 changeNumber:function (number,add) {
 if(add<0){
 number.prductQty--;
 if(number.prductQty<'1'){ //因為數量最低是1
 number.prductQty=1
 }
 }else{
 number.prductQty++;
 } 
 this.calcTotalPrice() 
 },
 //選中單個的
 checkSingle:function (item){
 if(typeof item.makeChoose=='undefined'){ //這里要注意,因為checked字段根本不在this.getProductList里面,所以你要自己賦值進去
 Vue.set(item, 'makeChoose',true) //這里應該設為true
 }else{
 item.makeChoose=!item.makeChoose
 } 
 this.calcTotalPrice() 
 },
 //選中所有的
 checkAll:function (){ 
 this.checkAllItem=!this.checkAllItem
 var _this=this
 if(this.checkAllItem){
 this.getProductList.forEach(element => {
 if(typeof element.makeChoose=='undefined'){
  Vue.set(element, 'makeChoose',_this.checkAllItem) //讓每一小項跟隨checkall來變化
 }else{
 element.makeChoose=_this.checkAllItem
 }
 });
 }else{
 this.getProductList.forEach(element => {
 if(typeof element.makeChoose=='undefined'){
  Vue.set(element, 'makeChoose',_this.checkAllItem)
 }else{
 element.makeChoose=_this.checkAllItem
 }
 });
 } 
 this.calcTotalPrice() 
 },
 //計算總金額
 calcTotalPrice:function () {
 var _this=this
 this.totalPrice=0
 this.getProductList.forEach((element,index) => {
 if(element.makeChoose){
 _this.totalPrice+=element.productPrice*element.prductQty //這里是一個累加的過程,所以要用+=
 }
 }); 
 },
 //讓頁面一進來就處于選中的狀態(tài)
 makeAllChecked:function () {
 this.getProductList.forEach((item)=>{
 if(typeof item.makeChoose=='undefined'){
 Vue.set(item, 'makeChoose',true)
 }
 }) 
 }
 } ,
 watch:{
 //如果全部選中,那么全部選中的按鈕應該變綠,如果一項不是,應該變空
 getProductList:{
 handler:function (item) {
 this.checkedList=this.getProductList.filter((element)=>{
 return element.makeChoose==true;
 }) 
 //選中數<總數據
 if(this.checkedList.length<this.getProductList.length){
 this.checkAllItem=false
 }else{
 this.checkAllItem=true
 } 
 },
 deep:true //這個deep:true一定要寫,不然肯定不會時時變化的
 }
 } ,
 created:function (){
 this.makeAllChecked()
 }
 }
</script>
<style lang="less" scoped>
.product_table{
 display: flex;
 width: 100%;
}
.product_info{
 flex:1; 
}
.checked{
 background-color:green;
}
</style>