<template>
  <div>
    <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
      全选
    </a-checkbox>
    <br />
    <a-divider />
    <a-checkbox-group v-model="checkedList" :class="$style.checkbox" @change="onChange">
      <a-checkbox v-for="item in dataSource" :key="item.id" :value="item">
        {{ item.creatorName || item.name || item.userName }}
      </a-checkbox>
    </a-checkbox-group>
  </div>
</template>

<script>
import components from './_import-components/sd-users-check-import'

export default {
  name: 'SdUsersCheck',
  components,
  props: {
    dataSource: {
      type: Array,
      default: (_) => [],
    },
    value: {
      type: Array,
      default: (_) => [],
    },
  },
  data() {
    return {
      checkedList: this.value,
      indeterminate: false,
      checkAll: false,
    }
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.dataSource.length
      this.checkAll = checkedList.length === this.dataSource.length
      this.$emit('input', checkedList)
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.dataSource : [],
        indeterminate: false,
        checkAll: e.target.checked,
      })
      this.$emit('input', this.checkedList)
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.checkbox {
  label:global(.ant-checkbox-wrapper) {
    margin: 0 8px 0 8px;
  }
}
</style>
