<template>
  <div>
    <div class="dash-line">
      <span></span>
    </div>
    <div class="check-head" style="margin: 0 0 10px 15px">
      <check-all :value.sync="checkAll" @click.native="checkAllClick(checkAll)">{{ name }}</check-all>
      <p style="display: inline-block">
        (<span style="color: #8fb5de">{{currCount}}</span>/<span>{{currTotal}}</span>)
      </p>
    </div>
    <checker
      v-model="checkValue"
      type="checkbox"
      default-item-class="check-item"
      disabled-item-class="check-item-disabled"
      selected-item-class="check-item-selected"
      @on-change="checkerChange"
      class="check-item-wrap-self">
      <checker-item
        v-for="(item, index) in list"
        :key="index"
        :value="item.key"
        v-if="!item.disabled"
        :disabled="item.disabled">{{item.value}}</checker-item>
    </checker>
  </div>
</template>

<script>
import { Checker, CheckerItem, CheckIcon, TransferDom } from 'vux'
import CheckAll from 'components/isCheckAll/index'
export default {
  props: ['list', 'id', 'name', 'currItemCount', 'itemTotal', 'isCheckAll', 'listCount'],
  directives: {
    TransferDom
  },
  components: {
    Checker,
    CheckerItem,
    CheckIcon,
    CheckAll
  },
  data () {
    return {
      checkValue: '',
      currCount: this.currItemCount,
      currTotal: this.itemTotal,
      checkAll: this.isCheckAll
    }
  },
  mounted () {
    if (this.isCheckAll) {
      this.checkValue = _.map(this.list, 'key')
      this.checkAll = true;
      this.currCount = this.checkValue.length
    } else {
      this.checkValue = this.filterKeys(this.list)
      this.checkAll = false;
      this.currCount = 0
    }
  },
  watch: {
    currItemCount (val) {
      this.currCount = val
    },
    itemTotal (val) {
      this.currTotal = val
    },
    isCheckAll (val) {
      this.checkAll = val
    }
  },
  methods: {
    filterKeys (arr) {
      let lists = [];
      _(arr).each(function (item) {
        if (item.isSelected && item.isSelected === true) {
          lists.push(item.key)
        }
      })
      return lists
    },
    checkAllClick (val) {
      if (val) {
        this.checkValue = _.map(this.list, 'key')
        this.checkAll = true;
        this.currCount = this.checkValue.length
      } else {
        this.checkValue = []
        this.checkAll = false;
        this.currCount = 0
      }
    },
    checkerChange (value) {
      let checkedCount = value.length;
      this.currCount = checkedCount
      this.checkAll = checkedCount === this.list.length;
      this.$emit('listChange', value)
    }
  }
}
</script>

<style lang="less" scoped>
.dash-line {
  padding: 0.6rem 0;
  span{
    display: block;
    width: 100%;
    border-bottom: 1px dashed #d9d9db;
  }
}
.checklist-item {
  span {
    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 {
  span {
    background-image: url(../../assets/checked.png)
  }
}
.check-item {
  background: #f6f6f6;
  color: #333;
  padding: 0.4rem;
  border-radius: 0.4rem;
  margin: 0.4rem
}
.check-item-disabled {
  background: #eaeff7;
  color: #ccc;
}
.check-item-selected {
  background: #c4d4e7;
  color: #2c426b;
}
</style>