<script setup lang="ts">
import dict from '@/utils/dict'
import page from '@/utils/page'
import {
  dialog_dict_key,
  type DialogOptions,
  hide_dict_key,
  loading_dict_key,
  toast_bg_colors,
  toast_dict_key,
} from '@/utils/hud'
import { onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
import { cloneDeep } from 'lodash'
const props = defineProps<{
  background?: any
  padding?: any
}>()

defineOptions({ name: 'MjPage' })

// 页面路径
let pagePath = ''

const bgColor = ref(toast_bg_colors.info)
// toast的引用
const toastRef = ref(null as any)
// 显示toast
function toast(type: string, msg: string, duration: number) {
  bgColor.value = toast_bg_colors[type]
  toastRef?.value.showTips({
    msg,
    duration,
  })
}

// loading
const loadingRef = ref({
  show: false,
  text: undefined,
})
// 显示loading
function loading(text: any) {
  loadingRef.value.show = true
  loadingRef.value.text = text
}
// 隐藏loading
function hide() {
  loadingRef.value.show = false
}

// dialog的引用
const dialog_default_title = '提示'
const dialog_default_buttons = [
  {
    text: '取消',
    color: '#999',
  },
  {
    text: '确定',
    color: '#333',
  },
]

const dialogRef = ref({
  show: false,
  title: dialog_default_title,
  buttons: dialog_default_buttons,
  close: undefined as any,
  click: undefined as any,
  content: '',
  maskClosable: false,
})

// 显示dialog
function dialog(options: DialogOptions) {
  if (!options.title) {
    options.title = dialog_default_title
  }
  if (!options.buttons) {
    options.buttons = cloneDeep(dialog_default_buttons)
    // 取消按钮
    if (options.hideCancel) {
      // 删除取消按钮
      options.buttons.shift()
      options.cancel = undefined
    } else {
      if (options.cancelText) {
        options.buttons[0].text = options.cancelText
      }
      if (options.cancelColor) {
        options.buttons[0].color = options.cancelColor
      }
    }

    // 确定按钮
    const okIdx = options.buttons.length - 1
    if (options.okText) {
      options.buttons[okIdx].text = options.okText
    }
    if (options.okColor) {
      options.buttons[okIdx].color = options.okColor
    }
  } else {
    // 自定义按钮
    options.cancel = undefined
    options.ok = undefined
  }

  // 点击事件处理
  const clickFn = options.click
  const okFn = options.ok
  const cancelFn = options.cancel
  options.click = (e: any) => {
    const hide = () => {
      dialogRef.value.show = false
    }
    if (clickFn) {
      clickFn(hide, e)
    }
    // 点击了取消按钮
    if (cancelFn && e.index === 0) {
      cancelFn()
      hide()
    }
    // 点击了确定按钮
    const okIdx = (options.buttons?.length || 1) - 1
    if (okFn && e.index === okIdx) {
      okFn(hide)
    }
  }
  dialogRef.value = options as any
  dialogRef.value.show = true
}

function init() {
  pagePath = page.getPagePath()
  dict.setFn(toast_dict_key, toast)
  dict.setFn(loading_dict_key, loading)
  dict.setFn(hide_dict_key, hide)
  dict.setFn(dialog_dict_key, dialog)
}

function deinit() {
  dict.popPageFns(pagePath)
}

onMounted(init)
onActivated(init)
onUnmounted(deinit)
onDeactivated(deinit)
</script>

<template>
  <view
    class="global-wrapper"
    :style="{
      background: props.background,
    }"
  >
    <view class="global-page">
      <view
        class="global-content"
        :style="{
          padding: props.padding,
        }"
      >
        <slot />
      </view>
    </view>
    <tui-tips ref="toastRef" :backgroundColor="bgColor" position="center"></tui-tips>
    <tui-loading
      v-if="loadingRef.show"
      maskColor="rgba(0, 0, 0, 0)"
      :text="loadingRef.text"
      is-mask
    ></tui-loading>
    <tui-dialog
      :buttons="dialogRef.buttons"
      :show="dialogRef.show"
      :title="dialogRef.title"
      :maskClosable="dialogRef.maskClosable"
      @close="dialogRef.close"
      @click="dialogRef.click"
    >
      <template v-slot:content>{{ dialogRef.content }}</template>
    </tui-dialog>
  </view>
</template>
