<template>
  <div>
    <div class="shopping_list_page">
      <ShoppingCartCell
        v-for="(item, index) in list"
        :cellItem="item"
        :cellIndex="index"
        :cellCheck="checkLists[index]"
        :key="item.id"
        :readOnly="readOnly"
        @changeState="changeState"
        @changeCellMsg="changeCellMsg"
        @deleteItem="deleteItem"
      />
    </div>
  </div>
</template>

<script>
import ShoppingCartCell from "@/components/shopping-cart/shopping-cart-cell";
export default {
  components: {
    ShoppingCartCell
  },
  props: {
    readOnly: {
      type: Boolean,
      default: false
    },
    checkShopAll: {
      type: Boolean
    },
    list: {
      type: Array
    },
    checkList: {
      type: Array,
      default: ()=> {[]}
    }
  },
  watch: {
    checkList: {
      immediate: true, // 这句重要
      handler(val) {
        this.checkLists = val;
      }
    }
  },
  data: () => ({
    checkedAll: false,
    checkLists: []
  }),
  mounted() {},
  methods: {
    changeState(val) {
      this.$emit("changeState", val);
    },
    setAllState(val) {
      for (let i = 0; i < this.checkLists.length; i++) {
        this.$set(this.checkLists, i, val)
      }
    },
    changeCellMsg(val) {
      this.$emit("changeCellMsg", val)
    },
    deleteItem(val) {
      this.$emit("deleteItem", val)
    }
  }
};
</script>
