<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
        <el-form-item label="受话坐席">
          <el-input v-model="ruleForm.agent" placeholder="请输入坐席工号" class="filter-item" size="medium" clearable/>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="ruleForm.phone" placeholder="请输入电话号码" class="filter-item" size="medium" clearable/>
        </el-form-item>
        <el-form-item label="通话时间">
          <el-date-picker
            style="width: 240px"
            v-model="ruleForm.searchDate"
            class="filter-item"
            type="daterange"
            range-separator="至" 
            start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item label="呼叫方向">
          <el-select
            style="width: 240px"
            v-model="ruleForm.callType"
            clearable
            class="filter-item"
            filterable
            placeholder="请选择呼叫方向"
            size="medium">
            <el-option :value="1" label="呼入" />
            <el-option :value="2" label="呼出" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="filter-item" @click="btn_search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="noqclistData" border stripe>
      <el-table-column type="index" width="80" label="编号" align="center" min-width/>
      <el-table-column prop="phone" label="电话号码" align="center" min-width>
        <template #default="scope">
          <span>{{scope.row.phone}}</span>
          <!-- <el-icon style="vertical-align: middle" color="#409efc" @click="clickEye()"><View /></el-icon> -->
          <!-- v-show="scope.row.CallNumber.toString().indexOf('*')>=0" -->
        </template>
      </el-table-column>
      <el-table-column label="录音质检" align="center" min-width>
        <template #default="scope">
          <el-icon style="vertical-align: middle" color="#409efc" @click="playSound(scope.row)"><VideoPlay /></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="呼叫方向" align="center" min-width>
        <template #default="scope">
          <span v-if="scope.row.callType==1">呼入</span>
          <span v-if="scope.row.callType==2">呼出</span>
        </template>
      </el-table-column>
      <el-table-column prop="UserCode" label="坐席工号" align="center" min-width />
      <el-table-column :formatter="formtName" prop="agent" label="坐席姓名" align="center" min-width />
      <el-table-column prop="createTime" label="通话开始时间" align="center" min-width />
      <el-table-column prop="hangupTime" label="通话结束时间" align="center" min-width />
      <el-table-column label="通话时长" align="center" min-width >
        <template #default="scope">
          <span>{{ getTimeLimit(scope.row.answerTime, scope.row.hangupTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="振铃时长" align="center" min-width >
        <template #default="scope">
          <span>{{ getTimeLimit(scope.row.createTime, scope.row.answerTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style=" margin-top: 15px;"
        v-show="pageParams.total > 0"
        :total="pageParams.total"
        v-model:page="pageParams.pageindex"
        v-model:limit="pageParams.pageSize"
        @change="changePageHandle"
      />
  </div>
  <el-dialog
      v-model="audioplaylist"
      :title="audioplayTitle"
      center
      width="70%"
      :modal="true"
      :show-close="true"
    >
      <audioplay :isScore="isScore" :getListInfo="postListInfo" @refreshOrder="submitAudioplayRefresh()"/>
    </el-dialog>
</template>

<script setup>
  import { ref } from 'vue'
  import moment from 'moment';
  import audioplay from '../components/audioplay';
  import { getPageListData } from '@/api/main/system/system';
  const { proxy } = getCurrentInstance();
  const audioplayId = ref('')
  const audioplaylist = ref(false)
  const audioplayTitle = ref('添加质检')
  const postListInfo = ref({})
  const isScore = ref(1)
  const noqclistData = ref([])
  const pageParams = ref({
      pageindex: 1, // 当前第几页
      pagesize: 10, // 每页几条数据
      total: 0 // 总共多少数据
  })
  const ruleForm = ref({
    agent:'',
    phone:'',
    searchDate:'',
    callType:''
  })
  onMounted(() => {
    getnoqc()
  });
  function getTimeLimit(startTime, endTime) {
    return proxy.getTimeDifference(startTime, endTime);
  }
  function btn_search() {
    console.log('搜索')
    getnoqc()
  }
  function clickEye(data) {
    console.log('小眼睛');
  }
  function playSound(item) {
    console.log('质检');
    postListInfo.value = item
    audioplaylist.value = true
  }
  
  function changePageHandle(data) {
    pageParams.value.pageindex = data
    getnoqc()
  }
  // 列表数据
  function getnoqc() {
    const params = {
      phone:ruleForm.value.phone,
      agent:ruleForm.value.agent,
      createTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[0]).format('YYYY-MM-DD HH:mm:ss'):'' ,
      endTime:ruleForm.value.searchDate.length ? moment(ruleForm.value.searchDate[1]).format('YYYY-MM-DD HH:mm:ss'):'',
      callType:ruleForm.value.callType,
      pageNum: pageParams.value.pageindex,
      pageSize: pageParams.value.pagesize,

    } 
    getPageListData("/quality/indexresult/getqclist", params).then((res) => {
      if (res.data.length>0) {
        noqclistData.value = res.data
        pageParams.value.total = res.total
      }else{
        noqclistData.value = []
      }
      
    })
  }
  function submitAudioplayRefresh(params) {
    console.log('提交评分');
    audioplaylist.value = false
    getnoqc()
  }
</script>
<style scoped lang="scss">
   .app-container {
    padding: 10px;
  }

  .phoneIcon {
    cursor: pointer;
  }

  .filter-container {
    .el-select {
      margin-right: 10px;
    }

    .el-date-editor {
      margin-right: 10px;
    }

    .el-cascader {
      margin-right: 10px;
    }

    .filter-item {
      vertical-align: bottom;
    }
  }
</style>