<script setup lang="ts">
import { computed, ref } from 'vue'

defineOptions({ name: 'mj-dialog' })

const props = defineProps<{
  modelValue: boolean
  title?: string
  hideCancel?: boolean
  hideOk?: boolean
  okText?: string
  cancelText?: string
  maskClosable?: boolean
  ok?: any
  cancel?: any
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()

const show = computed({
  get: () => props.modelValue,
  set: val => {
    emit('update:modelValue', val)
  },
})

// 按钮
const btns = []
if (!props.hideCancel) {
  btns.push({
    text: props.cancelText || '取消',
    color: '#999',
  })
}
if (!props.hideOk) {
  btns.push({
    text: props.okText || '确定',
    color: '#615dff',
  })
}
const buttons = ref(btns)

function btnClick({ index }) {
  if (index === 0) {
    props.cancel?.()
    emit('update:modelValue', false)
  } else {
    props.ok?.()
  }
}
</script>

<template>
  <tui-dialog
    :show="show"
    :title="title"
    :buttons="buttons"
    :maskClosable="maskClosable"
    @click="btnClick"
  >
    <template v-slot:content>
      <slot />
    </template>
  </tui-dialog>
</template>

<style lang="scss" scoped></style>
