<template>
  <n-layout>
    <n-layout-header class="dheader-1">
      <menu-h />
    </n-layout-header>
    <n-layout-content class="dcontent-1">
      <router-view />
    </n-layout-content>
    <n-layout-footer v-show="route.path == '/home'" class="flex justify-center dfooter-1">
      <div class="beian" ref="footer">
        <a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
        <a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
      </div>
    </n-layout-footer>
  </n-layout>


  <n-modal v-model:show="modal.visible" preset="dialog" title="Dialog">
    <template #header>
      <div>{{ modal.title }}</div>
    </template>
    <div>
      <div class="my-2">{{ modal.content }}</div>
      <div v-if="modal.contType == 'input'">
        <n-input @change="modal.handdleInputChange($event)" :placeholder="modal.placeholder"></n-input>
      </div>
    </div>
    <template #action>
      <n-button @click="modal.handdleCancel">{{ modal.cancelText }}</n-button>
      <n-button type="primary" @click="modal.handdleSubmit">{{ modal.submitText }}</n-button>
    </template>
  </n-modal>


</template>

<script setup lang="ts">
const route = useRoute()
const footer = ref<HTMLElement | null>(null)
window.$msg = useMessage()
const modal: NmodalItem = reactive({
  visible: false,
  title: '',
  content: '',
  contType: 'text',
  cancelText: '取消',
  submitText: '确定',
  placeholder: '请输入内容',
  handdleCancel: () => { },
  handdleSubmit: () => { },
  handdleInputChange: (e: any) => { }
})
interface NmodalItem {
  visible: boolean
  title: string
  content: string
  contType?: string
  placeholder?: string
  cancelText?: string
  submitText?: string
  handdleCancel?: () => void
  handdleSubmit?: () => void
  handdleInputChange: (e: any) => void
}
//mark method
function comemodal(mv: NmodalItem) {
  if (!mv) return
  modal.visible = true
  modal.title = mv.title
  modal.content = mv.content
  modal.contType = mv.contType || "text"
  modal.placeholder = mv.placeholder || "请输入内容"
  modal.cancelText = mv.cancelText || "取消"
  modal.submitText = mv.submitText || "确定"
  modal.handdleCancel = (): void => {
    if (mv.handdleCancel) {
      mv.handdleCancel()
    }
    modal.visible = false
  }
  modal.handdleSubmit = () => {
    if (mv.handdleSubmit) {
      mv.handdleSubmit()
    }
    modal.visible = false
  }
  modal.handdleInputChange = (e) => {
    if (mv.handdleInputChange) {
      mv.handdleInputChange(e)
    }
  }
}

window.$modal = comemodal
onMounted(() => {
  // 计算footer的高度
  const footerHeight = footer.value?.clientHeight || 0;
  console.log('footerHeight', footerHeight);
})
</script>

<style scoped lang="less">
.dcontent-1 {

  background-color: #fbfbfb;
}

.beian {
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background-color: #21072a;
}

.beian a {
  font-size: 14px;
  text-decoration: none;

}

.beian .swag {
  margin-left: 20px;
}
</style>