<template>
  <SysDialog
    class="formula-modle"
    :title="getBindValue.title"
    :width="getBindValue.width"
    :height="getBindValue.height"
    :visible="dialog.visible"
    @onClose="hanleOnClose"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 上传文件 -->
      <el-upload
        ref="upload"
        class="upload-warp"
        :multiple="false"
        :limit="1"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :on-change="handleBeforeUpload"
      >
        <template #trigger>
          <el-button type="primary">
            上传文件
          </el-button>
        </template>
        <template #tip>
          <div class="text-red">
            限制1个文件，新文件将覆盖旧文件
          </div>
        </template>
      </el-upload>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { useUpload } from './useUpload';

// 弹框一些配置
const getBindValue = ref<Recordable>({
    title: '上传文件',
    width: 760,
    height: 0
})

//声明事件
const emit = defineEmits(['saveUpload']);

//弹框属性
const { dialog, onClose, onShow } = useDialog();

// 上传处理
const { handleExceed,handleBeforeUpload, show, hanleOnClose, confirm, upload } = useUpload(emit, onClose, onShow)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
    show
})
</script>