<template>
    <hc-new-dialog ui="hc-order-import-upload-file-box" widths="1200px" :show="isShow" title="材料计量单导入" @close="modalClose">
        <div class="hc-upload-box">
            <el-upload
                ref="uploadRef" :headers="getHeader()" drag :data="formData" accept=".xls,.xlsx,.doc,.docx,.pdf,.jpg,.png,.jpeg"
                :limit="1" :auto-upload="false" action="/api/blade-meter/materialMeterForm/importExcel"
                :on-exceed="handleExceed" :on-success="handleSuccess" :on-error="handleError"
            >
                <div class="text-80px text-gray">
                    <i class="ri-upload-cloud-line" />
                </div>
                <div class="mt-24px text-black">将文件拖动到此处，或点击上传</div>
                <div class="mt-8px text-12px">支持的文件格式：Excel(xls、xlsx)、word(doc、docx)、pdf、图片(jpg、png、jpeg)</div>
            </el-upload>
        </div>
        <hc-card-item class="hc-upload-card-item">
            <template #header>
                <span>范例模板</span>
            </template>
            <template #extra>
                <el-link type="primary" @click="downloadTemp">下载范例模板.xls</el-link>
            </template>
            <hc-table :column="tableColumn" :datas="tableData" :is-current-row="false" :is-index="false" />
        </hc-card-item>
        <div class="hc-upload-text-tip mt-20px">
            <div>温馨提示：</div>
            <div class="mt-5px pl-14px">1.请提前联系管理员设置材料预付款比例；</div>
            <div class="mt-5px pl-14px">2.计量金额和合同规定预付款金额，导入后将自动计算；</div>
            <div class="mt-5px pl-14px">3.单价和数量无小数位数限制；</div>
            <div class="mt-5px pl-14px">4.若“材料编号”中填写001，但回显1时，请将单元格类型调整为：文本。</div>
        </div>
        <template #footer>
            <el-button @click="modalClose">取消</el-button>
            <el-button type="primary" :loading="confirmLoading" @click="confirmClick">确认</el-button>
        </template>
    </hc-new-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { getHeader } from 'hc-vue3-ui'
import { genFileId } from 'element-plus'
import { isNullES, newWindow } from 'js-fast-way'
import mainApi from '~api/debit-pay/material/order'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])
const store = useAppStore()

//监听数据
const contractId = ref(store.getContractId)
const projectId = ref(store.getProjectId)
watch(() => [store.getContractId, store.getProjectId], ([cid, pid]) => {
    contractId.value = cid
    projectId.value = pid
}, { immediate: true, deep: true })

//监听
const ids = ref(props.ids)
watch(() => props.ids, (id) => {
    ids.value = id
}, { immediate: true, deep: true })

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//上传文件
const uploadRef = ref(null)

//附加数据
const formData = ref({})

const handleExceed = (files) => {
    uploadRef.value?.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    uploadRef.value?.handleStart(file)
}

//确认导入
const confirmLoading = ref(false)
const confirmClick = async () => {
    formData.value = {
        meterPeriodId: ids.value,
        projectId: projectId.value,
        contractId: contractId.value,
    }
    confirmLoading.value = true
    uploadRef.value?.submit()
}

//上传成功
const handleSuccess = (res) => {
    confirmLoading.value = false
    if (res.code === 200) {
        window.$message.success('上传成功')
        modalClose()
        emit('finish')
    } else {
        window.$message.error(res.msg || '上传失败')
    }
}

//上传失败
const handleError = (error) => {
    confirmLoading.value = false
    const { msg } = !isNullES(error.message) ? JSON.parse(error.message) : {}
    if (isNullES(msg)) {
        window.$message.error('上传失败')
    } else {
        window.$message.error(msg)
    }
}

//下载模板
const downloadTemp = async () => {
    const { data } = await mainApi.getImportTemplate()
    if (isNullES(data)) {
        window.$message.warning('暂无相关模板')
        return
    }
    newWindow(data)
}

//范例模板
const tableColumn = [
    { key: 'key1', name: '材料编号' },
    { key: 'key2', name: '材料到场编号' },
    { key: 'key3', name: '合同材料' },
    { key: 'key4', name: '单价' },
    { key: 'key5', name: '数量' },
    { key: 'key6', name: '业务日期' },
    { key: 'key7', name: '材料来源' },
    { key: 'key8', name: '材料是否符合要求' },
    { key: 'key9', name: '进料发票（单据）号' },
    { key: 'key10', name: '质保书编号' },
    { key: 'key11', name: '存储方法是否符合要求' },
    { key: 'key12', name: '抽检报告编号' },
    { key: 'key13', name: '备注' },
]
const tableData = [
    {
        key1:'01', key2:'001', key3: '水泥', key4:'2.33', key5:'1.22', key6:'2024年1月1日', key7:'xx供应商',
        key8:'是', key9:'BG01', key10:'GEP001', key11:'是', key12: 'BG-2004-XX', key13: 'XX',
    },
    {
        key1:'02', key2:'002', key3: '钢筋', key4:'3.44', key5:'2.33', key6:'2024年2月1日', key7:'xx供应商',
        key8:'是', key9:'BG02', key10:'GEP002', key11:'是', key12: 'BG-2004-XX', key13: 'XX',
    },
]

//关闭弹窗
const modalClose = () => {
    isShow.value = false
    emit('close')
}
</script>

<style scoped lang="scss">
.hc-upload-box :deep(.el-upload) {
    --el-upload-dragger-padding-horizontal: 20px;
}
.hc-upload-text-tip {
    color: #FF7D43;
}
</style>

<style lang="scss">
.el-overlay-dialog .el-dialog.hc-new-dialog.hc-order-import-upload-file-box .el-dialog__body {
    padding: 14px 4px;
}
.hc-card-item-box.hc-upload-card-item {
    padding: 10px;
    .hc-card-item-header {
        color: unset;
    }
}
</style>
