<template>
  <ui-dialog
    class="mm-dialog--built-in"
    v-bind="dialogProps"
    v-on="dialogListeners">
    <slot>
      <div class="mm-dialog-confirm">
        <type-icon
          v-if="type"
          :type="type"></type-icon>
        <message
          :is-html="messageIsHtml"
          :content="message">
        </message>
      </div>
    </slot>
  </ui-dialog>
</template>

<script>
import pick from "lodash/pick"
import Dialog from "./dialog"
import TypeIcon from "./type-icon"
import Message from "./message"
import visible from "../../mixins/visible"
import { t } from "../../locale"

export default {
  name: "mm-dialog-confirm",
  components: {
    "ui-dialog": Dialog,
    "type-icon": TypeIcon,
    "message": Message,
  },
  mixins: [visible],
  inheritAttrs: false,
  props: {
    ...Dialog.props,
    title: {
      type: String,
      default() {
        return t("ui.dialog.title.confirm")
      },
    },
    type: TypeIcon.props.type,
    message: {
      type: [String, Array, Object],
      default: "",
    },
    messageIsHtml: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dialogProps() {
      return {
        ...pick(this.$props, Object.keys(Dialog.props)),
        visible: this.localVisible,
      }
    },
    dialogListeners() {
      return {
        ...this.$listeners,
      }
    },
  },
}
</script>
