<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
<!-- Created by Tw93 on 17/07/31. -->

<template>
  <div>
    <lc-checkbox v-for="(item,i) in list"
      :has-top-border="hasTopBorder(i)"
      :has-bottom-border="hasBottomBorder(i,list)"
      v-bind="item"
      :config="config"
      @LcCheckboxItemChecked="LcCheckboxItemChecked"
      :key="i"></lc-checkbox>
  </div>
</template>

<script>
  import LcCheckbox from './index.vue';

  export default {
    components: { LcCheckbox },
    props: {
      list: {
        type: Array,
        default: () => ([])
      },
      config: {
        type: Object,
        default: () => ({})
      }
    },
    data: () => ({
      checkedList: []
    }),
    created () {
      const { list } = this;
      if (list && list.length > 0) {
        list.forEach((item, i) => {
          item.checked && this.checkedList.push(item.value);
        });
      }
    },
    methods: {
      LcCheckboxItemChecked (e) {
        if (e.checked) {
          this.checkedList.push(e.value);
        } else {
          const index = this.checkedList.indexOf(e.value);
          this.checkedList.splice(index, 1);
        }
        this.$emit('LcCheckboxListChecked', { checkedList: this.checkedList })
      },
      hasTopBorder: function(i) {
        if(i==0) {
          return true;
        } else {
          return false;
        }
      },
      hasBottomBorder: function(i,list) {
        if(i==list.length-1) {
          return true;
        } else {
          return false;
        }
      }
    }
  }
</script>
