import { NButton, NSpace } from 'naive-ui';
import { PropType, defineComponent } from 'vue';
import styles from './index.module.less';

export default defineComponent({
  name: 'the-message-dialog',
  props: {
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    confirmButtonText: {
      type: String,
      default: '确定'
    },
    content: {
      type: String,
      default: ''
    },
    contentDirection: {
      type: String as PropType<'left' | 'center' | 'right'>,
      default: 'center'
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.studentRemove}>
        <p
          style={{
            textAlign: props.contentDirection
          }}
          v-html={props.content}></p>

        <NSpace class={styles.btnGroupModal} justify="center">
          <NButton round onClick={() => emit('close')}>
            {props.cancelButtonText}
          </NButton>
          <NButton
            round
            type="primary"
            loading={props.loading}
            disabled={props.loading}
            onClick={() => {
              emit('confirm');
            }}>
            {props.confirmButtonText}
          </NButton>
        </NSpace>
      </div>
    );
  }
});
