// cart模塊
export const CART_ADD_PRODUCT_TO_CART = 'CART_ADD_PRODUCT_TO_CART' // 添加購物車
export const CART_DEL_PRODUCT_TO_CART = 'CART_DEL_PRODUCT_TO_CART' // 刪除購物車
export const CART_CHANGE_LOGIN_STATUS = 'CART_CHANGE_LOGIN_STATUS' // 切換登陸狀態(tài)
export const CART_ADD_PRODUCT_QUANTITY = 'CART_ADD_PRODUCT_QUANTITY' // 添加商品數(shù)量
export const CART_DEL_PRODUCT_QUANTITY = 'CART_DEL_PRODUCT_QUANTITY' // 減少商品數(shù)量
export const CART_SET_CHECKOUT_STATUS_ALL = 'CART_SET_CHECKOUT_STATUS_ALL'  // 一鍵改變所有商品購買狀態(tài)的方法

// products模塊
export const PRODUCTS_SET_PRODUCT = 'PRODUCTS_SET_PRODUCT' // 獲取所有商品的列表

import { fetchGet } from "@/api/index" // api文件夾下封裝的axios.get請求函數(shù)
import * as types from '../types' // types目錄下的mutations函數(shù)的常量名
const state = {
 recommendList: [] // 存放所有商品的信息
}

const getters = {}

const mutations = {
 [types.PRODUCTS_SET_PRODUCT](state, products) { // 第一個參數(shù)是state 可以修改state 將請求回來的數(shù)據(jù)保存在state中
  state.recommendList = products
 }
}

const actions = {
 getAllProducts({ commit }) { // 所有的api請求都放在actions中
  fetchGet("/cart").then(res => {
   let allProducts = res.data.list.list
   commit(types.PRODUCTS_SET_PRODUCT, allProducts)
  })
 }
}

export default {
 namespaced: true, // 添加命名空間
 state,
 getters,
 mutations,
 actions
}

 /*
 {
  productid: "11137",
  name: "小米CC9 Pro 6GB+128GB", 
  price: 2799, 
  image: "http://i1.mifile.cn/a1/pms_1572941393.18077211.jpg"，
  comments: 0
 }
 */

this.$store.dispatch("products/getAllProducts"); 
methods: mapActions("cart", ["addProductToCart"])

computed: mapGetters("user", ["loginStatus"])

import * as types from '../types'

const state = { // 購物車需要自己的狀態(tài) 購物列表
 items: [ 
  { productid: "11137", quantity: 1, checkoutStatus: false },
  { productid: "8750", quantity: 1, checkoutStatus: false }
 ]
}

const getters = {
 // 返回購物車商品列表完整信息
 cartProducts: (state, getters, rootState) => {
  if (!state.items.length) return [] // map不會對空數(shù)組進行檢測 map不會改變原始數(shù)組
  return state.items.map(({ productid, quantity, checkoutStatus }) => { // map()方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調用函數(shù)處理的后值。
   const product = rootState.products.recommendList.find(product => product.productid === productid) // 拿到items中的數(shù)據(jù)去查閱products中的數(shù)據(jù), rootState(根節(jié)點狀態(tài))參數(shù)可以拿到別的模塊的state狀態(tài)
   if (!product) return {} // action請求異步，如果此時的數(shù)據(jù)還沒有請求回來 就返回空對象
   return {
    src: product.image, // product的圖片地址
    name: product.name, // product的名字
    price: product.price, // product的單價
    productid, // product的id
    quantity, // product的數(shù)量，默認為1
    simpleTotal: quantity * product.price, // 單項product的總價價
    checkoutStatus: checkoutStatus // product的選中狀態(tài)
   }
  })
 },
 // 返回選中商品的總價
 cartTotalPrice: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   if (product.checkoutStatus) {
    return total + product.simpleTotal
   }
   return total
  }, 0)
 },
 // 返回所有商品總價,不管有沒有選中
 allPrice: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   return total + product.simpleTotal
  }, 0)
 },
 // 返回所有商品總數(shù)量,不管有沒有選中
 allProducts: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   return total + product.quantity
  }, 0)
 },
 // 返回所有選中的商品數(shù)量
 allSelectProducts: (state, getters) => {
  return getters.cartProducts.reduce((total, product) => {
   if (product.checkoutStatus) {
    return total + product.quantity
   }
   return total
  }, 0)
 },
 // 返回所有商品條數(shù)
 allProductsItem: (state) => {
  return state.items.length
 },
 // 返回商品是否全選 是返回true 否則false
 isSelectAll: (state) => {
  if (!state.items.length) return false
  return state.items.every(item => { // every() 不會對空數(shù)組進行檢測
   return item.checkoutStatus === true
  })
 },
 // 返回是否有選中的商品 是返回true 否則false
 hasSelect: (state) => {
  if (!state.items.length) return false
  return state.items.some(item => { // some() 不會對空數(shù)組進行檢測
   return item.checkoutStatus === true
  })
 }
}

const mutations = {
 // 添加一條商品的方法
 [types.CART_ADD_PRODUCT_TO_CART](state, { productid }) {
  state.items.push({
   productid,
   quantity: 1,
   checkoutStatus: false
  })
 },
 // 刪除一條商品的方法
 [types.CART_DEL_PRODUCT_TO_CART](state, productid) {
  state.items.forEach((item, index) => {
   if (item.productid === productid) {
    state.items.splice(index, 1)
   }
  });
 },
 // 增加一條商品中商品數(shù)量的方法
 [types.CART_ADD_PRODUCT_QUANTITY](state, productid) {
  const cartItem = state.items.find(item => item.productid == productid)
  cartItem.quantity++
 },
 // 減少一條商品中商品數(shù)量的方法
 [types.CART_DEL_PRODUCT_QUANTITY](state, productid) {
  const cartItem = state.items.find(item => item.productid == productid)
  if (cartItem.quantity > 1) { // 商品數(shù)量大于1時才能減少
   cartItem.quantity--
  }
  else cartItem.quantity = 1
 },
 // 改變單條商品的選中不選中狀態(tài)的方法(單選按鈕)
 [types.CART_SET_CHECKOUT_STATUS](state, productid) {
  const cartItem = state.items.find(item => item.productid == productid)
  cartItem.checkoutStatus = !cartItem.checkoutStatus
 },
 // 改變所有商品的選中不選中狀態(tài)的方法(全選按鈕)
 [types.CART_SET_CHECKOUT_STATUS_ALL](state, status) {
  state.items.forEach(item => {
   if (!item.checkoutStatus === status) {
    item.checkoutStatus = status
   }
  })
 }
}

const actions = {
 // 添加購物車的方法,如果此時購物車內(nèi)有該條商品,就添加商品數(shù)量,否則添加商品
 addProductToCart({ state, commit }, product) {
  const cartItem = state.items.find(item => item.productid === product.productid)
  if (!cartItem) {
   commit(types.CART_ADD_PRODUCT_TO_CART, { productid: product.productid })
  } else {
   commit(types.CART_ADD_PRODUCT_QUANTITY, cartItem.productid)
  }
 },
 // 購物車內(nèi)刪除一條商品的方法
 delProductToCart({ commit }, productid) {
  commit(types.CART_DEL_PRODUCT_TO_CART, productid)
 },
 // 添加商品數(shù)量的方法
 addProductQuantity({ commit }, productid) {
  commit(types.CART_ADD_PRODUCT_QUANTITY, productid)
 },
 // 減少商品數(shù)量的方法
 delProductQuantity({ commit }, productid) {
  commit(types.CART_DEL_PRODUCT_QUANTITY, productid)
 },
 // 切換一條商品的選中狀態(tài)的方法
 setCheckoutStatus({ commit }, productid) {
  commit(types.CART_SET_CHECKOUT_STATUS, productid)
 },
 // 切換所有商品選中狀態(tài)的方法
 setCheckoutStatusAll({ commit }, status) {
  commit(types.CART_SET_CHECKOUT_STATUS_ALL, status)
 }
}

export default {
 namespaced: true, // 添加命名空間
 state,
 getters,
 mutations,
 actions
}

{
	src: product.image, // product的圖片地址
  name: product.name, // product的名字
  price: product.price, // product的單價
  productid, // product的id
  quantity, // product的數(shù)量，默認為1
  checkoutStatus: checkoutStatus， // product的選中狀態(tài)
  simpleTotal: quantity * product.price, // 單項product的總價格
}

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './module/cart'
import products from './module/products'
import user from './module/user'
Vue.use(Vuex)

export default new Vuex.Store({
 // 設計數(shù)據(jù)中心 模塊
 modules: { // 分模塊
  user, 
  cart, 	 // 購物車 cart 
  products // 商品 products
 }
})