<template>
    <el-drawer v-model="showModal"  v-if="showModal" title="元数据信息" class="hc-modal-border" draggable destroy-on-close @closed="cancelClick" :size="size"
    ref="drawerRef" :modal-class="uis" :class="`hc-drawer-box ${ui}`"   >
        
       <metaTable  :isEdit="isEdit"/>
        <template #footer>
          
            <div class="dialog-footer" style="margin-top: 20px" v-if="isEdit">
                <el-button size="large" @click="cancelClick">
                    <HcIcon name="close"/>
                    <span>返回</span>
                </el-button>
                <el-button type="primary" hc-btn :loading="isLoading" @click="confirmClick">
                    <HcIcon name="check"/>
                    <span>编辑</span>
                </el-button>
            </div>
            <div class="dialog-footer" style="margin-top: 20px" v-else>
                <el-button size="large" @click="cancelClick">
                    <HcIcon name="close"/>
                    <span>取消</span>
                </el-button>
                <el-button type="primary" hc-btn :loading="isLoading" @click="confirmClick">
                    <HcIcon name="check"/>
                    <span>提交</span>
                </el-button>
            </div>
        </template>
    </el-drawer>
      

</template>

<script setup>
import {ref, watch,toRefs} from "vue"
import {useAppStore} from "~src/store";
//import {sendNotice, saveSmsTimeout} from '~api/other';
import config from '~src/config/index';
import {formValidate} from "vue-utils-plus"
import MetaTable from './meta-table.vue'
//参数
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    },
  
})

//变量
const userStore = useAppStore()


const showModal = ref(props.show)
const isLoading = ref(props.loading)
const isEdit =ref(true)

const size = ref('70%')
//监听
watch(() => [
    props.show,
    props.loading,
], ([show,  loading, user]) => {
    showModal.value = show
    isLoading.value = loading
})




//事件
// const emit = defineEmits(['cancel', 'confirm'])
const emits = defineEmits(['upshowModal'])

//取消
const cancelClick = () => {
    //  emit('cancel')
      emits('upshowModal', false)
}

//确认
const confirmClick = async () => {
    //  emits('upshowModal', false)
    isEdit.value=false
}


</script>
<style lang="scss">
.modalbox{
 .m20{
     margin-top: 20px;
 }
 .fsize{
     font-size: 1.25rem;
 }
}

</style>