<template>
<div>
    <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 class="height-48 line-height-48 f18 color-000 m-v-16 p-h-24">基本信息</div>
                        <div class="p-h-24">
                            <el-row :gutter="20" class="mb-24">
                                <el-col :span="12">
                                    <div class="f14 color-text-primary"><span class="color-text-regular">金融机构：</span>{{baseInfo.financialOrgName ||'-'}}</div>
                                </el-col>
                                <el-col :span="12" >
                                    <div class="f14 color-text-primary"><span class="color-text-regular">社会统一信用代码：</span>{{baseInfo.financialOrgCode ||'-'}}</div>
                                </el-col>
                                
                            </el-row>
                            <el-row :gutter="20" class="mb-24">
                                <el-col :span="12" >
                                    <div class="f14 color-text-primary"><span class="color-text-regular">案件名称：</span>{{baseInfo.caseName ||'-'}}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="f14 color-text-primary"><span class="color-text-regular">案件编号：</span>{{baseInfo.caseNo ||'-'}}</div>
                                </el-col>
                                
                            </el-row>
                            <el-row :gutter="20" class="mb-24">
                                <el-col :span="12">
                                    <div class="f14 color-text-primary"><span class="color-text-regular">金融产品类型：</span>{{productType ||'-'}}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="f14 color-text-primary"><span class="color-text-regular">标的金额：</span>{{baseInfo.moneyAmount ||'-'}}</div>
                                </el-col>
                                
                            </el-row>
                            <el-row :gutter="20" class="mb-24">
                                <el-col :span="12">
                                    <div class="f14 color-text-primary"><span class="color-text-regular">逾期次数：</span>{{baseInfo.overdueTimes}}</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="f14 color-text-primary"><span class="color-text-regular">案件描述：</span>{{baseInfo.caseDescr ||'-'}}</div>
                                </el-col>
                            </el-row>
                        </div>   
                    </div>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="案件当事人" name="caseParty">
                <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">
                            <div>
                                <div class="color-text-primary pb-16 f14">债权人</div>
                                <el-row :gutter="20" class="mb-24">
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">债权人：</span>{{baseInfo.creditorName ||'-'}}</div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">社会统一信用代码：</span>{{baseInfo.creditorOrgCode ||'-'}}</div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" class="mb-24">
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">法人姓名：</span>{{baseInfo.creditorLegal ||'-'}}</div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">法人身份证号：</span>{{baseInfo.creditorIdcard  ||'-'}}</div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" class="mb-24">
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">法人手机号：</span>{{baseInfo.creditorPhone ||'-'}}</div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">公司地址：</span>{{baseInfo.creditorAddr ||'-'}}</div>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20" class="mb-24">
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">邮编：</span>{{baseInfo.creditorMail ||'-'}}</div>
                                    </el-col>
                                    <el-col :span="12">
                                        <div class="f14 color-text-primary"><span class="color-text-regular">代理人：</span>{{baseInfo.creditorAgent ||'-'}}</div>
                                    </el-col>
                                </el-row>
                            </div>
                            <div>
                                <div class="color-text-primary pb-16 f14">债务人</div>
                                <div v-for="(item,inx) in obligorInfo" :key="inx">
                                    <div class="f14 mb-16">债务人{{inx+1}}</div>
                                    <div>
                                        <el-row :gutter="20" class="mb-24">
                                            <el-col :span="12">
                                                <div class="f14 color-text-primary"><span class="color-text-regular">债务人：</span>{{item.name ||'-'}}</div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="f14 color-text-primary"><span class="color-text-regular">证件类型：</span>{{item.cardType ||'-'}}</div>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" class="mb-24">
                                            <el-col :span="12">
                                                <div class="f14 color-text-primary"><span class="color-text-regular">证件号码：</span>{{item.cardNo ||'-'}}</div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="f14 color-text-primary"><span class="color-text-regular">手机号：</span>{{item.phone ||'-'}}</div>
                                            </el-col>
                                        </el-row>
                                        <el-row :gutter="20" class="mb-24">
                                            <el-col :span="12">
                                                <div class="f14 color-text-primary"><span class="color-text-regular">公司地址：</span>{{item.addr ||'-'}}</div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div class="f14 color-text-primary"><span class="color-text-regular">邮编：</span>{{item.mail ||'-'}}</div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                                

                            </div>
                        </div>
                        </div> 
                    </div>
                </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="模板话术" name="templateSelection">
                <div :style="{'height': `${drawerContentHeight}px`}">
                    <div class="flex-row justify-content-between align-items-center f18 color-000 m-v-16 p-h-24">
                        <div class="line-height-48">调解模板</div>
                        <el-button type="primary" @click="handleDownloadMediationTemplate">下载调解模板</el-button>
                    </div> 
                    <div class="p-h-24" >
                        <upload-file :file-list="fileListTemplate" :max-count="1"
                                    :show-file-name="true"
                                    accept=".doc,.docx"
                                    uploadName="调解协议模板"
                                    @handleUploadFile="handleUploadFileTemplate">
                        </upload-file>
                    </div>
                    <!-- <el-empty description="暂无调解模板" v-if="fileListTemplate.length==0"></el-empty> -->
                </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" v-if="fileList.length>0">
                        <upload-file :file-list="fileList" :max-count="200"
                                    :show-file-name="true"
                                    uploadName="材料名称"
                                    :readOnly="true"
                                    @handleUploadFile="handleUploadFile">
                        </upload-file>
                    </div>
                    <el-empty description="暂无证据材料" v-else></el-empty>
                </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="handleSavetTemplate" v-if="savetTemplateBtnShow">保存模板</el-button>
                <el-button type="primary"  v-if="baseInfo.caseStatus != 2" @click="handleSubmit">去调解</el-button>
            </div>
            
        </div>
      </div>
    </el-drawer>
    <el-dialog
        title="调解操作"
        :visible.sync="dialogVisible"
        width="30%"
        :modal-append-to-body='false'
        :before-close="handleCloseMediationRecord">
        <span class="p-24">请确定当前记录成功或者失败？</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleChangeMediation(0)">失败</el-button>
            <el-button type="primary" @click="handleChangeMediation(1)">成功</el-button>
        </span>
    </el-dialog>
</div>    
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
             uploadFile: () => import('@/components/uploadFile.vue'),//上传
        },
        props: {
            editCaseDrawer: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        
        data() {
            return {
                activeName:'baseInfo',
                baseInfo:{},//基本信息
                obligorInfo:[],//债务人信息
                financialProductsTypeOptions:[],
                productType:'',//金融产品类型
                idTypeOptions:[],
                fileListTemplate:[],//调解模板
                fileList:[],//证据材料
                caseId:'',//案件id 
                mediationRecord:[],//调解记录
                dialogVisible:false,
                savetTemplateBtnShow:false,//是否显示保存模板按钮
                sourcePage:'',//页面来源
            };
        },
        async created() {
            await this.getDict()
            await this.getDictIdType()
            this.caseId = this.editCaseDrawer.data.id
            this.sourcePage = this.editCaseDrawer.sourcePage
            await this.getCaseInfoById();//获取详情

            
        },
        computed:{
            // 获取抽屉drawer的内容高度
            drawerContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-200
            }
            
        },
        methods: {
            
            // 切换tab
            handleClick(tab, event) {
                // console.log(tab, event);
                
                if(tab.name ==='templateSelection'){
                     this.savetTemplateBtnShow = true   
                }else{
                    this.savetTemplateBtnShow = false
                }
            }, 
            // 获取金融产品类型
            getDict(){
                let data = {
                    type:'financial'
                }
                return api.getDict(data).then(res => {
                    if (!res.code) {
                        this.financialProductsTypeOptions = res;
                    }
                })
            },
            // 获取证件类型
            getDictIdType(){
                let data = {
                    type:'certificates'
                }
                return api.getDict(data).then(res => {
                    if (!res.code) {
                        this.idTypeOptions = res;
                    }
                })
            },  
            // 获取详情
            getCaseInfoById(){ 
                const _that = this
                return api.getCaseInfoById(_that.caseId).then(res => {
                    if(!res.code){

                        // 模板选择
                        // console.log('调解模板',res.caseAgreement)
                        if(res.caseAgreement){
                            _that.fileListTemplate = [
                                {url:res.caseAgreement.url,fileName:'调解协议模板'}
                            ]
                        }
                        // 材料
                        let caseFileEntityList = []
                        res.caseFileEntityList.forEach((item)=>{
                            caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
                        })
                        _that.fileList = caseFileEntityList

                        // 调解记录
                        this.mediationRecord = res.logEntityList
                        // 基本信息
                        _that.baseInfo = res
                        let obj = _that.financialProductsTypeOptions.find((item)=>{
                            return item.code == res.productTypeId
                        })
                        _that.productType = obj.codeName//获取金融产品名称
                        // 债务人
                        _that.obligorInfo = res.debtorEntityList
                        // console.log('债务人',_that.obligorInfo)

                        // 匹配证件
                        // console.log('证件类型',_that.idTypeOptions)
                        _that.obligorInfo.forEach((opt)=>{
                            let objData = _that.idTypeOptions.find((item)=>{
                                return item.code == opt.cardTypeId
                            })
                            opt.cardType = objData.codeName
                        })
                        
                        

                    }
                    
                })
            },
            // 下载调解模板
            handleDownloadMediationTemplate(){
                if(!this.$clickThrottle()) { return }//防止重复点击 
                if(this.fileListTemplate[0].url){
                    this.handlePreview({previewUrl:"/mediate/minio/preview/"+this.fileListTemplate[0].url,url:this.fileListTemplate[0].url})
                }
                
            },
            async handlePreview(item) {
                try {
                    let res = await this.$fetchApi.getMinioToken({objectName: item.url})
                    console.log(res)
                    window.open(`${item.previewUrl}?token=${res}`, '_target')
                }catch (e) {
                    this.$message.error(e.msg || e)
                }
            },
            // 调解模板
            handleUploadFileTemplate(fileList){
                fileList = JSON.parse(JSON.stringify(fileList))
                this.fileListTemplate = fileList.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:'调解协议模板'
                    }
                })
            },
            handleUploadFile(fileList){
                console.log('fileList===',fileList)
                fileList = JSON.parse(JSON.stringify(fileList))
                
                this.fileList = fileList.map((item,i) => {
                    return {
                        url: item.url,
                        fileName:item.name,
                        name:item.name
                    }
                })
            },
            // 保存模板
            handleSavetTemplate(){
                let data={
                    id:this.caseId,
                    url:this.fileListTemplate[0].url
                }
                api.updateCaseAgreement(data).then(res => {

                    this.$message({message: '更新模板成功', type: "success",customClass:'messageZindex'})

                })
            },
            // 保存
            handleSubmit(){
                // this.dialogVisible = true
                // this.$router.push('/mediation-page')
                
                this.$router.push({path:'/mediation-page?caseId='+this.caseId+'&sourcePage='+this.sourcePage})
            },

            // 调解成功或者失败
            handleChangeMediation(resultStatus){
                let data={
                    id:this.caseId,
                    resultStatus:resultStatus
                }
                api.updateResultStatus(data).then(res => {

                    this.$parent.getCaseInfoList(1)
                    this.handleCloseMediationRecord()
                    this.handleClose()
                    if(resultStatus==1){
                        this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
                    }else{
                         this.$message({message: '调解失败', type: "error",customClass:'messageZindex'})
                    }

                })
            },

            handleCloseMediationRecord(){
                // this.$emit('update:dialogVisible', null)
                this.dialogVisible = false
            },
                        
            handleClose() {
                this.$emit('update:editCaseDrawer', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.audio_wrap{
	width: 330px;
	height: 40px;
    .audio{
        width: 100%;
        height: 100%;
    }
}

</style>