<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input v-model="listQuery.mobile" clearable class="filter-item" style="width: 200px;" placeholder="请输入客户手机号码" />
      <el-select v-model="listQuery.callType" clearable style="width: 200px" class="filter-item" placeholder="请选择电访类型">
        <el-option v-for="(key, value) in typeMap" :key="key" :label="key" :value="value" />
      </el-select>
      <!-- <el-select v-model="listQuery.callResultArray" clearable multiple style="width: 300px" class="filter-item" placeholder="请选择电访结果状态">
        <el-option v-for="(key, value) in resultMap" :key="key" :label="key" :value="value" />
      </el-select> -->
      <!-- <el-button v-permission="['GET /admin/calllog/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button> -->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
    </div>

    <el-tabs v-model="listQuery.campaignId" @tab-click="handleClick">
      <el-tab-pane v-for="item in campaigns" :key="item.id" :label="item.name+'('+item.count+')'" :name="item.id" />
    </el-tabs>

    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" fit highlight-current-row>
      <el-table-column align="center" label="客户名称" prop="customer.customerName" />
      <el-table-column align="center" label="联系手机" prop="mobile" />
      <el-table-column align="center" label="呼叫类型" prop="callType">
        <template slot-scope="scope">
          <el-tag>{{ filterType(scope.row.callType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="来源" prop="callType">
        <template slot-scope="scope">
          <el-tag>{{ filterSource(scope.row.callSource) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否接通" prop="connected" >
         <template slot-scope="scope">
        <el-tag :type="scope.row.connected?'success':'warning'">{{scope.row.connected?'接通':'未接通'}}</el-tag>
         </template>
      </el-table-column> 
      <!-- <el-table-column align="center" label="话后时长" prop="acwtime" /> -->
      <el-table-column align="center" label="响铃时长" prop="ringingtime" >
           <template slot-scope="scope">
          {{ formatMinute(scope.row.ringingtime) }}   
        </template>
      </el-table-column>
         <el-table-column align="center" label="通话时长" prop="talktime" >
           <template slot-scope="scope">
          {{ formatMinute(scope.row.talktime) }}  
        </template>
         </el-table-column> 
      <!-- <el-table-column align="center" label="通话时长" prop="talktime" />
      <el-table-column align="center" label="话后时长" prop="acwtime" /> -->

      <el-table-column align="center" label="呼叫开始时间" width=180 prop="createTime" />
      <!-- <el-table-column align="center" label="处理结束时间" prop="endTime" /> -->

      <el-table-column align="center" label="操作" min-width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['POST /admin/ticket/create']"   type="info" plain size="mini" @click="handleAddTicket(scope.row)"  v-if="scope.row.connected&&scope.row.callSource!='toolbar'">
            建工单
          </el-button>
           <!-- <el-button type="info" plain size="mini" > -->
           <audio  :src="scope.row.recordUrl"  controls="controls" class="audio-wrapper"  v-if="scope.row.hasOwnProperty('recordUrl')">
              您的浏览器不支持 audio 标签。
            </audio>
          <!-- </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- 订单详情对话框 -->

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

  </div>
</template>

<script>
import { listCalllog } from '@/api/calllogRecord'
import SvgIcon from '@/components/SvgIcon'// svg组件

import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate,formatTime } from '@/utils/date'

const typeMap = {
  IB: '呼入',
  OB: '呼出'
}
const resultMap = {
  0: '未拨打',
  1: '个人回拨',
  2: '无应答',
  3: '通话中',
  4: '关机',
  5: '停机',
  6: '成功',
  7: '空号',
  8: '无法接通',
  9: '拒访'
}
export default {
  name: 'CallRecord',
  components: { BackToTop, Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      typeMap,
      campaigns: [],
      resultMap,
      listQuery: {
        page: 1,
        limit: 20,
        callType: '',
        mobile: '',
        // callResultArray: [],
        sort: 'create_time',
        order: 'desc'
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    filterResult(result) {
      return resultMap[result]
    },
    filterType(source) {
      return typeMap[source]
    },
    filterSource(source){
      if(source==null) return 'OB';
      if(source=='toolbar') return '工具栏';
      if(source=='campaign') return '电访任务';
      if(source=='ticket') return '工单';

    }, 
    formatDate(time) {
      if (time == null || time === '') {
        return ''
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatMinute(time) { 
      return formatTime(time);  
    },
    getList() {
      this.listLoading = true
      listCalllog(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      // this.$router.push({ path: '/callcenter/calllog', query: { id: Math.random() }})
      // return
      this.getList()
    },
    handleClick(e) { // tab点击
      this.listQuery.campaignId = e.name
      this.getList()
    },
    handleCall(row) {

    },
    handleAddTicket(row){
      this.$store.commit('showPanel',{customerId:row.customerId,panelType:'CallRecord',builtId:0,callId:row.callId,startTime:this.formatDate(new Date())});
      this.$store.dispatch('CUSTOMER_DETAIL',{id:row.customerId}); 
    },

  }
}
</script>

<style scoped>
.fixed-width .el-button--mini{
  width:auto;
}
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .color-danger {
    color: #F56C6C;
    font-size: 18px;
  }
  .audio-wrapper{
    margin:10px 0 0;
    display:inline-block;
    height: 30px;
  }
</style>
