<template>
    <div>
        <el-table border v-loading="loading" :data="list" >
            <el-table-column label="ID" align="center" prop="logId" />
            <el-table-column label="公司名" align="center" prop="companyName" />
            <el-table-column label="员工姓名" align="center" prop="companyUserName" />
            <el-table-column label="录制地址" align="center"  show-overflow-tooltip prop="recordPath" width="350">
                <template slot-scope="scope">
                    <audio  v-if="scope.row.recordPath!=null"   controls :src="handleRecordPath(scope.row.recordPath)"></audio>
                </template>
            </el-table-column>
            <el-table-column label="呼入时间" align="center" prop="callCreateTime" width="180">
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.callCreateTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="应答时间" align="center" prop="callAnswerTime" width="180">
                <template slot-scope="scope">
                <span>{{ parseTime(scope.row.callAnswerTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="主叫" align="center" prop="callerNum" />
            <el-table-column label="被叫" align="center" prop="calleeNum" />
            <el-table-column label="时长(秒)" align="center" prop="callTime" width="180">
                <template slot-scope="scope">
                <span v-if="scope.row.recordPath!=null">{{ scope.row.callTime}}秒 </span>
                </template>
            </el-table-column>
            <el-table-column label="意向度" align="center" prop="intention" width="180">
                <template slot-scope="scope">
                    <el-tag v-for="item in levelList" v-if="scope.row.intention == item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column label="主叫显示号" align="center" prop="displayCallerNumber" />
            <el-table-column label="被叫显示号" align="center" prop="displayCalleeNumber" /> -->
            <el-table-column label="状态" align="center" prop="status" >
                <template slot-scope="scope">
                    <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
                </template>
            </el-table-column>
            <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
        </el-table>
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        />

    </div>
</template>
  
<script>
import { listCompanyVoiceLogs, getCompanyVoiceLogs, delCompanyVoiceLogs, addCompanyVoiceLogs, updateCompanyVoiceLogs, exportCompanyVoiceLogs } from "@/api/company/companyVoiceLogs";
import { listCallphone } from "@/api/company/callphone";

import {getDicts} from "@/api/system/dict/data";
export default {
        name: "aiCallVoiceLog",
        data() {
            return {
                statusOptions:[],
                levelList:[],
                // 遮罩层
                loading: true,
                // 总条数
                total: 0,
                list: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    customerId: null,
                    callerId:null
                },
            };
        },
        created() {
            getDicts("ai_call_task_status").then((response) => {
                this.statusOptions = response.data;
            });
            getDicts("customer_intention_level").then(e => {
                this.levelList = e.data;
            })
          
        },
        methods: {
            getData(customerId,calleesId){
                this.queryParams.customerId=customerId;
                this.queryParams.callerId=calleesId;
                this.queryParams.pageNum=1;
                this.getList();
            },
            getList(){
                this.loading = true;
                listCallphone(this.queryParams).then(response => {
                    this.list = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            handleRecordPath(url){
                let path = 'http://129.28.164.235:8899/recordings/files?filename=' + url;
                console.log(path);
                return path;
            }
        }
    };
</script>
<style lang="scss" scoped> 
</style>
 