export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    permissions: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    checkedPermissions () {
      return this.permissions.reduce((total, item) => {
        return total.concat(item.checkedList)
      }, []).filter(Boolean)
    }
  },
  data () {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      }
    }
  },
  methods: {
    handleCancel () {
      this.$emit('input', false)
      this.form.resetFields()
      this.permissions.forEach(item => {
        this.$set(item, 'checkedList', [])
        this.$set(item, 'indeterminate', false)
        this.$set(item, 'checkAll', false)
      })
    },
    onCheckAllChange (e, item) {
      this.$set(item, 'checkAll', e.target.checked)
      this.$set(item, 'indeterminate', false)
      this.$set(item, 'checkedList', e.target.checked ? item.permissions.map(i => i.id) : [])
    },
    onChange (checkedList, item) {
      this.$set(item, 'indeterminate', !!checkedList.length && (checkedList.length < item.permissions.length))
      this.$set(item, 'checkAll', checkedList.length === item.permissions.length)
    }
  }
}
