<template>
  <div class="app-container">
    <Header title="购物车案例"></Header>
    <!-- 循环渲染每个商品 -->
    <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :thumbnail="item.goods_img"
      :isChecked="item.goods_state" :id="item.id" :price="item.goods_price" :count="item.goods_count"
      @change-state="updateGoodState"></Goods>
    <!-- 渲染底部组件 -->
    <Footer :checked="allChecked" :totalPrice="totalAmount" :totalCheckedCount="totalCount"
      @change-all-state="changeAllState"></Footer>
  </div>
</template>

<script>
import axios from 'axios'; // 引入 axios 模块
import Header from '@/components/Header/Header.vue'; // 引入 Header 组件
import Goods from '@/components/Goods/Goods.vue'; // 引入 Goods 组件
import Footer from '@/components/Footer/Footer.vue'; // 引入 Footer 组件
import eventBus from '@/components/eventBus'; // 引入事件总线实例

export default {
  components: {
    Header,
    Goods,
    Footer,
  },
  data() {
    return {
      list: [], // 初始化商品列表为空数组
    }
  },
  methods: {
    // 初始化购物车数据
    async initBuyCars() {
      const { data } = await axios.get('https://www.escook.cn/api/cart'); // 发送 GET 请求获取数据
      if (data.status === 200) { // 判断请求是否成功
        this.list = data.list; // 将获取到的数据保存到组件的 list 数据中
      }
    },
    // 更新商品状态的方法
    updateGoodState({ id, state }) {
      console.log(id,state);
      this.list.some(item => {
        if (item.id === id) {// 查找到对应 id 的商品
          item.goods_state = state; // 更新对应商品的状态
          return true
        }
      });

    },
    // 修改全选状态的方法
    changeAllState(state) {
      this.list.forEach(item => item.goods_state = state); // 循环遍历每件商品，将其状态改为全选状态
    },
  },
  computed: {
    // 计算是否全选
    allChecked() {
      return this.list.every(item => item.goods_state); // 如果每件商品的状态都是已选，则返回 true
    },
    // 计算选中商品的总价
    totalAmount() {
      return this.list.filter(item => item.goods_state).reduce((total, item) => total += item.goods_price * item.goods_count, 0); // 过滤出已选商品，然后用 reduce 计算商品总价
    },
    // 计算选中商品的数量
    totalCount() {
      return this.list.filter(item => item.goods_state).reduce((total, item) => total += item.goods_count, 0); // 过滤出已选商品，然后用 reduce 计算商品数量总和
    },
  },
  created() {
    // 在组件创建以后，发送请求初始化购物车数据
    this.initBuyCars();
    // 监听事件总线的 'goods-count-change' 事件，当事件触发时更改对应商品的数量
    eventBus.on('goods-count-change', ({ id, value }) => {
       this.list.some(item => {// 查找到对应 id 的商品
        if(item.id === id){
          item.goods_count = value; // 更新对应商品的数量
          return true
        }
       }); 
      
    });
  },
};
</script>

<style lang="less" scoped>
/* 应用程序容器样式 */
.app-container {
  padding-top: 45px;
  /* 顶部内边距 */
  padding-bottom: 50px;
  /* 底部内边距 */
}
</style>
 
