<template>
    <el-drawer
      :title="editCaseDrawer.title"
      :visible="true"
      direction="rtl"
      size="50%"
      :before-close="handleClose"
      >
      <div class="">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="zd-el-tabs-custom zd-el-tabs-custom__left_padding">
            <el-tab-pane label="基本信息" name="baseInfo">
                <el-scrollbar class="bor">
                    <div class="" :style="{'height': `${drawerContentHeight}px`}">
                        <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-input
                                                    v-model.trim="baseInfo.financialOrgName"
                                                    placeholder="请输入金融机构名称"
                                                    clearable
                                                    ></el-input>
                                                </el-form-item>
                                            </el-col>
                                            <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-row>
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="案件名称" prop="caseName">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入案件名称"
                                                        v-model="baseInfo.caseName" :disabled="caseStatus != 0">
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="案件编号" prop="caseNo">
                                                    <el-input
                                                        clearable
                                                        placeholder="请输入案件编号"
                                                         :disabled="caseStatus != 0"
                                                        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-row>
                                        <el-row  type="flex" align="middle">
                                            <el-col :span="12">
                                                <el-form-item label="逾期次数" prop="overdueTimes">
                                                    <!-- <el-select v-model="baseInfo.overdueTimes"
                                                            clearable placeholder="请选择逾期次数"
                                                            class="width100">
                                                        <el-option
                                                                v-for="item in operateMethodOptions"
                                                                :key="item"
                                                                :label="item"
                                                                :value="item">
                                                        </el-option>
                                                    </el-select> -->
                                                    <el-input-number v-model="baseInfo.overdueTimes" :min="0" :max="100" class="width100"></el-input-number>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <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>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="案件当事人" name="caseParty">
                <el-scrollbar class="bor">
                    <div  :style="{'height': `${drawerContentHeight}px`}">
                        <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-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: 'change'}">
                                                        <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>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="模板选择" name="templateSelection">
                <div :style="{'height': `${drawerContentHeight}px`}">
                        <el-form ref="ruleFormTemplate" 
                        :model="queryParam" 
                        :rules="rulesClientTemplate" 
                        label-width="150px" 
                        class="demo-ruleForm">
                        <div>
                            <div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">模板话术</div>
                            <el-row  type="flex" align="middle">
                                <el-col :span="12">
                                    <el-form-item label="话术模板" prop="tpSpeechcraftId">
                                        <el-select v-model="queryParam.tpSpeechcraftId"
                                            clearable placeholder="请选择模板话术"
                                            class="width100">
                                        <el-option
                                                v-for="item in speechcraftTemplateOptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>    
                        </div>
                        
                        <div>
                            <div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">调解模板</div>
                            <el-row  type="flex" align="middle">
                                <el-col :span="12">
                                    <el-form-item label="调解模板" prop="tpMediateId">
                                        <el-select v-model="queryParam.tpMediateId"
                                            clearable placeholder="请选择调解模板"
                                            class="width100">
                                        <el-option
                                                v-for="item in mediationTemplateOptions"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="材料上传" name="materialUpload">
                <div :style="{'height': `${drawerContentHeight}px`}">
                    <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>
                
            </el-tab-pane>
            <el-tab-pane label="调解记录" name="mediationRecord">
                <el-scrollbar class="bor">
                <div :style="{'height': `${drawerContentHeight}px`}">
                    <div class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">调解记录</div>
                    <div class="p-h-24">
                        <div v-if="mediationRecord.length>0">
                            <div class="bg-color-light border-radius-4 p-24 mb-16" v-for="(item,inx) in mediationRecord" :key="inx">
                                <div class="f16 color-text-primary">{{item.createAt}}</div>
                                <div class="m-v-16" v-if="item.type==1">
                                    {{item.content}}
                                </div>
                                <div class="audio_wrap m-v-16" v-else>
                                    <audio :src="item.content.url" controls="controls" class="audio"></audio>
                                </div>
                                
                                <!-- <div class="color-text-primary f14"><span class="color-text-regular">备注：</span>继任人</div> -->
                            </div>
                        </div>
                        <el-empty description="暂无调解记录" v-else></el-empty>
                    </div>
                </div>
                </el-scrollbar>
            </el-tab-pane>
        </el-tabs>
        <div class="flex-row justify-content-end  p-16 border-t-solid-lighter-1">
            <div>
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">保存</el-button>
            </div>
            
        </div>
      </div>
    </el-drawer>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
             uploadFileName: () => import('@/components/uploadFileName.vue'),//上传
        },
        props: {
            editCaseDrawer: {
                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 {
                caseStatus:0,
                activeName:'baseInfo',
                //-----------------------------基本信息-------------------------
                baseInfo:{
                    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:[],//证据材料
                //-------------------------模板选择-----------------------------
                speechcraftTemplateOptions:[],//话术模板
                mediationTemplateOptions:[],//调解模板
                queryParam:{
                   tpMediateId:'',//调解模板id
                   tpSpeechcraftId:'',//话术模板
                },
                rulesClientTemplate:{
                    tpMediateId: [
                        { required: true, message: '请选择调解模板', trigger: 'change',},
                    ], 
                    tpSpeechcraftId: [
                        { required: true, message: '请选择话术模板', trigger: 'change',},
                    ],
                },

                caseId:'',//案件id
                mediationRecord:[],//调解记录
                currentPage:'',//父级页面当前页数
                
            };
        },
        async created() {

            this.getDict();//获取金融产品类型
            this.getDictIdType();//获取证件类型
            this.getTemplateList();//调解模板
            this.getSpeechcraftTemplateList(),//话术模板
            this.currentPage = this.editCaseDrawer.currentPage
            console.log('父级页面当前页数',this.currentPage)
            this.caseId = this.editCaseDrawer.data.id
            this.getCaseInfoById();//获取详情
            console.log('获取基本信息',this.baseInfo)
            
        },
        computed:{
            // 获取抽屉drawer的内容高度
            drawerContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-200
            }
            
        },
        methods: {
            
            
            // 获取金融产品类型
            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] = ''
                }
            },
            // 切换tab
            handleClick(tab, event) {
                // console.log(tab, event);
                // 为机构状态时，不显示确认按钮
                // if(tab.name ==='mediationRecord'){
                //      this.showButton = false   
                // }else{
                //     this.showButton = true
                // }
            },   
            // 模板话术
            getSpeechcraftTemplateList(){
                let data = {
                    current: 1,
                    name: "",
                    size: 300,
                    type: 2,
                }
                api.getTemplateList(data).then(res => {
                    if (!res.code) {
                        this.speechcraftTemplateOptions = res.records;
                    }
                })
            },
            // 调解模板
            getTemplateList(){
                let data = {
                    current: 1,
                    name: "",
                    size: 300,
                    type: 1,
                }
                api.getTemplateList(data).then(res => {
                    if (!res.code) {
                        this.mediationTemplateOptions = res.records;
                        // console.log('1111',this.mediationTemplateOptions)
                    }
                })
            },
            
            submitFormData(type){
                
            },
            handleUploadFile(fileList){
                fileList = JSON.parse(JSON.stringify(fileList))
                this.fileList = fileList.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:item.fileName,
                        name:item.fileName
                    }
                })
                
                // console.log('文件名',this.fileList)
            },

            // 获取详情
            getCaseInfoById(){ 
                let _that = this
                api.getCaseInfoById(this.caseId).then(res => {
                    if(!res.code){
                        _that.caseStatus=res.caseStatus
                        // 基本信息
                        _that.baseInfo = {
                            financialOrgName:res.financialOrgName,//金融机构名称
                            financialOrgCode:res.financialOrgCode,//社会统一信用代码
                            caseName:res.caseName,//案件名称
                            caseNo:res.caseNo,//案件编号
                            productTypeId:res.productTypeId,//金融产品类型
                            moneyAmount:res.moneyAmount,//标的金额
                            overdueTimes:res.overdueTimes,//逾期次数
                            caseDescr:res.caseDescr,//案件描述
                        };
                        console.log('基本信息',_that.baseInfo)
                        // 案件当事人
                        // 债务人
                        _that.obligorInfoForm ={
                            debtorEntityList:res.debtorEntityList
                        } 
                        // this.obligorInfo = res.debtorEntityList
                        console.log('债务人',_that.obligorInfoForm)
                        // 债权人
                        _that.creditorInfo = {
                            creditorName:res.creditorName,//债权人
                            creditorOrgCode:res.creditorOrgCode,//债权人机构代码	
                            creditorLegal:res.creditorLegal,//法人	
                            creditorIdcard:res.creditorIdcard,//法人身份证	
                            creditorPhone:res.creditorPhone,//法人手机	
                            creditorAddr:res.creditorAddr,//公司地址	
                            creditorMail:res.creditorMail,//邮编	
                            creditorAgent:res.creditorAgent,//代理人
                        };
                        // 调解记录
                        this.mediationRecord = res.logEntityList
                        // 模板选择
                        _that.queryParam = {
                            tpMediateId:String(res.tpMediateId),//调解模板id
                            tpSpeechcraftId:String(res.tpSpeechcraftId),//话术模板
                        };
                        // 材料
                        // console.log('获取图片',res.caseFileEntityList)
                        let caseFileEntityList = []
                        res.caseFileEntityList.forEach((item)=>{
                            caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
                        })
                        _that.fileList = caseFileEntityList

                    }
                    
                })
            },
            // 保存
            handleSubmit(){
                let data = {
                    id:this.caseId,
                    ...this.baseInfo,//基本信息
                    ...this.creditorInfo,//债权人信息
                    ...this.obligorInfoForm,//债务人
                    ...this.queryParam,//模板选择
                    caseFileEntityList:this.fileList//证据材料
                }
                let formValidates = [
                    this.$refs["ruleFormBase"].validate(),
                    this.$refs["ruleFormCreditor"].validate(),
                    this.$refs["ruleFormObligor"].validate(),
                    this.$refs["ruleFormTemplate"].validate(),
                ]
                if(!this.$clickThrottle()) { return }//防止重复点击
                Promise.all(formValidates).then(()=>{
                    
                    api.updateCaseInfoById(data).then(res => {
                        this.$message.success("编辑成功");
                        this.$parent.getCaseInfoList(this.currentPage)
                        this.handleClose()     
                    })
                }).catch(()=>{
                    this.$message({ message: '请检查必填项是否填完', type: "warning",customClass:'messageZindex'});
                    // console.log('请检查必填项是否填完')
                })
                
            },
                
            checkForm(formName) {
                return new Promise((resolve, reject) => {
                    this.$refs[formName].validate(valid => {
                    if (valid) {
                        resolve();
                    } else reject();
                    });
                });
            },
            
            handleClose() {
                this.$emit('update:editCaseDrawer', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.audio_wrap{
	width: 330px;
	height: 40px;
    .audio{
        width: 100%;
        height: 100%;
    }
}
</style>