const state = {
  cartList: [],  // 購(gòu)物車列表
  totalCount: 0,
  allChecked: false,  // 全選
  shopCheckedNum: 0,  // 選中的店鋪數(shù)量
  /**
   * cartList: [
   *  {
   *    shopName,
   *    shopChecked: false,  // 店鋪選中
   *    proCheckedNum: 0,  // 當(dāng)前店鋪商品選中數(shù)量
   *    cartGoodsInfo: [
   *      {iid,styleName,proChecked...}  // 里邊是商品的各種信息，proChecked是商品選中狀態(tài)
   *      {...}
   *    ]
   *  },
   *  {...}
   * ]
   */
};

// 這是選擇按鈕，我把它封裝成了一個(gè)組件  chooseClass接收父組件傳值改變選中時(shí)的樣式
// 商品的選中按鈕
<cart-choose
    :chooseClass="$store.state.cartList[index].products[key].proChecked"
    @click.native.stop="proCheckedClick(index, key)"
/>
// 店鋪的選擇按鈕  （我把店鋪列表和商品分成了兩個(gè)組件，index是傳給店鋪列表內(nèi)商品的）
<cart-choose
    :index="index"
    :chooseClass="$store.state.cartList[index].shopChecked"
    @click.native="shopCheckedClick(index)"
/>
// 全選按鈕
<cart-choose :chooseClass="$store.state.allChecked" />

// index：店鋪索引值  key：當(dāng)前商品在當(dāng)前店鋪內(nèi)的索引值
proCheckedClick(index, key) {
    this.$store.dispatch("ProChecked", { index, key });
},
shopCheckedClick(index) {
    this.$store.dispatch("ShopChecked", index);
},
allChecked() {
    this.$store.dispatch("AllChecked");
},

// 單個(gè)商品選中
proCheckedTrue(state, { index, key }) {
  const cartList = state.cartList;

  cartList[index].products[key].proChecked = true;
  cartList[index].proCheckedNum += 1;  // 商品數(shù)量+1
},
// 單個(gè)商品取消選中
proCheckedFalse(state, { index, key }) {
  const cartList = state.cartList;

  cartList[index].products[key].proChecked = false;
  cartList[index].proCheckedNum -= 1;
},
// 店鋪選中
shopCheckedTrue(state, index) {
  const cartList = state.cartList;

  cartList[index].shopChecked = true;
  console.log(state.shopCheckedNum);
  state.shopCheckedNum += 1;  // 店鋪數(shù)量+1
},
// 店鋪取消選中
shopCheckedFalse(state, index) {
  const cartList = state.cartList;

  cartList[index].shopChecked = false;
  state.shopCheckedNum -= 1;
},
// 全選
allCheckedTrue(state) {
  state.allChecked = true;
},
// 取消全選
allCheckedFalse(state) {
  state.allChecked = false;
},

// 商品狀態(tài)
ProChecked({ state, commit }, { index, key }) {
  const cartList = state.cartList;

  // 這里要取反，因?yàn)榇藭r(shí)的proChecked是點(diǎn)擊按鈕前的
  !cartList[index].products[key].proChecked
    ? commit("proCheckedTrue", { index, key })
    : commit("proCheckedFalse", { index, key });

  // 商品全選，所選店鋪選中
  if (cartList[index].proCheckedNum === cartList[index].products.length) {
    commit("shopCheckedTrue", index);
  }
  // 商品沒(méi)全選 → 如果店鋪選中改為未選中
  // (不加這個(gè)判斷條件的話 本來(lái)沒(méi)選中的店鋪也會(huì)執(zhí)行shopCheckedFalse,導(dǎo)致商品選中數(shù)量會(huì)-1)
  else if (cartList[index].shopChecked) {
    commit("shopCheckedFalse", index);
  }

  // 判斷店鋪是否全選，改變?nèi)x按鈕狀態(tài)
  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},
// 店鋪選中狀態(tài)
ShopChecked({ state, commit }, index) {
  const cartList = state.cartList;

  if (!cartList[index].shopChecked) {
    // 讓店鋪選中 → 將當(dāng)前店鋪內(nèi)未選中的商品改為選中
    commit("shopCheckedTrue", index);
    for (let k in cartList[index].products) {
      if (!cartList[index].products[k].proChecked) {
        commit("proCheckedTrue", { index, key: k });
      }
    }
  } else {
    // 店鋪取消選中 → 將當(dāng)前店鋪內(nèi)所有商品改為未選中
    commit("shopCheckedFalse", index);
    for (let k in cartList[index].products) {
      commit("proCheckedFalse", { index, key: k });
    }
  }

  if (state.shopCheckedNum === cartList.length) {
    commit("allCheckedTrue");
  } else {
    commit("allCheckedFalse");
  }
},
// 全選
AllChecked({ state, commit }) {
  const cartList = state.cartList;

  if (!state.allChecked) {
    // 全選 → 所有未選中的店鋪+商品全部選中
    commit("allCheckedTrue");
    for (let i in cartList) {
      if (!cartList[i].shopChecked) {
        commit("shopCheckedTrue", i);
      }
      for (let k in cartList[i].products) {
        if (!cartList[i].products[k].proChecked) {
          commit("proCheckedTrue", { index: i, key: k });
        }
      }
    }
  } else {
    // 取消全選 → 所有店鋪+商品取消選中
    commit("allCheckedFalse");
    for (let i in cartList) {
      commit("shopCheckedFalse", i);
      for (let k in cartList[i].products) {
        commit("proCheckedFalse", { index: i, key: k });
      }
    }
  }
},

// 單個(gè)商品選中
  ProChecked(state, { index, key }) {
    const cartList = state.cartList;

    // 商品選中狀態(tài)取反
    cartList[index].products[key].proChecked =
      !cartList[index].products[key].proChecked;

    // 如果選中，選中數(shù)量+1，取消選中則-1
    if (cartList[index].products[key].proChecked) {
      cartList[index].proCheckedNum++;
    } else {
      cartList[index].proCheckedNum--;
    }

    // 如果商品全選，則店鋪選中；否則店鋪取消選中
    if (cartList[index].proCheckedNum === cartList[index].products.length) {
      cartList[index].shopChecked = true;
      state.shopCheckedNum++;
    } else if (cartList[index].shopChecked) {
      cartList[index].shopChecked = false;
      state.shopCheckedNum--;
    }
    // 判斷店鋪是否全選，改變?nèi)x按鈕狀態(tài)
    if (state.shopCheckedNum === cartList.length) {
      state.allChecked = true;