<!--录音详情-->
<template>
  <div class="app-container">
    <!-- 基础信息表单 -->
    <div>
      <el-row class="table-title">
        <el-col :span="6"></el-col>
        <div class="title-header">
          <i class="el-icon-tickets" />录音基础信息
        </div>
      </el-row>
      <el-form ref="form" :model="form" label-width="110px" style="margin-top: 20px;">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="录音编号">
              <el-input v-model="form.callid" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="主叫号码">
              <el-input v-model="form.callerNumber" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="被叫号码">
              <el-input v-model="form.calleeNumber" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="呼叫方向">
              <el-input v-model="form.callWayName" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="挂机方向">
              <el-input v-model="form.hangupCause" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坐席工号">
              <el-input v-model="form.agentName" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="坐席姓名">
              <el-input v-model="form.agentUserName" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="归属地">
              <el-input v-model="form.isp" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通话开始时间">
              <el-input v-model="form.dialStartStamp" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="通话结束时间">
              <el-input v-model="form.dialEndStamp" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="通话时长(分:秒)">
              <el-input v-model="form.bridgeStamp" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="受理人姓名">
              <el-input v-model="form.quickUserName" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="受理时间">
              <el-input v-model="form.processTime" readonly size="small" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="备注" prop="notes">
            <el-input v-model="form.quickRemarks" :rows="3" readonly size="small" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <div class="footer">
      <el-button type="primary" size="small" @click="confirm">确认</el-button>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SoundDetail",
  data() {
    return {
      form: {
        callid: '',
        callerNumber: '', // 主叫号码
        agentUserName: '', // 坐席姓名
        agentName: '', // 坐席工号
        dialStartStamp: '', // 来电开始时间
        dialEndStamp: '', // 来电结束时间
        callWayName: '', // 呼叫方向
        hangupCause: '', // 挂机方向
        isp: '', // 归属地
        bridgeStamp: '', // 通话时长
        calleeNumber: '', // 被叫号码
        quickUserName: '', // 受理人姓名
        processTime: '', // 受理时间
        quickRemarks: '' // 备注
      }
    }
  },
  created() {
    const info = this.$route.params.info
    if (info) {
      this.form = JSON.parse(info)
      this.form.bridgeStamp = this.timeFilter(this.form.bridgeStamp)
    }
  },
  methods: {
    timeFilter(val) {
      if (!val) {
        return '00:00'
      }
      const m = Math.floor(val / 60)
      const s = val - m * 60
      const str = ('0' + m).slice(-2) + ':' + ('0' + s).slice(-2)
      return str
    },
    confirm() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-title {
  background-color: rgba(243, 243, 243, 1);
  height: 46px;

  .title-header {
    line-height: 46px;
    color: #606266;
    font-size: 15px;

    i {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
.footer{
  display: flex;
  justify-content: flex-end;
}
</style>