<!--封装VanFieldCheckbox组件-->
<template>
  <div>
    <div class="van-picker__toolbar">
      <button type="button"
              class="van-picker__cancel"
              @click="cancel">取消</button>
      <button type="button"
              class="van-picker__confirm"
              @click="onConfirm">确认</button>
    </div>
    <div class="checkbox-con">
      <van-cell title="全选">
        <template #right-icon>
          <van-checkbox name="all"
                        icon-size="25px"
                        @click="toggleAll"
                        v-model="checkedAll" />
        </template>
      </van-cell>
      <van-checkbox-group style="max-height:380px;overflow: auto;"
                          v-model="checkboxValue"
                          ref="checkboxGroup"
                          :style="{height:(height-80)+'px',overflow:'scroll'}">
        <van-cell-group>
          <van-cell v-for="(item, index) in columns"
                    clickable
                    :key="item[option.value]"
                    :title="item[option.label]"
                    @click="toggle(index)">
            <template #right-icon>
              <van-checkbox icon-size="25px"
                            :name="item[option.value]"
                            ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'more-select',
  model: {
    prop: 'selectValue'
  },
  props: {
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    selectValue: {
      type: Array,
      default: function () {
        return []
      }
    },
    option: {
      type: Object,
      default: function () {
        return { label: 'label', value: 'value' }
      }
    }
  },
  data () {
    return {
      height: window.innerHeight,
      checkboxValue: JSON.parse(JSON.stringify(this.selectValue)),
      checkedAll: false,
      resultValue: JSON.parse(JSON.stringify(this.selectValue))
    }
  },
  watch: {
    selectValue: function (newVal) {
      this.resultValue = newVal
    },
    resultValue (val) {
      this.$emit('input', val)
    },
    checkboxValue (val) { // 监听数据变化，判断全选的状态
      if (val.length !== this.columns.length) {
        this.checkedAll = false
      } else {
        this.checkedAll = true
      }
    }
  },
  methods: {
    getData (val) { // 过滤出所选数据的obj集合
      const res = this.columns.filter(item => {
        return val.indexOf(item[this.option.value]) > -1
      })
      return res
    },
    onConfirm () { // 确定
      this.resultValue = this.checkboxValue
      this.$emit('confirm', this.resultValue, this.getData(this.resultValue))
    },
    cancel () { // 取消
      this.$emit('cancel', this.resultValue)
    },
    toggle (index) { // cell点击事件，同步checkbox
      this.$refs.checkboxes[index].toggle()
    },
    toggleAll (all) { // 全选
      this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    }
  }
}
</script>

<style>
.checkbox-con .van-cell__title {
  text-align: center;
  padding: 10px;
}
</style>
