import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
 state: {
  carList: [] //購(gòu)物車(chē)的商品
 },
 mutations: {
  // 加
  addCar(state, params) {
   let CarCon = state.carList;
   // 判斷如果購(gòu)物車(chē)是否有這個(gè)商品，有就只增加數(shù)量，否則就添加一個(gè)
   // some 只要有一個(gè)isHas為true,就為true
   let isHas = CarCon.some((item) => {
    if (params.id == item.id) {
     item.num++;
     return true;
    } else {
     return false;
    }
   })
 
   if (!isHas) {
    let obj = {
     "id": params.id,
     "title": params.title,
     "price": params.price,
     "num": 1,
    }
    this.state.carList.push(obj)
   }
  },
  // 減
  reducedCar(state,params){
   let len=state.carList.length;
   for(var i=0;i<len;i++){
    if(state.carList[i].id==params.id){
     state.carList[i].num--
     if(state.carList[i].num==0){
      state.carList.splice(i,1);
      break;
     }
    }
   }
  },
  //移出
  deleteCar(state,params){
   let len=state.carList.length;
   for(var i=0;i<len;i++){
    if(state.carList[i].id==params.id){
     state.carList.splice(i,1);
     break;
    }
   }
  },
 
   // 初始化購(gòu)物車(chē)，有可能用戶(hù)一登錄直接進(jìn)入購(gòu)物車(chē)
  // initCar(state, car) {
  //  state.carList = car
  // },
 
 },
 actions: {
  // 加
  addCar({ commit }, params) {
   // console.log(params) //點(diǎn)擊添加傳過(guò)來(lái)的參數(shù)
   // 使用setTimeout模擬異步獲取購(gòu)物車(chē)的數(shù)據(jù)
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交給mutations
     commit("addCar", params)
    }
   }, 100)
  },
  // 減
  reducedCar({ commit }, params) {
   // console.log(params) //點(diǎn)擊添加傳過(guò)來(lái)的參數(shù)
   // 使用setTimeout模擬異步獲取購(gòu)物車(chē)的數(shù)據(jù)
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交給mutations
     commit("reducedCar", params)
    }
   }, 100)
  },
  // 移出
  deleteCar({ commit }, params) {
   // console.log(params) //點(diǎn)擊添加傳過(guò)來(lái)的參數(shù)
   // 使用setTimeout模擬異步獲取購(gòu)物車(chē)的數(shù)據(jù)
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交給mutations
     commit("deleteCar", params)
    }
   }, 100)
  }
  // initCar({ commit }) {
  //  setTimeout(function () {
  //   let result = 'ok'
  //   if (result == 'ok') {
  //    // 提交給mutations
  //    commit("initCar", [{
  //     "id": 20193698,
  //     "title": '我是購(gòu)物車(chē)原來(lái)的',
  //     "price": 30,
  //     "num": 100,
  //    }])
  //   }
  //  }, 100)
  // }
 },
 getters: {
  //返回購(gòu)物車(chē)的總價(jià)
  totalPrice(state) {
   let Carlen = state.carList;
   let money = 0;
   if (Carlen.length != 0) {
    Carlen.forEach((item) => {
     money += item.price * item.num
    })
    return money;
   } else {
    return 0;
   }
  },
  //返回購(gòu)物車(chē)的總數(shù)
  carCount(state) {
   return state.carList.length
  }
 },
})

 <template>
 <!-- 商品列表 -->
 <div id="listBox">
 <!-- -->
 <router-link :to="{path:'/car'}" style="line-height:50px">跳轉(zhuǎn)到購(gòu)物車(chē)</router-link>
 <el-table :data="tableData" border style="width: 100%">
  <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
  <el-table-column prop="title" align="center" label="商品標(biāo)題"></el-table-column>
  <el-table-column prop="price" align="center" label="商品價(jià)格"></el-table-column>
  <el-table-column label="操作" align="center">
  <template slot-scope="scope">
   <el-button @click="addCar(scope.row)" type="text" size="small">加入購(gòu)物車(chē)</el-button>
  </template>
  </el-table-column>
 </el-table>
 </div>
</template>
 
<script>
export default {
 name: "listBox",
 data() {
 return {
  tableData: [] //商品列表
 };
 },
 methods: {
 // 初始化商品列表
 initTable(){
  this.$gAjax(`../static/shopList.json`)
  .then(res => {
   console.log(res)
   this.tableData=res;
  })["catch"](() => {});
 },
 // 加入購(gòu)物車(chē)
 addCar(row){
  // console.log(row)
  // 提交給store里面actions 由于加入購(gòu)物車(chē)的數(shù)據(jù)要同步到后臺(tái)
  this.$store.dispatch('addCar',row)
 }
 
 },
 mounted () {
 this.initTable()
 }
};
</script>
<style>
#listBox {
 width: 900px;
 margin: 0 auto;
}
</style>

<template>
 <!-- 購(gòu)物車(chē) -->
 <div id="carBox">
 <!-- 商品總數(shù) -->
 <h2 style="line-height:50px;font-size:16px;font-weight:bold">合計(jì)：總共{{count}}個(gè)商品，總價(jià){{totalPrice}}元</h2>
 <p v-if="count==0">空空如也！·······</p>
 <div v-else>
  <el-table :data="carData" border style="width: 100%">
  <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
  <el-table-column prop="title" align="center" label="商品標(biāo)題"></el-table-column>
  <el-table-column prop="price" align="center" label="商品價(jià)格"></el-table-column>
  <el-table-column label="操作" align="center">
   <template slot-scope="scope">
   <el-button @click="reduceFun(scope.row)" type="text" size="small">-</el-button>
   <span >{{scope.row.num}}</span>
   <el-button @click="addCar(scope.row)" type="text" size="small">+</el-button>
 
   <el-button @click="deleteFun(scope.row)" type="text" size="small">刪除</el-button>
   </template>
  </el-table-column>
  </el-table>
 </div>
 </div>
</template>
 
<script>
export default {
 name: "carBox",
 data() {
 return {};
 },
 computed: {
 //購(gòu)物車(chē)列表
 carData() {
  return this.$store.state.carList;
 },
 //商品總數(shù)
 count() {
  return this.$store.getters.carCount;
 },
 //商品總價(jià)
 totalPrice() {
  return this.$store.getters.totalPrice;
 }
 },
 methods: {
 // 增加數(shù)量
 addCar(row){
  this.$store.dispatch('addCar',row)
 },
 // 減數(shù)量
 reduceFun(row){
  this.$store.dispatch('reducedCar',row)
 },
 // 刪除
 deleteFun(row){
  this.$store.dispatch('deleteCar',row)
 }
 
 // 用戶(hù)首次登錄請(qǐng)求購(gòu)物車(chē)的數(shù)據(jù)
 // initCar(){
 // this.$store.dispatch('initCar')
 // }
 },
 created () {
 // this.initCar();
 },
 mounted() {}
};
</script>
 
<style>
#carBox {
 width: 900px;
 margin: 0 auto;
}
</style>