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

                <el-steps :active="presentStep" align-center class="mt-16">
                    <el-step v-for="(item,inx) in transferStep" :key="inx" :title="item.title" :description="item.description"></el-step>
                </el-steps>

                <!-- 基本信息 -->
                <div v-if="presentStep === 1">
                   
                    <div>
                            <div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">基本信息</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">
                                            <el-col :span="12">
                                                <el-form-item label="案件包" prop="financialOrgName">
                                                    <el-select v-model="baseInfo.pkgId"
                                                            clearable placeholder="请选择案件包"
                                                            class="width100" @change="apkChange">
                                                        <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-col :span="12">
                                                <el-form-item label="金融机构名称" prop="financialOrgName">
                                                    <el-input
                                                    v-model.trim="baseInfo.financialOrgName"
                                                    placeholder="请输入金融机构名称"
                                                    disabled
                                                    ></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="社会统一信用代码" prop="financialOrgCode">
                                                    <el-input
                                                    v-model.trim="baseInfo.financialOrgCode"
                                                    placeholder="请输入社会统一信用代码"
                                                    clearable
                                                    maxlength="18"
                                                    ></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <!-- <el-col :span="12">
                                                <el-form-item label="案件名称" prop="caseName">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入案件名称"
                                                        v-model="baseInfo.caseName">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col> -->
                                            <el-col :span="12">
                                                <el-form-item label="案件编号" prop="caseNo">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入案件编号"
                                                        v-model="baseInfo.caseNo">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>   
                                        <el-row  type="flex" align="middle">
                                            
                                            <!-- <el-col :span="12">
                                                <el-form-item label="金融产品类型" prop="productTypeId">
                                                    <el-select v-model="baseInfo.productTypeId"
                                                            clearable placeholder="请选择金融产品类型"
                                                            class="width100">
                                                        <el-option
                                                                v-for="item in financialProductsTypeOptions"
                                                                :key="item.code"
                                                                :label="item.codeName"
                                                                :value="item.code">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-col> -->
                                            <el-col :span="12">
                                                <el-form-item label="标的金额" prop="moneyAmount">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入内容"
                                                        v-model="baseInfo.moneyAmount">
                                                        <template slot="append">元</template>
                                                    </el-input>
                                                    
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="逾期次数" prop="overdueTimes">
                                                    <el-input-number v-model="baseInfo.overdueTimes" :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="caseDescr">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入内容"
                                                        v-model="baseInfo.caseDescr">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>    
                                    
                                </el-form>
                            </div>
                        </div>  
                </div>
                <!-- 当事人信息 -->
                <div v-else-if="presentStep === 2">
                    
                    <div>
                            <div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">案件当事人</div> 
                            <div class="p-h-24">
                                <div class="border-solid-lighter-1 p-h-24 mb-16">
                                    <div class="flex-row justify-content-between height-48 line-height-48 f14 border-b-solid-lighter-1 mb-16">
                                        <div class="color-000">申请人</div>
                                        <div class="color-text-regular cursor-pointer" @click="handleReset">清空<i class="el-icon-close"></i></div>
                                    </div>
                                    <el-form ref="ruleFormCreditor" 
                                        :model="creditorInfo" 
                                        :rules="rulesClientCreditor" 
                                        label-width="150px" 
                                        class="demo-ruleForm">
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="申请人名称" prop="creditorName">
                                                    <el-input
                                                    v-model.trim="creditorInfo.creditorName"
                                                    placeholder="请输入申请人名称"
                                                    clearable
                                                    ></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="社会统一信用代码" prop="creditorOrgCode">
                                                    <el-input
                                                    v-model.trim="creditorInfo.creditorOrgCode"
                                                    placeholder="请输入社会统一信用代码"
                                                    clearable
                                                    maxlength="18"
                                                    ></el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="法人姓名" prop="creditorLegal">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入法人姓名"
                                                        v-model="creditorInfo.creditorLegal">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="法人身份证号" prop="creditorIdcard">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入法人身份证号"
                                                        v-model="creditorInfo.creditorIdcard"
                                                        maxlength="18">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>   
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="法人手机号" prop="creditorPhone">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入法人手机号"
                                                        v-model="creditorInfo.creditorPhone"
                                                        maxlength="11"
                                                        >
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="公司地址" prop="creditorAddr">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入公司地址"
                                                        v-model="creditorInfo.creditorAddr">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="邮编" prop="creditorMail">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入邮编"
                                                        v-model="creditorInfo.creditorMail"
                                                        maxlength="6"
                                                        >
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="代理人" prop="creditorAgent">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入代理人"
                                                        v-model="creditorInfo.creditorAgent">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>   
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="代理人手机号" prop="creditorAgentTelephone">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入代理人手机号"
                                                        v-model="creditorInfo.creditorAgentTelephone"
                                                        maxlength="11"
                                                        >
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="代理人身份证号" prop="creditorAgentIdcard">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入代理人身份证号"
                                                        v-model="creditorInfo.creditorAgentIdcard"
                                                        maxlength="18">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>                      
                                    
                                    </el-form>
                                </div>
                                <div class="border-solid-lighter-1 p-h-24">
                                    <div class="flex-row justify-content-between f14 border-b-solid-lighter-1 mb-8 p-v-8 align-items-center">
                                        <div class="color-000">被申请人</div>
                                        <el-button size="small" type="primary" @click="handleAdd">新增被申请人<i class="el-icon-plus"></i></el-button>
                                    </div>
    
                                    <div>
                                        <el-form ref="ruleFormObligor" 
                                        :model="obligorInfoForm" 
                                        label-width="150px" 
                                        class="demo-ruleForm">
                                        <div v-for="(item,inx) in obligorInfoForm.debtorEntityList" :key="inx">
                                            <div class="flex-row justify-content-between align-items-center height-40 f14 mb-16">
                                                <div class="color-text-primary">被申请人{{inx+1}}</div>
                                                <div class="color-text-regular cursor-pointer" @click="handleRemoveDomain(item)">删除<i class="el-icon-close"></i></div>
                                            </div>

                                            <el-row  type="flex" align="middle">
                                                <el-col :span="12">
                                                    <el-form-item label="被申请人姓名"  :prop="'debtorEntityList.' + inx + '.name'" :rules="{required: true, message: '请输入债权人姓名', trigger: 'blur'}">
                                                        <el-input
                                                        v-model.trim="obligorInfoForm.debtorEntityList[inx].name"
                                                        placeholder="请输入被申请人姓名"
                                                        clearable
                                                        ></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="证件类型" :prop="'debtorEntityList.' + inx + '.cardTypeId'" :rules="{required: true, message: '请选择证件类型', trigger: 'blur'}">
                                                        <el-select v-model="obligorInfoForm.debtorEntityList[inx].cardTypeId"
                                                                clearable placeholder="请选择证件类型"
                                                                class="width100">
                                                            <el-option
                                                                    v-for="item in idTypeOptions"
                                                                    :key="item.code"
                                                                    :label="item.codeName"
                                                                    :value="item.code">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row  type="flex" align="middle">
                                                <el-col :span="12">
                                                    <el-form-item label="证件号码" :prop="'debtorEntityList.' + inx + '.cardNo'"
                                                    :rules=" [
                                                        { required: true, message: '请输入证件号', trigger: 'change',},
                                                        { pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
                                                    ]">
                                                        <el-input
                                                            clearable
                                                            placeholder="请输入证件号码"
                                                            v-model="obligorInfoForm.debtorEntityList[inx].cardNo"
                                                            maxlength="18"
                                                            >
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="手机号码" :prop="'debtorEntityList.' + inx + '.phone'" :rules="[
                                                        { required: true, message: '请输入法人手机号', trigger: 'change',},
                                                        { pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
                                                    ]">
                                                        <el-input
                                                            clearable
                                                            placeholder="请输入手机号码"
                                                            v-model="obligorInfoForm.debtorEntityList[inx].phone"
                                                            maxlength="11"
                                                            >
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>   
                                            <el-row  type="flex" align="middle">
                                                <el-col :span="12">
                                                    <el-form-item label="地址" :prop="'debtorEntityList.' + inx + '.addr'" :rules="{ required: true, message: '请输入地址', trigger: 'change',}">
                                                        <el-input
                                                            clearable
                                                            placeholder="请输入地址"
                                                            v-model="obligorInfoForm.debtorEntityList[inx].addr">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="12">
                                                    <el-form-item label="邮编" :prop="'debtorEntityList.' + inx + '.mail'" :rules="{ required: true, message: '请输入邮编', trigger: 'change',}">
                                                        <el-input
                                                            clearable
                                                            placeholder="请输入邮编"
                                                            v-model="obligorInfoForm.debtorEntityList[inx].mail"
                                                            maxlength="6">
                                                        </el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        </el-form>
                                    </div>
                                    
                                    
                                </div>    
                                
                            </div>  
                        </div>
                </div>
                <!-- 材料上传 -->
                <div v-else-if="presentStep === 3">
                    <div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">证据材料</div>
                    <div class="p-h-24">
                        <upload-file-name :file-list="fileList" :max-count="20"
                                    :show-file-name="true"
                                    @handleUploadFile="handleUploadFile">
                        </upload-file-name>
                    </div>
                </div>
                <!-- 完成 -->
                <div v-else-if="presentStep === 4">
                    <el-result icon="success" title="案件创建完成" subTitle="案件创建完成，继续处理其他案件">
                        <template slot="extra">
                            <el-button type="primary" size="medium" @click="handleClose">好的</el-button>
                        </template>
                    </el-result>
                </div>
            </div>
        
        <span slot="footer" class="dialog-footer" v-if="presentStep<5">
            <el-button @click="handleClose">取消</el-button>
            <el-button
                v-if="presentStep > 1 "
                type="primary"
                @click="presentStep--">上一步</el-button>
            
            <el-button
                type="primary"
                v-show="presentStep<4"
                @click="handleNextStep">下一步</el-button>
            <el-button
                type="primary"
                v-show="presentStep === 4"
                @click="handleSubmit">确认
            </el-button>
        </span>
        </el-dialog>
        
    </div>
</template>
<script>
import api from "@/services/caseManagement";
import cpkapi from "@/services/casePackageManagement";
    export default {
        components: {
            uploadFileName: () => import('@/components/uploadFileName.vue'),//上传
        },
        props: {
            addCaseDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            const moneyAmountValidate = (rule,value,callback)=>{
                if (!value){
                    callback(new Error('请输入标的金额'));
                }else if (!/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0.\d{1,2}$/.test(value)){
                    callback(new Error('只能输入两位小数的金额!'));
                }else if(!(0<parseInt(value)&&parseInt(value)<100000000)){
                    callback(new Error('只能输入大于1小于1亿的金额!'));
                }else{
                    callback()
                }
            };
            return {
                
                transferStep:[
                    {id:1,title:'基本信息',description:'录入案件基本信息'},
                    {id:2,title:'当事人信息',description:'录入当事人信息'},
                    {id:3,title:'材料上传',description:'上传案件材料'},
                    {id:4,title:'完成',description:'完成案件创建'},
                ],
                presentStep:1,

                //-----------------------------基本信息-------------------------
                baseInfo:{
                    pkgId:'',
                    financialOrgName:'',//金融机构名称
                    financialOrgCode:'',//社会统一信用代码
                    caseName:'',//案件名称
                    caseNo:'',//案件编号
                    productTypeId:'',//金融产品类型
                    moneyAmount:'',//标的金额
                    overdueTimes:0,//逾期次数
                    caseDescr:'',//案件描述
                },
                rulesClient: {
                    financialOrgName: [
                        { required: true, message: '请输入机构名称', trigger: 'change',},
                    ],
                    // financialOrgCode: [
                    //     { required: true, message: '请输入社会统一信用代码', trigger: 'change',},
                    // ],
                    // caseName: [
                    //     { required: true, message: '请输入案件名称', trigger: 'change',},
                    // ],
                    caseNo: [
                        { required: true, message: '请输入案件编号', trigger: 'change',},
                    ],
                    // productTypeId: [
                    //     { required: true, message: '请选择金融产品类型', trigger: 'change',},
                    // ],
                    moneyAmount: [
                        { required: true, validator: moneyAmountValidate, trigger: 'change',},
                    ], 
                    caseDescr:[
                         { required: true, message: '请输入案件描述', trigger: 'change',},
                    ]
                },
                financialProductsTypeOptions:[],//金融产品类型

                //----------------------------案件当事人-------------------
                // 债权人
                creditorInfo:{
                    creditorName:'',//债权人
                    creditorOrgCode:'',//债权人机构代码	
                    creditorLegal:'',//法人	
                    creditorIdcard:'',//法人身份证	
                    creditorPhone:'',//法人手机	
                    creditorAddr:'',//公司地址	
                    creditorMail:'',//邮编	
                    creditorAgent:'',//代理人
                },
                rulesClientCreditor: {
                    creditorName: [
                        { required: true, message: '请输入申请人名称', trigger: 'change',},
                    ], 
                    creditorOrgCode: [
                        { required: true, message: '请输入申请人机构代码', trigger: 'change',},
                    ], 
                    // creditorLegal: [
                    //     { required: true, message: '请输入法人', trigger: 'change',},
                    // ],                  
                    // creditorIdcard: [
                    //     { required: true, message: '请输入法人身份证号', trigger: 'change',},
                    //     { pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
                    // ], 
                    // creditorPhone: [
                    //     { required: true, message: '请输入法人手机号', trigger: 'change',},
                    //     { pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
                    // ], 
                    creditorAddr: [
                        { required: true, message: '请输入公司地址', trigger: 'change',},
                    ], 
                    // creditorAgent: [
                    //     { required: true, message: '请输入代理人', trigger: 'change',},
                    // ], 
                },    
                // 被申请人
                idTypeOptions:[],
                obligorInfoForm:{
                    debtorEntityList:[
                        {
                            name:'',//被申请人姓名
                            phone:'',//被申请人电话
                            cardTypeId:'',//证件类型	
                            addr:'',//地址	
                            cardNo:'',//证件号
                            mail:'',//邮编
                            
                        }
                    ],
                },
                
                obligorRulesClient:{
                    name: [
                        { required: true, message: '请输入被申请人姓名', trigger: 'change',},
                    ], 
                    phone: [
                        { required: true, message: '请输入法人手机号', trigger: 'change',},
                        { pattern: /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|(19[0-9]{9})$/, message: '请输入正确的手机号码', trigger: ['blur', 'change']}
                    ], 
                    cardTypeId: [
                        { required: true, message: '请选择证件类型', trigger: 'change',},
                    ], 
                    addr: [
                        { required: true, message: '请输入地址', trigger: 'change',},
                    ], 
                    cardNo: [
                        { required: true, message: '请输入证件号', trigger: 'change',},
                        { pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/, message: '请输入正确的身份证号', trigger: ['blur', 'change']}
                    ], 
                    mail: [
                        { required: true, message: '请输入邮编', trigger: 'change',},
                        { pattern: /^\d{6}$/, message: '请输入正确的邮编', trigger: ['blur', 'change']}
                    ], 
                },

                
                fileList:[],//证据材料
                CasepackageList:[]
            };
        },
        mounted () {
            // this.getDict();//获取金融产品类型
            // this.getDictIdType();
            this.getCasepkgList();
        },
        methods: {
            // 案件包列表数据
            getCasepkgList(){
                cpkapi.getCasePkgQuery({current:1,size:500}).then(res => {
                    if (!res.code) {
                        this.CasepackageList = res.records;
                    }
                })
            },
            apkChange(){

                let changeApk = this.CasepackageList.find(item =>{
                    return this.baseInfo.pkgId == item.id
                })
                this.baseInfo.financialOrgName = changeApk.entrustingAgencyName
                this.baseInfo.financialOrgCode = changeApk.entrustingAgencyCode
            },
            // 获取金融产品类型
            getDict(){
                let data = {
                    type:'financial'
                }
                api.getDict(data).then(res => {
                    if (!res.code) {
                        this.financialProductsTypeOptions = res;
                    }
                })
            },
            // 获取证件类型
            getDictIdType(){
                let data = {
                    type:'certificates'
                }
                api.getDict(data).then(res => {
                    if (!res.code) {
                        this.idTypeOptions = res;
                    }
                })
            },
            // 新增
            handleAdd(){
                this.obligorInfoForm.debtorEntityList.push({
                    name:'',//被申请人姓名
                    phone:'',//被申请人电话
                    cardTypeId:'',//证件类型	
                    addr:'',//地址	
                    cardNo:'',//证件号
                    mail:'',//邮编
                });
            },
            // 删除
            handleRemoveDomain(item) {
                var index = this.obligorInfoForm.debtorEntityList.indexOf(item)
                if (index !== -1) {
                  this.obligorInfoForm.debtorEntityList.splice(index, 1)
                }
            },
            // 清空
            handleReset(){
                for (let key in this.creditorInfo) {
                    this.creditorInfo[key] = ''
                }
            },

            // 下一步
            handleNextStep(){
                if(this.presentStep === 1){
                    this.$refs.ruleFormBase.validate((valid) => {
                        if (valid){this.presentStep++}
                    })
                }else if(this.presentStep === 2){
                    this.$refs.ruleFormCreditor.validate((valid) => {
                        if (valid){
                            this.$refs.ruleFormObligor.validate((valid) => {
                                if (valid){this.presentStep++}
                            })
                        }
                    })
                }else{
                    this.presentStep++
                }
            },
            handleSubmit(){
                 
                if(!this.$clickThrottle()) { return }//防止重复点击
                this.baseInfo.caseName = this.baseInfo.caseNo
                let data = {
                    ...this.baseInfo,//基本信息
                    ...this.creditorInfo,//债权人信息
                    ...this.obligorInfoForm,//被申请人
                    caseFileEntityList:this.fileList//证据材料
                }
                console.log('获取传给后台的信息',data)
                api.addCaseInfo(data).then(res => {
                    this.presentStep++
                    this.$parent.getCaseInfoList(1)
                    // this.$parent.getCaseCount()     
                })

            },
            // 上传
            handleUploadFile(fileList){
                console.log('获取上传文件信息',fileList)
                fileList = JSON.parse(JSON.stringify(fileList))
                this.fileList = fileList.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:item.fileName,
                        name:item.fileName
                    }
                })
            },
            handleClose() {
                this.$emit('update:addCaseDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-content{
    padding: 16px 24px;
    // max-height:500px
}

</style>