<template>
  <a-modal :title="groupDialogTitle" :visible="visible" @cancel="handleCancel" @ok="handleOk" width="1000px">
    <a-transfer v-model:target-keys="targetKeys" :data-source="dataSource" :titles="['所有用户', groupTitle]"
      :render="item => item.title" @change="handleChange" />
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Transfer } from 'ant-design-vue';

export default defineComponent({
  components: {
    'a-transfer': Transfer,
  },
  props: {
    groupDialogTitle: String,
    groupTitle: String,
    visible: Boolean,
    dataSource: Array,
    targetKeys: Array,
  },
  emits: ['cancel', 'ok', 'change'],
  setup(props, { emit }) {
    const handleCancel = () => {
      emit('cancel');
    };

    const handleOk = () => {
      emit('ok');
    };

    const handleChange = (targetKeys, direction, moveKeys) => {
      emit('change', targetKeys, direction, moveKeys);
    };

    return {
      handleCancel,
      handleOk,
      handleChange,
    };
  },
});
</script>