<template>
  <div class="selectbox">
    <div class="selectall">
      <div class="check-head" style="margin: 0 0 0 10px">
        <check-all :value.sync="isAll" @click.native="selectAll(isAll)">全部商品</check-all>
        <p style="display: inline-block">
          (<span style="color: #8fb5de">{{currSum}}</span>/<span>{{totalSum}}</span>)
        </p>
      </div>
    </div>
    <div
    class="selectlist"
    v-for="(item, index) in data"
    :key="item.id">
      <div class="dash-line">
        <span></span>
      </div>
      <div class="check-head" style="margin: 0 0 10px 15px">
        <check-all :value.sync="item.isCheck" @click.native="checkAllClick(item.isCheck, index)">{{ item.name }}</check-all>
        <p style="display: inline-block">
          (<span style="color: #8fb5de">{{item.currItemCount}}</span>/<span>{{item.currTotal}}</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="(item, index) in item.list"
          :key="index"
          :value="item.key"
          v-if="!item.disabled"
          :disabled="item.disabled">{{item.value}}</checker-item>
      </checker>
    </div>
  </div>
</template>

<script>
import { Checker, CheckerItem, CheckIcon, TransferDom } from 'vux'
import CheckAll from 'components/isCheckAll/index'
export default {
  directives: {
    TransferDom
  },
  components: {
    Checker,
    CheckerItem,
    CheckIcon,
    CheckAll
  },
  data () {
    return {
      isAll: false,
      currSum: 0,
      totalSum: 0,
      source: [
        {
          isCheck: true,
          id: '123a',
          name: '蔬菜类',
          currItemCount: 0,
          itemTotal: 4,
          list: [
            {
              key: '1',
              value: '什锦冷菜'
            },
            {
              key: '2',
              value: '经典冷盘甜小菜心太软'
            },
            {
              key: '3',
              value: '凉拌黑木耳'
            },
            {
              key: '4',
              value: '私房飘香酱牛肉'
            }
          ]
        },
        {
          isCheck: false,
          id: '852a',
          name: '肉类',
          currItemCount: 0,
          itemTotal: 5,
          list: [
            {
              key: 'b',
              value: '咸水鸭',
              isSelected: true
            },
            {
              key: 'c',
              value: '酱香牛肉'
            },
            {
              key: 'd',
              value: '羊肉'
            },
            {
              key: 'e',
              value: '凉拌猪耳朵'
            },
            {
              key: 'g',
              value: '海蜇头'
            }
          ]
        }
      ],
      data: [
        {
          isCheck: false,
          id: '123a',
          name: '蔬菜类',
          currItemCount: 2,
          currTotal: 4,
          selectedList: ['1', '2'],
          list: [
            {
              key: '1',
              value: '什锦冷菜'
            },
            {
              key: '2',
              value: '经典冷盘甜小菜心太软'
            },
            {
              key: '3',
              value: '凉拌黑木耳'
            },
            {
              key: '4',
              value: '私房飘香酱牛肉'
            }
          ]
        },
        {
          isCheck: false,
          id: '852a',
          name: '肉类',
          currItemCount: 1,
          currTotal: 5,
          selectedList: ['b'],
          list: [
            {
              key: 'b',
              value: '咸水鸭'
            },
            {
              key: 'c',
              value: '酱香牛肉'
            },
            {
              key: 'd',
              value: '羊肉'
            },
            {
              key: 'e',
              value: '凉拌猪耳朵'
            },
            {
              key: 'g',
              value: '海蜇头'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    this.currSum = _.sum(_.map(this.data, 'currItemCount'))
    this.totalSum = _.sum(_.map(this.data, 'currTotal'))
  },
  methods: {
    checkAllClick (val, index) {
      const selectedKey = _.map(this.data[index].list, 'key')
      if (val === true) {
        this.data[index].selectedList = selectedKey
        this.data[index].currItemCount = this.data[index].currTotal
      } else {
        this.data[index].selectedList = []
        this.data[index].currItemCount = 0
      }
      this.currSum = _.sum(_.map(this.data, 'currItemCount'))
      if (this.currSum === this.totalSum) {
        this.isAll = true
      } else {
        this.isAll = false
      }
    },
    checkerChange (value, index) {
      if (value.length === this.data[index].list.length) {
        this.data[index].isCheck = true
      } else {
        this.data[index].isCheck = false
      }
      this.data[index].selectedList = value
      this.data[index].currItemCount = this.data[index].selectedList.length
      this.currSum = _.sum(_.map(this.data, 'currItemCount'))
      if (this.currSum === this.totalSum) {
        this.isAll = true
      } else {
        this.isAll = false
      }
    },
    selectAll (val) {
      const source = this.data
      if (val === true) {
        _(source).each(function (item, index) {
          source[index].selectedList = _.map(item.list, 'key')
          source[index].isCheck = true
        })
        this.currSum = this.totalSum
      } else {
        _(source).each(function (item, index) {
          source[index].selectedList = []
          source[index].isCheck = false
        })
        this.currSum = 0
      }
    }
  }
}
</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>