<template>
  <a-modal :visible="deleteVisible" @ok="handleOk()" @cancel="handleCancel()">
    <template slot="title">
      <div class="form-title">确认删除所选中数据？--共{{ deleteIds.length }}条</div>
    </template>
    <div style="max-height: 250px; overflow-y: auto">
      <a-checkbox-group v-model="deleteIds" :options="defalutList" @change="onChange" class="checkbox-class">
      </a-checkbox-group>
    </div>
  </a-modal>
</template>
<script>
export default {
  name: 'DeleteForm',
  data() {
    return {
      deleteVisible: false,
      deleteIds: [],
      defalutList: [],
    }
  },
  methods: {
    openDeleteForm(ids) {
      console.log(ids)
      this.deleteVisible = true
      this.deleteIds = ids
      this.defalutList = ids.map((item) => {
        return {
          label: '用户编号：' + item,
          value: item,
        }
      })
    },
    handleCancel() {
      this.deleteVisible = false
    },
    handleOk() {
      if (this.deleteIds.length > 0) this.$emit('delete-users', this.deleteIds)
      else return this.$message.error('请选择至少一条记录进行删除')
      this.deleteVisible = false
    },
    onChange(e) {
      console.log(this.deleteIds)
    },
  },
}
</script>
<style scoped>
.checkbox-class {
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #333333;
  line-height: 35px;
  display: grid;
}
.form-title {
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #000000;
  line-height: 24px;
}

.modal-more-class {
  height: 50px;
  scroll-y: auto;
}
</style>
