import { Dialog } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'o-dialog',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '提示'
    },
    confirmButtonText: {
      type: String,
      default: '确认'
    },
    cancelButtonText: {
      type: String,
      default: '取消'
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    showCancelButton: {
      type: Boolean,
      default: false
    }
  },
  emits: ['cancel', 'confirm'],
  setup(props, { slots, attrs, emit }) {
    return () => (
      <Dialog
        v-model:show={props.show}
        message={props.message}
        messageAlign="left"
        confirmButtonText={props.confirmButtonText}
        cancelButtonText={props.cancelButtonText}
        showConfirmButton={props.showConfirmButton}
        showCancelButton={props.showCancelButton}
        onConfirm={() => emit('confirm')}
        onCancel={() => emit('cancel')}
      >
        {{
          title: () => (
            <div class={styles.dialogTitle}>
              <i></i>
              {props.title}
            </div>
          )
        }}
      </Dialog>
    )
  }
})