<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-select v-model="baseInfo.id" placeholder="请选择案件包"
                                            class="width100" @change="pkgChange">
                                        <el-option
                                                v-for="item in CasepackageList"
                                                :key="item.id"
                                                :label="item.pkgName"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </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="请输入金融机构"
                                    disabled
                                    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="请输入委案渠道"
                                    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"
                                        disabled
                                        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" disabled :min="1" :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="fileUrl">
                                    <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:{
                    id:'',
                    pkgName:'',//案件包名
                    entrustingAgencyName:'',//金融机构名称
                    planStartTime:'',//委案时间
                    months:1,//委案期限
                    fileUrl: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',},
                    ],
                    fileUrl: [
                        { required: true, message: '请上传文件', trigger: 'change',},
                    ],

                },
                financialProductsTypeOptions:[],//金融产品类型
                fileList:[],//证据材料
                CasepackageList:[]
                
            };
        },
        mounted () {
            this.getCasepkgList()
        },
        methods: {
            pkgChange(){
                let packitem =  this.CasepackageList.find(item =>{
                    return this.baseInfo.id == item.id
                })
                this.baseInfo.pkgName = packitem.pkgName
                this.baseInfo.entrustingAgencyName = packitem.entrustingAgencyName
                this.baseInfo.planStartTime = packitem.planStartTime
                this.baseInfo.channel = packitem.channel
                this.baseInfo.months = this.monthDifference(new Date(packitem.planStartTime),new Date(packitem.planEndTime))
            },
            monthDifference(date1,date2) {
                let months;
                months = (date2.getFullYear() - date1.getFullYear()) * 12;
                months -= date1.getMonth();
                months += date2.getMonth();
                return months <= 0 ? 0 : months;
            },
            // 案件包列表数据
            getCasepkgList(){
                apipk.getCasePkgQuery({current:1,size:500}).then(res => {
                    if (!res.code) {
                        this.CasepackageList = res.records;
                    }
                })
            },
            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.fileUrl = null
                }
                else
                {
                    this.baseInfo.fileUrl = JsonData.uploadFileRes.url
                }
            },
            
            handleClose() {
                this.$emit('update:importCaseDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-content{
    padding: 16px 24px;
    // max-height:500px
}

</style>