<template>
  <el-dialog title="通话记录详情" :close-on-click-modal="false" :visible.sync="open" width="1200px" append-to-body>
    <el-descriptions :contentStyle="CS" :label-style="LS " class="margin-top" :column="3" size="medium" border>
      <el-descriptions-item label="房间号">
        {{info.id}}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <cai-dict-tag :options="userCallStatusList" :value="info.status"/>
      </el-descriptions-item>
      <el-descriptions-item label="删除状态">
        <cai-dict-tag :options="deleteFlagList" :value="info.deleteFlag"/>
      </el-descriptions-item>
      <el-descriptions-item label="拨打方ID">
        {{info.fromUid}}
      </el-descriptions-item>
      <el-descriptions-item :label="'拨打方'+systemName+'号'">
        {{info.fromUsercode}}
      </el-descriptions-item>
      <el-descriptions-item label="拨打方头像">
        <image-avatar :src="info.fromAvatar"/>
      </el-descriptions-item>
      <el-descriptions-item label="接收方ID">
        {{info.toUid}}
      </el-descriptions-item>
      <el-descriptions-item :label="'接收方'+systemName+'号'">
        {{info.toUsercode}}
      </el-descriptions-item>
      <el-descriptions-item label="接收方头像">
        <image-avatar :src="info.toAvatar"/>
      </el-descriptions-item>

      <el-descriptions-item label="创建时间">
        {{info.createTime}}
      </el-descriptions-item>
      <el-descriptions-item label="开始时间">
        {{info.beginTime}}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        {{info.endTime}}
      </el-descriptions-item>

      <el-descriptions-item label="通话时长">
        {{callTimeFormatter(info.callTime)}}
      </el-descriptions-item>
      <el-descriptions-item label="通话单价">
        {{info.callPrice}}
      </el-descriptions-item>
      <el-descriptions-item label="通话金额">
        {{info.callAmount}}
      </el-descriptions-item>

      <el-descriptions-item label="客户对女神的评分">
        {{info.callScore}}
      </el-descriptions-item>
      <el-descriptions-item label="女神对客户的评分">
        {{info.userScore}}
      </el-descriptions-item>
      <el-descriptions-item label="链路号">
        {{info.traceId}}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
import {deleteFlagList, userCallStatusList} from '@/constant/statusMap'
import {getUserCall, getUserCallByTraceId} from "@/api/cai/userCall";

export default {
  name: "UserInfo",
  data() {
    return {
      userCallStatusList,deleteFlagList,
      systemName: process.env.VUE_APP_SYSTEM_HOME,
      CS: {
        'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      LS: {
        // 'color': '#000',
        'text-align': 'center',
        // 'font-weight': '600',
        'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      open:false,
      info:{},
    };
  },
  created() {

  },
  methods: {
    init(id){
      this.open = true;
      getUserCall(id).then(response => {
        this.info = response.data;
      });
    },
    traceIdInit(traceId){
      this.open = true;
      getUserCallByTraceId(traceId).then(response => {
        this.info = response.data;
      });
    },
    callTimeFormatter(callTime){
      if(!callTime){
        return "00:00:00"
      }
      const hour = parseInt(callTime / 3600) % 24;
      const minute = parseInt((callTime % 3600) / 60);
      const second = callTime % 60;
      return [hour, minute, second].map(function(item) {
        return item < 10 ? '0' + item : item;
      }).join(':');
    },
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: -15px;
  display: flex;
  flex-wrap: wrap
}

/* .el-card {
   min-width: 100%;
   height: 80%;  // 高度要设置百分比才可以
   margin-right: 20px;
   transition: all .5s;
 }*/
</style>
