<template>
    <div>
        <div class="layout-center-wrap">
            <!-- 左边数据 -->
            <div class="layout-center-left-wrap">
                <div class="layout-center-left-top">
                    <div class="top-bg">
                        <div class="flex-row ">
                            <img src="@/assets/image/mediate/add.png" alt="" class="add-img">
                            <img src="@/assets/image/mediate/text.png" alt="" class="top-bg-text">
                        </div>
                        <div class="flex-row justify-content-center align-items-center m-v-8">
                            <i class="el-icon-arrow-left cursor-pointer color-fff" @click="handleChangeImg('left')"></i>
                            <!-- <div class="" style="margin:0 65px">
                                <img src="@/assets/image/mediate/group-img-1.png" alt="" class="group-img">
                                <img src="@/assets/image/mediate/group-text-1.png" alt="" class="group-text">
                            </div> -->
                            <div class="" style="margin:0 65px">
                                <div v-for="(item,inx) in imgArr" :key="inx" v-show="item.id === currentIndex">
                                    <img :src="item.imgUrl" alt="" class="group-img">
                                    <img :src="item.imgText" alt="" class="group-text">
                                </div>
                                
                            </div>
                            <i class="el-icon-arrow-right cursor-pointer color-fff" @click="handleChangeImg('right')"></i>
                        </div>
                        <div class="text-center">
                            <img src="@/assets/image/mediate/decript.png" alt="">
                        </div>
                    </div>
                </div>
                <el-scrollbar class="bor">
                    <div :style="{'height': `${leftContentHeight}px`}">
                        <div class="left-base-info p-24" >
                            <div class="mb-16">
                                <div class="f16 color-text-primary mb-8">{{baseInfo.financialOrgName || '-'}}</div>
                                <div class="f14 color-text-secondary">{{baseInfo.financialOrgCode || '-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-name.png" alt="" class="icon-small">案件名称</div>
                                <div class="f14 color-text-primary">{{baseInfo.caseName ||'-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/case-number.png" alt="" class="icon-small">案件编号</div>
                                <div class="f14 color-text-primary">{{baseInfo.caseNo ||'-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">金融产品类型</div>
                                <div class="f14 color-text-primary">{{productType ||'-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">逾期次数</div>
                                <div class="f14 color-text-primary">{{baseInfo.overdueTimes}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/finance.png" alt="" class="icon-small">标的金额</div>
                                <div class="f14 color-text-primary">{{baseInfo.moneyAmount ||'-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/start-time.png" alt="" class="icon-small">计划开始时间</div>
                                <div class="f14 color-text-primary">{{baseInfo.planStartTime ||'-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/end-time.png" alt="" class="icon-small">计划结束时间</div>
                                <div class="f14 color-text-primary">{{baseInfo.planEndTime ||'-'}}</div>
                            </div>
                            <div class="mb-16">
                                <div class="f14 color-text-regular mb-8"><img src="@/assets/image/mediate/schedule.png" alt="" class="icon-small">案件描述</div>
                                <div class="f14 color-text-primary">{{baseInfo.caseDescr ||'-'}}</div>
                            </div>
                        </div>
                    </div>
            </el-scrollbar> 

            </div>
            
            <div class="layout-center-right-wrap">
                <!-- 中间 -->
                <div class="layout-center-right-center">
                    <el-tabs class="zd-el-tabs-custom zd-el-tabs-custom__left_padding" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="当事人" name="caseParty">
                            <el-scrollbar class="bor">
                            <div class="p-h-16" :style="{'height': `${centerContentHeight}px`}">
                                <div class="pt-24">
                                    <div class="f14">债权人</div>
                                    <div class="center-list">
                                        <div class="center-list-left pink-color">
                                            <el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
                                            <div class="f18 color-text-primary mt-16">{{baseInfo.creditorName ||'-'}}</div>
                                            <div class="f14 color-text-primary mt-8">债权人</div>
                                        </div>
                                        <div class="center-list-right">
                                            <el-row :gutter="16" class="el-row mb-16">
                                                <el-col :span="8">
                                                    <div class="f14">
                                                        <div class="color-text-regular">社会统一信用代码</div>
                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorOrgCode ||'-'}}</div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div class="f14">
                                                        <div class="color-text-regular">法人姓名</div>
                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorLegal ||'-'}}</div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div class="f14">
                                                        <div class="color-text-regular">法人手机号</div>
                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorPhone ||'-'}}</div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                            <el-row :gutter="16" class="el-row">
                                                <el-col :span="8">
                                                    <div class="f14">
                                                        <div class="color-text-regular">法人身份证号</div>
                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorIdcard ||'-'}}</div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div class="f14">
                                                        <div class="color-text-regular">公司地址</div>
                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorAddr ||'-'}}</div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="8">
                                                    <div class="f14">
                                                        <div class="color-text-regular">邮编</div>
                                                        <div class="color-text-primary mt-8">{{baseInfo.creditorMail ||'-'}}</div>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </div>


                                <div class="pt-24">
                                    <div class="f14">债务人</div>
                                    <div v-if="obligorInfo.length>0">
                                        <div class="center-list" v-for="(item,inx) in obligorInfo" :key="inx">
                                            <div class="center-list-left blue-color">
                                                <el-avatar :size="77" :src="defaultHeadUrl" class="el-avatar"></el-avatar>
                                                <div class="f18 color-text-primary mt-16">{{item.name ||'-'}}</div>
                                                <div class="f14 color-text-primary mt-8">债务人</div>
                                            </div>
                                            <div class="center-list-right">
                                                <el-row :gutter="16" class="el-row mb-16">
                                                    <el-col :span="12">
                                                        <div class="f14">
                                                            <div class="color-text-regular">身份证号码</div>
                                                            <div class="color-text-primary mt-8">{{item.cardNo ||'-'}}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="f14">
                                                            <div class="color-text-regular">手机号码</div>
                                                            <div class="color-text-primary mt-8">{{item.phone ||'-'}}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <el-row :gutter="16" class="el-row">
                                                    <el-col :span="12">
                                                        <div class="f14">
                                                            <div class="color-text-regular">公司地址</div>
                                                            <div class="color-text-primary mt-8">{{item.addr ||'-'}}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <div class="f14">
                                                            <div class="color-text-regular">邮编</div>
                                                            <div class="color-text-primary mt-8">{{item.mail ||'-'}}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </div>
                                        </div>
                                    </div>
                                    <el-empty description="暂无债务人数据" v-else></el-empty>

                                </div>
                            </div>
                            </el-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="证据材料" name="materialUpload">
                            <el-scrollbar class="bor">
                            <div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
                                <div class="p-v-16" 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-scrollbar>
                        </el-tab-pane>
                        <el-tab-pane label="调解记录" name="mediationRecord">
                            <el-scrollbar class="bor">
                            <div :style="{'height': `${centerContentHeight}px`}" class="p-h-16 ">
                                <div v-if="mediationRecord.length>0" class="p-v-16">
                                    <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>
                            </el-scrollbar>
                        </el-tab-pane>
                    </el-tabs>

                    <div class="layout-center-right-bottom">
                        <div class="f18 color-000">调解笔记</div>
                        <el-input type="textarea" v-model="mediateNote" placeholder="请在这里输入调解笔记..." @change="handleChangeTextarea" class="mediate-note">

                        </el-input>
                    </div>
                </div>
                <!-- 右边 -->
                <div class="layout-center-right">
                    <div class="layout-center-right-open " v-if="!isShow">
                        <div class="f18 color-text-primary p-16">调解话术</div>
                        <el-scrollbar class="bor">
                            <div :style="{'height': `${rightContentHeight}px`}">
                                <div v-html="speechContent" class="f14 color-text-regular p-h-16" v-if="speechContent">{{speechContent}}</div>
                                <el-empty description="暂无话术内容" v-else></el-empty>
                            </div>
                        </el-scrollbar> 
                    </div>
                    <div class="layout-center-right-stow f16 color-text-regular" v-else>
                        <div  class="layout-center-right-stow-text">
                            展开调解话术
                        </div>
                    </div>
                    <div class="left-icon-wrap" @click="handleToggleShow" :class="isShow?'right-40':'right-350'">
                        <!-- <i :class="['f18 el-icon-arrow-right transform-time-default', {
                                'rotate--180': isShow
                            }]"></i> -->
                        <img src="@/assets/image/mediate/left.png"   alt="" v-if="isShow">
                        <img src="@/assets/image/mediate/right.png"   alt="" v-else>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="layout-bottom">
            <div>
                <el-button @click="handleDownloadMediationTemplate">下载调解模板</el-button>
                <el-button type="danger" @click="updateCaseLog(0)">调解失败</el-button>
                <el-button type="success" @click="updateCaseLog(1)">调解成功</el-button>
                <el-button type="primary" @click="updateCaseLog(2)">暂存</el-button>
            </div>
            <div>
                <el-button @click="getFrontCaseById">上一个案件</el-button>
                <el-button @click="getNextCaseById">下一个案件</el-button>
                <el-button @click="handleBack">退出当前调解</el-button>
            </div>

        </div>
    </div>

</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
            uploadFile: () => import('@/components/uploadFile.vue'),//上传
        },
        data() {
            return {
                currentIndex:0,
                imgArr:[
                    {id:0,imgUrl:require('@/assets/image/mediate/group-img-1.png'),imgText:require('@/assets/image/mediate/group-text-1.png')},
                    {id:1,imgUrl:require('@/assets/image/mediate/group-img-2.png'),imgText:require('@/assets/image/mediate/group-text-2.png')},
                    {id:2,imgUrl:require('@/assets/image/mediate/group-img-3.png'),imgText:require('@/assets/image/mediate/group-text-3.png')},
                    {id:3,imgUrl:require('@/assets/image/mediate/group-img-4.png'),imgText:require('@/assets/image/mediate/group-text-4.png')},
                ],
                timer:null,
                activeName:'caseParty',
                isShow:true,
                defaultHeadUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//默认图片
                fileList:[],
                mediateNote:'',//调解笔记
                mediationRecord:[],//调解记录
                baseInfo:{},//基本信息
                obligorInfo:[],//债务人信息
                caseId:'',//案件id
                speechId:'',//话术模板id
                speechContent:'',//话术内容
                templateUrl:'',//调解模板url
                financialProductsTypeOptions:[],//金融产品类型
                productType:'',
            };
        },
        computed:{
            // 左侧
            leftContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-56-65-184-12
            },

            // 中间的内容高度
            centerContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-56-112-65-48
            },
            // 获取右侧滚动高度
            rightContentHeight(){
                let oh = document.documentElement.clientHeight;
                return oh-56-56-65-20
            },
            
        },
        async created() {
            await this.getDict()
            this.startInterval()
            this.caseId = this.$route.query.caseId
            await this.getCaseInfoById();//获取详情
            console.log('this.getDict()===',this.getDict())
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
            }
        },
        methods: {
            // 获取金融产品类型
            getDict(){
                let data = {
                    type:'financial'
                }
                return api.getDict(data).then(res => {
                    if (!res.code) {
                        this.financialProductsTypeOptions = res;
                    }
                })
            },
            // 定时器
            startInterval(){
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.currentIndex++
                    if(this.currentIndex>this.imgArr.length-1){
                        this.currentIndex=0
                    }
                },3000)
            },
            handleChangeImg(val){
                if(val=='right'){
                    this.currentIndex++
                    if(this.currentIndex == this.imgArr.length){
                        this.currentIndex =0
                    }
                }else{
                    if(this.currentIndex == 0){
                        this.currentIndex = this.imgArr.length
                    }
                    this.currentIndex--
                }
            },
            handleChangeTextarea(){
                // console.log('内容',this.mediateNote)
                // sessionStorage.setItem('mediateNote', this.mediateNote)
            },
            handleClick(tab, event) {
                
            },
            handleToggleShow(){
                this.isShow = !this.isShow
            },
            // 获取详情
            getCaseInfoById(){ 
                const _that = this
                return api.getCaseInfoById(_that.caseId).then(res => {
                    if(!res.code){
                        _that.detailData(res)
                    }
                    
                })
            },
            // 详情展示内容
            detailData(res){
                // 证据材料
                let caseFileEntityList = []
                res.caseFileEntityList.forEach((item)=>{
                    caseFileEntityList.push({name:item.name,fileName:item.name,url:item.url})
                })
                this.fileList = caseFileEntityList
                // 调解记录
                this.mediationRecord = res.logEntityList
                // 基本信息
                this.baseInfo = res
                // 债务人
                this.obligorInfo = res.debtorEntityList

                // 获取话术模板id
                this.speechId = res.tpSpeechcraftId
                if(this.speechId){
                    this.getTemplateById()
                }
                
                // 获取调解模板url
                if(res.caseAgreement){
                    this.templateUrl = res.caseAgreement.url
                }

                this.caseId = res.id
                // 获取金融产品类型
                console.log('financialProductsTypeOptions',this.financialProductsTypeOptions)
                let obj = this.financialProductsTypeOptions.find((item)=>{
                    return item.code == res.productTypeId
                })
                this.productType = obj.codeName||'-'//获取金融产品名称
                console.log('this.productType====',this.productType)
            },
            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
                    }
                })
            },
            // 获取话术内容
            getTemplateById(){
                let data={
                    id:this.speechId
                }
                api.getTemplateById(data).then(res => {
                    if (!res.code) {
                        this.speechContent = res.content;
                    }
                })
            },


            //-------------------------------------------------------------底部按钮接口-------------------------------------------------
            // // 调解成功或者失败
            // handleChangeMediation(resultStatus){
            //     if(!this.$clickThrottle()) { return }//防止重复点击 
            //     let data={
            //         id:this.caseId,
            //         resultStatus:resultStatus
            //     }
            //     api.updateResultStatus(data).then(res => {

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

            //     })
            // },
            // 暂存2 调解成功1 失败0
            updateCaseLog(status){
                if(!this.$clickThrottle()) { return }//防止重复点击 
                let data = {
                    caseId:this.caseId,
                    content:this.mediateNote,
                    status:status
                }
                if(this.mediateNote){
                    api.updateCaseLog(data).then(res => {
                        
                        if(status==0){
                            this.$message({message: '调解失败', type: "success",customClass:'messageZindex'})
                        }else if(status==1){
                            this.$message({message: '调解成功', type: "success",customClass:'messageZindex'})
                        }else{
                            this.$message({message: '暂存成功', type: "success",customClass:'messageZindex'})
                        }
                        this.mediateNote = ''
                        this.getCaseInfoById()
                    })
                }else{
                    this.$message({message: '请先输入调解笔记内容', type: "warning",customClass:'messageZindex'})
                }
                
            },


            // 获取上一件案件
            getFrontCaseById(){
                if(!this.$clickThrottle()) { return }//防止重复点击 
                api.getFrontCaseById({id:this.caseId}).then(res => {
                     if(!res.code){
                        // let caseChangeData = res
                        this.detailData(res)
                     }
                })
            },
            // 获取下一件案件
            getNextCaseById(){
                if(!this.$clickThrottle()) { return }//防止重复点击 
                api.getNextCaseById({id:this.caseId}).then(res => {
                     if(!res.code){
                        this.detailData(res)
                     }
                })
            },
            // 下载调解模板
            handleDownloadMediationTemplate(){
                if(!this.$clickThrottle()) { return }//防止重复点击 
                // console.log('调解模板url',templateUrl)
                if(this.templateUrl){
                    this.handlePreview({previewUrl:"/mediate/minio/preview/"+this.templateUrl,url:this.templateUrl})
                }else{
                    this.$message({message: '当前案件未存在调解模板', type: "warning",customClass:'messageZindex'})
                }
                
            },
            async handlePreview(item) {
                try {
                    let res = await this.$fetchApi.getMinioToken({objectName: item.url})
                    window.open(`${item.previewUrl}?token=${res}`, '_target')
                }catch (e) {
                    this.$message.error(e.msg || e)
                }
            },
            handleBack(){
                // console.log('页面来源',this.$route.query.sourcePage)
                if(this.$route.query.sourcePage == 'mediationManagement'){
                    this.$router.push('/mediation-management')
                }else{
                     this.$router.push('/workbench')
                }
                
            },
            
           






        }
    };
</script>
<style lang="scss" scoped>
.layout-center-wrap{
    display: flex;
    height: calc(100% - 65px);
}
// 左侧
.layout-center-left-wrap{
    width: 320px;
    height: 100%;
    margin-top: 12px;
}
.layout-center-left-top{
    height: 184px;
    .top-bg{
        width: 320px;
        height: 100%;
        background: url('~@//assets/image/mediate/bg.png') no-repeat ;
        padding: 12px 16px;
        .top-bg-text{
            height: 16px;
            vertical-align: middle;     
        }
    }
    
}
.add-img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 3px;
}
.group-img{
    position: relative;
}
.group-text{
    position: absolute;
    top:80px;
    left:180px;
}
.left-base-info{
    height: calc(100%);
    border-right: 1px solid #E4E7ED;
}
.icon-small{
    margin-right: 4px;
    vertical-align: middle;
}

// 底部
.layout-bottom{
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #E4E7ED;
}

// 中间
.layout-center-right-wrap{
    width: 100%;
    display: flex;
}
.layout-center-right-center{
    flex:1;
}
.center-list{
    display: flex;
    height: 204px;
    border: 1px solid #E4E7ED;
    border-radius: 5px;
    margin-top: 12px;
    .center-list-left {
        width: 180px;
        height: 100%;
        text-align: center;
        padding: 24px 0 33px 0;
    }
    .center-list-right{
        height: 100%;
        padding: 24px 16px;
        flex:1;
    }
}
.pink-color{
    // background:linear-gradient(101.33deg, #9170FF 0.46%, #604DFA 100%);
    // opacity: 0.1;
    background-color: rgba(#604DFA, 0.1);
    
}
.blue-color{
    // background: linear-gradient(101.33deg, #3CA0FA 0.46%, #2F6AF5 100%);
    background-color: rgba(#2F6AF5, 0.1);;
    // opacity: 0.2;
}
.el-row{
    height: 70px;
}

.layout-center-right-bottom{
    height: 112px;
    padding: 16px 24px;
    border-top: 1px solid #E4E7ED;
}


// 最右侧
.layout-center-right{
    border-left: 1px solid #E4E7ED;
    height: calc(100%);
    .layout-center-right-open{
        width: 350px;
    }
    .layout-center-right-stow{
        width: 40px;
        .layout-center-right-stow-text{
            height: 400px;
            text-align: center;
            margin: auto;
            writing-mode: vertical-lr;
             letter-spacing: 8px;
        }
    }
    .left-icon-wrap{
        position: absolute;
        top: 250px;
        width: 24px;
        height: 24px;
        background-color: #E4E7ED;
        border-radius: 4px;
        cursor: pointer;
    }
    .right-40{
        right: 40px;
    }
    .right-350{
        right: 350px;
    }
    
}

</style>
