<template>
  <section class="dm-wrap">
    <div class="pb22 clearfix">
      <el-date-picker  v-model="dateTime" :picker-options="pickerOptions" class="w250" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="callLogList"></el-date-picker>
      <el-select class="dm-select" clearable="" v-model="listParams.callStatus" placeholder="选择通话状态" @change="callLogList">
          <el-option v-for="(v,i) in callStatusOption" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="dm-select" clearable v-model="listParams.telTaskType" placeholder="选择类型" @change="callLogList">
          <el-option v-for="(v,i) in telTaskTypeOption" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-input v-model="listParams.phoneNumber" class="w200" placeholder="输入号码查询" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
    </div>
    <el-table tooltipEffect="light" :data="tableList" style="width:100%" v-loading="loading">
      <el-table-column align="left"  width="160"  prop="callBeginTime" label="呼叫时间" >
        <template slot-scope="scope">
          {{formateDateTimeByType(scope.row.callBeginTime,'yyyy-MM-dd-HH-mm-ss')}}
        </template>
      </el-table-column>
      <el-table-column align="left"  min-width="150"  prop="clerkName" label="主叫">
        <template slot-scope="scope">
          <img class="vertical-middle" :src="scope.row.clerkImage || defaultAvatar" width="60" height="60" alt="">
          <div class="inline-block vertical-middle">
            <p class="fz13">{{scope.row.clerkName|| '--'}}</p>
            <p class="fz12 gray">{{scope.row.storeGroupName || '--'}}</p>
          </div>
      </template>
      </el-table-column>
      <el-table-column align="left"  min-width="150"  prop="memberId" label="被叫(会员)">
        <template slot-scope="scope">
          <img class="vertical-middle" :src="scope.row.photeUrl || defaultAvatar" width="60" height="60" alt="">
          <div class="inline-block vertical-middle">
            <p class="fz13">{{scope.row.name|| '--'}}</p>
            <p class="fz12 gray">{{scope.row.phoneNumber || '--'}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left"  width="150"  prop="status" label="通话状态">
        <template slot-scope="scope">
          {{scope.row.callStatus===1?'未接通':(scope.row.callStatus===2?'接通':'成功')}}
        </template>
      </el-table-column>
      <el-table-column align="left"  width="150"  prop="status" label="类型">
        <template slot-scope="scope">
          {{scope.row.telTaskType!==1?scope.row.ecmName:'不良评价回访'}}
        </template>
      </el-table-column>
      <el-table-column align="left"  width="150"  prop="callTime" label="通话时长（秒）">
        <template slot-scope="scope">
          {{scope.row.callTime}}秒
        </template>
      </el-table-column>
      <el-table-column align="left"  width="150"  prop="callFee" label="录音">
        <template slot-scope="scope">
          <a v-if="scope.row.recordUrl && scope.row.callStatus==2" :href="scope.row.recordUrl" target="_blank" title="通话录音">通话录音</a>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
  </section>
</template>
<script>
import {callLogList} from '@/service/api/calllogApi.js';
import {formateDateTimeByType} from '@/utils/index.js';
export default {
    name: 'call-log',
    data () {
      const _vm = this;
      return {
        formateDateTimeByType,
        defaultAvatar:require('../../assets/img/head_default.jpg'),
        dateTime:[Date.now()-30*24*60*60*1000,Date.now()],
        callStatusOption:[{value:'',label:'全部'},{value:1,label:'未接通'},{value:2,label:'接通'}],
        telTaskTypeOption:[{value:'',label:'全部'},{value:1,label:'不良评价回访'},{value:2,label:'ECM话务任务'}],
        listParams:{ callStatus:-1, marketingType:'', sceneSettingId:'', phoneNumber:'', currentPage:1, pageSize:20, callStatus:'', telTaskType:'', memberId:'', storeId:'', referId:''},
        total:0,
        loading:false,
        tableList:[],
        pickerOptions:{
          onPick({ maxDate, minDate }) {
            if ((new Date(maxDate)).getTime() - (new Date(minDate)).getTime() > 90*24*60*60*1000) {
              _vm.$tips({type:'warning',message:'时间范围不能大于90天'});
              _vm.$nextTick(_ => {
                 _vm.dateTime = ['',''];
              })
            }
          },
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      }
    },
    created() {
      this.$store.commit('aside_handler',false);
      this.$store.commit('mutations_breadcrumb',[{name:'会员管理',path:''},{name:'通话记录',path:''}]);
      this.callLogList();
    },
    methods: {
      /**表格方法 */
      search() {
        this.listParams.currentPage = 1;
        this.callLogList();
      },
      handleSizeChange(val) {
        this.listParams.pageSize = val;
        this.callLogList();
      },
      handleCurrentChange(val) {
        this.listParams.currentPage = val;
        this.callLogList();
      },
      //列表请求
      async callLogList() {
        if (this.dateTime) {
          this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
          this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
        } else {
          this.listParams.beginTime = '';
          this.listParams.endTime = '';
        }
        this.loading = true;
        try{
          let res = await callLogList(this.listParams);
          if (res.errorCode === 0) {
            this.tableList = res.result.result || [];
            this.total = res.result.totalCount;
          }
        } catch (err) {
			    this.$tips({type:'error',message:'请求列表出错'});
        }
        this.loading = false;
      }
    }
}
</script>

