<template>
    <HcCard action-ui="text-center">
        <div v-if="infoData.pdfUrl && !isDisabled" class="hc-tabs-simple-extra-btn">
            <el-button size="large" type="primary" hc-btn @click="reuploadClick">
                <HcIcon name="upload-cloud-2" />
                <span>点击重新上传</span>
            </el-button>
        </div>

        <div class="hc-project-contract-form-file">
            <div v-show="infoData.pdfUrl" class="hc-form-file-pdf">
                <HcPdf :src="infoData.pdfUrl" />
            </div>
            <div v-show="!infoData.pdfUrl" class="hc-form-file-upload">
                <HcUploadFile v-if="!isDisabled" ref="HcUploadFileRef" :options="UploadFileOptions" drop @success="HcUploadFileSuccess">
                    <div class="accept-tip">
                        支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)
                    </div>
                </HcUploadFile>
                <HcStatus v-else text="未上传相关附件文件" />
            </div>
        </div>

        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back" />
                <span v-if="isDisabled">返回上一级</span>
                <span v-else>取消并返回</span>
            </el-button>
            <el-button v-if="!isDisabled" size="large" type="primary" hc-btn :loading="saveLoaingVal" @click="saveClick">
                <HcIcon name="check-double" />
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getObjValue } from 'js-fast-way'
import { getTokenHeader } from '~src/api/request/header'

//参数
const props = defineProps({
    datas: {
        type: Object,
        default: () => ({}),
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    saveLoaing:{
        type: Boolean,
        default: false,
    },

})

const emit = defineEmits(['saveClick', 'update:datas'])

const router = useRouter()

const infoData = ref(props.datas)
const isDisabled = ref(props.disabled)
const saveLoaingVal = ref(props.saveLoaing)


//深度监听
watch(() => [
    props.datas,
    infoData,
   
], ([datas, infoData]) => {
    infoData.value = datas
    emit('update:datas', infoData)
   
}, { deep: true })

//监听
watch(() => [
    props.disabled,
    props.saveLoaing,
], ([disabled, saveLoaing]) => {
    isDisabled.value = disabled
    saveLoaingVal.value = saveLoaing
})

//上传配置
const HcUploadFileRef = ref(null)
const UploadFileOptions = {
    headers: getTokenHeader(), //此处设置header
}

// 文件上传成功的回调
const HcUploadFileSuccess = (res) => {
    const { pdfUrl } = getObjValue(res.resData)
    infoData.value.pdfUrl = pdfUrl
    HcUploadFileRef.value?.setModalShow(false)
}

//重新上传
const reuploadClick = () => {
    HcUploadFileRef.value?.selectFile()
}

//返回
const goBackClick = () => {
    router.back()
}

//提交保存
const saveClick = () => {
    console.log(infoData.value, 'infoData')

        emit('saveClick')
 
    

}
</script>

<style scoped lang="scss">
@import "~src/styles/project/contract/form.scoped.scss";
</style>

<style lang="scss">
@import "~src/styles/project/contract/form.scss";
</style>
