<template>
    <div>
        <el-dialog
            :title="importCaseDialog.title"
            :visible="true"
            width="580px"
            append-to-body
            :close-on-click-modal="false"
            @close="handleClose">
        

        <!-- 基本信息 -->
        <div>
            <div class="p-h-24">
                <el-form ref="ruleFormBase" 
                        :model="baseInfo" 
                        :rules="rulesClient" 
                        label-width="150px" 
                        class="demo-ruleForm">
                        <el-row  type="flex" align="middle" class="mt-16">
                            <el-col :span="24">
                                <el-form-item label="案件包名" prop="pkgName">
                                    <el-input
                                    v-model.trim="baseInfo.pkgName"
                                    placeholder="请输入案件包名"
                                    clearable
                                    maxlength="25"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            
                        </el-row>
                        <el-row  type="flex" align="middle">
                            <el-col :span="24">
                                <el-form-item label="委案机构" prop="entrustingAgencyName">
                                    <el-input
                                    v-model.trim="baseInfo.entrustingAgencyName"
                                    placeholder="请输入委案机构"
                                    clearable
                                    maxlength="25"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row  type="flex" align="middle">
                            <el-col :span="24">
                                <el-form-item label="委案渠道" prop="channel">
                                    <el-input
                                    v-model.trim="baseInfo.channel"
                                    placeholder="请输入委案渠道"
                                    clearable
                                    maxlength="25"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row  type="flex" align="middle">
                            <el-col :span="24">
                                <el-form-item label="委案日期" prop="planStartTime">
                                    <el-date-picker class="width100"
                                        v-model="baseInfo.planStartTime"
                                        type="date"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择委案日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row  type="flex" align="middle">
                            <el-col :span="24">
                                <el-form-item label="委案期限(月)" prop="months">
                                    <el-input-number v-model="baseInfo.months" :min="0" :max="100" class="width100"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row  type="flex" align="middle">
                            <el-col :span="24">
                                <el-form-item label="上传文件" prop="fileInfo">
                                    <upload-import :file-list="fileList" :max-count="1"
                                        :show-file-name="true"
                                        accept=".xls,.xlsx"
                                        @handleUploadFile="handleUploadFile">
                                    </upload-import>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        
                </el-form>
            </div>
        </div>
                
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button
                type="primary"
                @click="handleSubmit">确认导入
            </el-button>
        </span>
        </el-dialog>
        
    </div>
</template>
<script>
import apipk from "@/services/casePackageManagement";
    export default {
        components: {
            uploadImport:() => import('@/components/uploadImportPackage.vue'),//导入上传
        },
        props: {
            importCaseDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                baseInfo:{
                    pkgName:'',//案件包名
                    entrustingAgencyName:'',//金融机构名称
                    planStartTime:'',//委案时间
                    months:1,//委案期限
                    fileInfo:null,
                    channel:'',
                    
                },
                rulesClient: {
                    pkgName: [
                        { required: true, message: '请输入案件包名', trigger: 'change',},
                    ],
                    planStartTime: [
                        { required: true, message: '请输入委案时间', trigger: 'change',},
                    ],
                    months: [
                        { required: true, message: '请输入委案期限', trigger: 'change',},
                    ],
                    channel: [
                        { required: true, message: '请输入委案渠道', trigger: 'change',},
                    ],
                    fileInfo: [
                        { required: true, message: '请上传文件', trigger: 'change',},
                    ],

                },
                financialProductsTypeOptions:[],//金融产品类型
                fileList:[],//证据材料
                
            };
        },
        mounted () {
            
        },
        methods: {

            handleSubmit(){
                if(!this.$clickThrottle()) { return }//防止重复点击
                
                this.$refs.ruleFormBase.validate((valid) => {
                    if (valid){
                        let data = {
                            ...this.baseInfo,//基本信息
                        }
                        apipk.CasePkgimport(data).then(res => {
                            this.handleClose()
                            this.$parent.getCaseInfoList(1)
                            this.$message.success("批量导入案件成功，导入错误案件请在错误修复里面进行查看！");
                        })

                    }
                    
                })

            },
            // 上传
            handleUploadFile(JsonData){

                console.log('获取上传文件信息',JsonData.uploadFileRes)
                let fileitem = JSON.parse(JSON.stringify(JsonData.fileList))
                this.fileList = fileitem.map((item,i) => {
                    let time = this.$util.getTimestamp()
                    let fileType = this.$util.getFileExtension(item.url)
                    let fileName = `${time}.${fileType}`
                    return {
                        url: item.url,
                        fileName:fileName,
                    }
                })
                if(fileitem.length == 0 ){
                    this.baseInfo.fileInfo = null
                }
                else
                {
                    this.baseInfo.fileInfo = JsonData.uploadFileRes
                }
            },
            
            handleClose() {
                this.$emit('update:importCaseDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-content{
    padding: 16px 24px;
    // max-height:500px
}

</style>