<template>
<el-dialog
  :modal="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  title="选择模板"
  :append-to-body="true"
  :model-value="dialogVisible"
  width="40%"
  :before-close="handleClose"

>
  <diy-el-form ref="formRef" :span="18" v-model:model-form="forms" :forms="formConfig"/>
  <template #footer>
    <el-button :icon="SuccessFilled" @click="confirm">确定</el-button>
    <el-button :icon="Close" @click="handleClose">关闭</el-button>
  </template>
</el-dialog>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {chooceTemplateTypeDialogForm} from "@/data/all-forms";
import {Close, SuccessFilled} from "@element-plus/icons-vue";
import {isValid} from "js-base64";

export default {
  name: "ChooceReportMbDialog",
  computed: {
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  components: {DiyElForm},
  props:{
    dialogVisible:{

    },

  },
  setup(props,{emit}){
    const formRef = ref(null)
    onBeforeMount(() => {

    })
    const confirm =function (){
      formRef.value.refEl.validate(isValid => {
        if (isValid){
          emit('chooceTemplate',forms.value.TYPE)
        }
      })
    }
    const formConfig = ref({...chooceTemplateTypeDialogForm})
    const forms = ref({})
    function handleClose(){
       emit('update:dialogVisible',false)
    }
    return {
      handleClose,
      forms,
      formConfig,
      confirm,
      formRef
    }
  }
}
</script>

<style scoped lang="scss">

</style>
