<template>
  <div class="dof-checkbox-list">
    <dof-checkbox
      v-for="(item, i) in list"
      v-bind="item"
      :hasTopBorder="i === 0 && needShowTopBorder ? true : false"
      v-on:dofCheckBoxItemChecked="dofCheckBoxItemChecked"
      :itemImg="item.itemImg"
      :key="i"
      :hasSubBottomBorder="_isColmo ? true : hasBorder"
    >
    </dof-checkbox>
  </div>
</template>

<style scoped>
@media screen and (weex-theme: diablo) {
  .dof-checkbox-list {
    background-color: #101315;
  }
}
</style>

<script>
// import { DofCheckbox } from '../../index';
import DofCheckbox from '../dof-checkbox'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofCheckbox },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    hasBorder: {
      type: Boolean,
      default: false
    },
    needShowTopBorder: {
      type: Boolean,
      default: false
    },
    needShowLastBottomBorder: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    checkedList: []
  }),
  created() {
    const { list } = this
    if (list && list.length > 0) {
      list.forEach(item => {
        item.checked && this.checkedList.push(item.value)
      })
    }
    // console.log("checkbox-list 初始化已选项", this.checkedList)
  },
  methods: {
    dofCheckBoxItemChecked(e) {
      // console.log("checkbox-list e",e)
      if (e.checked) {
        this.checkedList.push(e.value)
      } else {
        var index = this.checkedList.indexOf(e.value)
        this.checkedList.splice(index, 1)
      }
      this.$emit('dofCheckBoxListChecked', { checkedList: this.checkedList })
    }
  }
}
</script>
