<template lang="html">
  <div class="multiSelect">
    <div style="height: 16rem; overflow-y: scroll;">
      <div style="border-bottom: 1px dashed #d9d9db;">
        <div class="check-head" style="margin: 0.8rem 0 0.8rem 2px">
          <check-icon :value.sync="checkAll" @click.native="selectAll(checkAll)">{{allName}}</check-icon>
          <p style="display: inline-block">
            (<span style="color: #8fb5de">{{currCount}}</span>/<span>{{currTotal}}</span>)
          </p>
        </div>
      </div>
      <div
        class="list"
        v-for="(item, index) in items"
        :keys="index">
        <div class="check-head" style="margin: 0.4rem 0 0.4rem 15px">
          <check-icon :value.sync="item.currCheckAll" @click.native="checkItemAll(item.currCheckAll, index)">{{item.name}}</check-icon>
          <p style="display: inline-block">
            (<span style="color: #8fb5de">{{item.currItemCount}}</span>/<span>{{item.currItemTotal}}</span>)
          </p>
        </div>
        <checker
          v-model="item.selectedList"
          type="checkbox"
          default-item-class="check-item"
          disabled-item-class="check-item-disabled"
          selected-item-class="check-item-selected"
          @on-change="checkerChange(item.selectedList, index)"
          class="check-item-wrap-self">
          <checker-item
            v-for="(list, index) in item.lists"
            :key="index"
            :value="list.key"
            v-if="!list.disabled"
            :disabled="list.disabled">{{list.value}}</checker-item>
        </checker>
      </div>
    </div>
    <x-button mini class="default-btn" @click.native="getSelected">完成</x-button>
  </div>
</template>

<script>
import { Checker, CheckerItem, CheckIcon, TransferDom, XButton } from 'vux'
export default {
  name: 'multiCheck',
  props: ['items', 'allName'],
  components: {
    Checker,
    CheckerItem,
    CheckIcon,
    TransferDom,
    XButton
  },
  data () {
    return {
      currAllSelected: [],
      checkAll: false,
      currCheckAll: false,
      currCount: null,
      currTotal: null,
      currItemCount: null,
      currItemTotal: null
    }
  },
  mounted () {
    this.currCount = _.sum(_.map(this.items, 'currItemCount'))
    this.currTotal = _.sum(_.map(this.items, 'currItemTotal'))
    this.getSelectedF(this.items)
  },
  methods: {
    getSelectedF (arr) {
      this.currAllSelected = _.flattenDeep(_.map(arr, 'selectedList'))
    },
    selectAll (val) {
      const source = this.items
      if (val === true) {
        _(source).each(function (item, index) {
          source[index].selectedList = _.map(item.lists, 'key')
          source[index].currCheckAll = true
        })
        this.currCount = this.currTotal
      } else {
        _(source).each(function (item, index) {
          source[index].selectedList = []
          source[index].currCheckAll = false
        })
        this.currCount = 0
      }
      this.getSelectedF(this.items)
    },
    checkItemAll (val, index) {
      const selectedKey = _.map(this.items[index].lists, 'key')
      if (val === true) {
        this.items[index].selectedList = selectedKey
        this.items[index].currItemCount = this.items[index].currItemTotal
      } else {
        this.items[index].selectedList = []
        this.items[index].currItemCount = 0
      }
      this.currCount = _.sum(_.map(this.items, 'currItemCount'))
      if (this.currCount === this.currTotal) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      this.getSelectedF(this.items)
    },
    checkerChange (value, index) {
      this.$emit('listChange', value)
      if (value.length === this.items[index].lists.length) {
        this.items[index].currCheckAll = true
      } else {
        this.items[index].currCheckAll = false
      }
      this.items[index].selectedList = value
      this.items[index].currItemCount = this.items[index].selectedList.length
      this.currCount = _.sum(_.map(this.items, 'currItemCount'))
      if (this.currCount === this.currTotal) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
      this.getSelectedF(this.items)
    },
    getSelected () {
      this.$emit('getSelected', this.currAllSelected)
    }
  }
}
</script>

<style lang="less">
.multiSelect {
  .dash-line {
    padding: 0.6rem 0;
    span{
      display: block;
      width: 100%;
      border-bottom: 1px dashed #d9d9db;
    }
  }
  .list {
    border-bottom: 1px dashed #d9d9db;
    padding: 0.3rem 0
  }
  .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;
  }
  .default-btn {
    display: block;
    width: 60%;
    margin: 1rem auto 0;
    background: #86aace;
    border: 1px solid #86aace;
    color: #fff;
  }
  .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
    color: #c4d4e7
  }
}
</style>