<template>
    <div>
        <el-dialog v-model="dialogVisible" :title="titleTips" width="30%" @close="closes">
            <el-form :model="addForm" label-width="120px" :rules="formRule">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="模板描述" prop="memos">
                    <el-input v-model="addForm.memos" />
                </el-form-item>
                <el-form-item label="上传文件" width="200" prop="docName">
                    <el-input style="width: 167px;" v-model="addForm.docName" disabled />
                    <el-upload v-model:file-list="fileList" class="upload-demo" :show-file-list="false"
                        :http-request="uploadFile" multiple :limit="1">
                        <el-button type="primary" plain><el-icon>
                                <DocumentAdd />
                            </el-icon>点击上传文件</el-button>
                        <!-- <template #tip>
                            <div class="el-upload__tip">
                                jpg/png files with a size less than 500KB.
                            </div>
                        </template> -->
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancels">取消</el-button>
                    <el-button type="primary" @click="sureAdd">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, reactive } from 'vue';
import report from '@/api/report';
import { ElMessage } from 'element-plus';
export default {
    props: {
        addModal: {
            type: Boolean,
            required: true
        },
        addOrEdit: {
            type: Number,
            required: true
        },
        editRow: {
            type: Object,
            required: true
        }
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)
        let result = props.addModal
        let obj = props.editRow
        let tipsNow = props.addOrEdit
        let filesCacl = ref({})
        let { cancels, sureAdd } = toRefs(props)
        let titleTips = ref('新增')
        let addForm = ref({
            name: "",
            docid: "",
            memos: "",
            states: 1,
            docName: "",
        })
        let formRule = reactive({
            name: [
                { required: true, message: '还未输入名称', trigger: 'blur' },
            ],
            memos: [
                { required: true, message: '还未输入备注', trigger: 'blur' },
            ],
            docName: [
                { required: true, message: '还未选择文件', trigger: 'blur' },
            ],
        })
        function lineList() {//接收父组件参数
            if (tipsNow == 0) {
                titleTips.value = '新增'
            }
            if (tipsNow == 1) {
                titleTips.value = '编辑'
            }
            dialogVisible.value = result
        }
        function uploadFile(e) {
            addForm.value.docid = e.file.uid
            addForm.value.docName = e.file.name
            filesCacl.value = e.file
            console.log(e, 'file');
        }
        function getCancel() {
            dialogVisible.value = false
            emit("armBack", dialogVisible.value)
        }
        function getSure() {
         if(tipsNow == 0){
            report.addReport({
                name: addForm.value.name,
                doc_id: addForm.value.docid,
                memo: addForm.value.memos,
                state: addForm.value.states
            }).then(res => {
                dialogVisible.value = false
                emit("armBack", dialogVisible.value)
            })
         }else if(tipsNow == 1){
            report.addReport({
                id:"id",
                name: addForm.value.name,
                doc_id: addForm.value.docid,
                memo: addForm.value.memos,
                state: addForm.value.states
            }).then(res => {
                dialogVisible.value = false
                emit("armBack", dialogVisible.value)
            })
         }

        }
        onMounted(() => {
            lineList()
        })
        return {
            dialogVisible,
            lineList,
            cancels: getCancel,
            sureAdd: getSure,
            closes: getCancel,
            uploadFile,
            addForm,
            titleTips,
            formRule,
            filesCacl,
        }
    }
}
</script>

<style scoped></style>