<template lang="html">
  <div class="">
    <checker type="checkbox" @on-change="checkerChange" v-model="checkValue" default-item-class="checklist-item" selected-item-class="checklist-item-selected">
      <checker-item :value="item.key" v-for="(item, index) in options" :key="index"><i></i><span>{{item.value}}</span></checker-item>
    </checker>
  </div>
</template>

<script>
import { Checker, CheckerItem, TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    Checker,
    CheckerItem
  },
  data () {
    return {
      checkValue: ''
    }
  },
  methods: {
    checkerChange (val) {
      this.$emit('change', val)
    }
  }
}
</script>

<style lang="less" scoped>
.checklist-item {
  margin-right: 15px;
  span {
    display: inline-block;
    vertical-align: middle;
  }
  i {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-size: cover;
    background-image: url(../../assets/unchecked.png);
    vertical-align: middle;
    margin-right: 0.5rem;
  }
}
.checklist-item-selected {
  i {
    background-image: url(../../assets/checked.png)
  }
}
</style>