<template>
    <div>
        <!-- table -->
        <div class="pt-8">
            <div class="height-56 flex-row align-items-center justify-content-between">
                <div class="f18 color-text-primary">电话呼叫列表</div>
                <div class="flex-row">
                    
                </div>
            </div>
            
            <div class="case-table">
                <el-table :data="communicationRecord" height="370" >
                    <el-table-column type="index" label="序号" width="55"></el-table-column>
                    <el-table-column label="外呼/呼入类型" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span >{{ scope.row.callWay == 1 ? '呼出':'呼入' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="呼叫对象"  width="300" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span v-for="(item,index) in scope.row.linkedPersonInfo" :key="index">
                                {{ item.name}} -  {{ item.phone}} -  {{ item.type}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="接听状态" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span >
                                {{$util.getTelephoneTypeData(scope.row.linkedSituation).label}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="沟通时长" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span v-if="scope.linkedType == 1">通话{{scope.linkedDuration}}秒</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mediator" label="操作人" show-overflow-tooltip ></el-table-column>
                    <el-table-column label="操作时间" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span >{{ scope.row.createAt | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="channel" label="录音文件" show-overflow-tooltip ></el-table-column> -->
                </el-table>
            </div>
            
            <!-- <div class="text-center pt-16">
                <el-pagination
                    @size-change="getCaseInfoList"
                    @current-change="getCaseInfoList"
                    :current-page="queryParam.current"
                    :page-size="queryParam.size"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div> -->
        </div>
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
        },
        props: {
            eventTraDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                queryParam:{
                    caseId:'',
                    linkedWay:'1'
                },
                communicationRecord:[],

            };
        },
        mounted () {
            // console.log(this.eventTraDialog,'this.eventTraDialog')
            this.queryParam.caseId = this.eventTraDialog.caseId
            this.getmediate_record()
        },
        
        methods: {
            // 获取调解记录
            getmediate_record() {
                api.mediate_record_list(this.queryParam).then(res => {
                    if (!res.code) {
                        res.forEach(element => {
                            element.records.forEach(item =>{
                                this.communicationRecord.push(item)
                            })
                        });
                    }
                    console.log(this.communicationRecord,'communicationRecord')
                })
            },
            handleClose() {
                this.$emit('update:eventTraDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-trace{
    padding: 16px 20px;
    max-height:500px
}

</style>