<template>
    <div class="hc-task-form">
        <!-- 基础表单 -->
        <hc-card-item>
            <hc-info-table>
                <tr>
                    <hc-info-table-td center is-title>合同材料：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.contractMaterialName }}</hc-info-table-td>
                    <hc-info-table-td center is-title>材料到场编号：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.materialArriveNumber }}</hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>计量期：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.meterPeriodName }}</hc-info-table-td>
                    <hc-info-table-td center is-title>业务日期：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.businessDate }}</hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>单价：</hc-info-table-td>
                    <hc-info-table-td width="120px">
                        <el-input v-model="baseForm.price" />
                    </hc-info-table-td>
                    <hc-info-table-td center is-title>计量数量：</hc-info-table-td>
                    <hc-info-table-td width="120px">
                        <el-input v-model="baseForm.meterAmount" />
                    </hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>计量金额：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.meterMoney }}</hc-info-table-td>
                    <hc-info-table-td center is-title>备料堆放地点：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.storagePlace }}</hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>存储情况：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.storageStatus }}</hc-info-table-td>
                    <hc-info-table-td center is-title>材料来源：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.materialSource }}</hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>材料是否符合要求：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.materialConformName }}</hc-info-table-td>
                    <hc-info-table-td center is-title>存储方法是否符合要求：</hc-info-table-td>
                    <hc-info-table-td width="120px">{{ baseForm?.storageConformName }}</hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>合格证号：</hc-info-table-td>
                    <hc-info-table-td width="auto" colspan="3">{{ baseForm?.certificate }}</hc-info-table-td>
                </tr>
                <tr>
                    <hc-info-table-td center is-title>备注：</hc-info-table-td>
                    <hc-info-table-td width="auto" colspan="3">{{ baseForm?.remark }}</hc-info-table-td>
                </tr>
            </hc-info-table>
        </hc-card-item>
        <!-- 附件列表 -->
        <hc-card-item class="mt-3" title="附件列表">
            <template #extra>
                <span class="text-[13px] text-orange font-400">可上传 图片(png、jpg、jpeg)、Excel(xls、xlsx)、PDF、Word(doc、docx)文件</span>
            </template>
            <el-form :model="baseForm" label-position="left" label-width="auto">
                <el-form-item label="上传附件">
                    <hc-form-upload type="list" :src="baseForm.fileList" :h-props="uploadFormProps" @upload="attachmentUpload" @change="attachmentUploadChange" />
                </el-form-item>
            </el-form>
        </hc-card-item>
        <!-- 文件上传组件 -->
        <hc-upload-file ref="uploadFileRef" :echo-params="uploadFileParams" :options="uploadFileOptions" @success="uploadFileSuccess" />
    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getHeader } from 'hc-vue3-ui'

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

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

//监听可否编辑
const isEdits = ref(props.isEdit)
watch(() => props.isEdit, (val) => {
    isEdits.value = val
}, { immediate: true, deep: true })

//监听类型
const isType = ref(props.type)
watch(() => props.type, (val) => {
    isType.value = val
}, { immediate: true, deep: true })

//监听数据
watch(() => rowInfo, (val) => {
    setTaskInfo(val.value)
}, { deep: true })

//渲染完成
onMounted(() => {
    setTaskInfo(rowInfo.value)
})

//设置任务信息
const taskInfo = ref({})
const setTaskInfo = async (info) => {
    taskInfo.value = info
}

//基础表单
const baseForm = ref({ fileList: [] })

const uploadFormProps = ref({})

const attachmentUpload = () => {

}

const attachmentUploadChange = () => {

}

//文件上传
const uploadFileRef = ref(null)
const uploadFileParams = ref({})
const uploadFileOptions = ref({})
const uploadFileSuccess = () => {

}
</script>

<style lang="scss" scoped>
.hc-task-form {

}
</style>
