<template>
  <div>
    <br>
    <div class="top">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item>
          <el-input placeholder="坐席编号" v-model="searchInfo.extensionNumber"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-input placeholder="业务人员" v-model="searchInfo.cellName"></el-input> -->
           <el-autocomplete style="width: 80%"
                             v-model="searchInfo.cellNameStr"
                             :fetch-suggestions="querySearchAsync"
                             placeholder="请输入跟进人"
                             @select="handleSelect"
                             :clearable="true"
            ></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="主叫电话" v-model="searchInfo.caller"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="客户手机号" v-model="searchInfo.callee"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="searchInfo.date" type="daterange" range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期" :clearable="true"></el-date-picker>
        </el-form-item>
        <div class="btn">
          <el-button @click="reset" type="primary">重置</el-button>
          <el-button @click="querySearchRemind" type="primary">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="system-list">
      <el-table :data="tablePlanRemindData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}"  :highlight-current-row="true" > 
        <el-table-column prop="extensionNumber" label="坐席编号" sortable ></el-table-column>
        <el-table-column prop="cellNameStr" label="业务人员"></el-table-column>
        <el-table-column prop="caller" label="主叫电话" >
        </el-table-column>
        <el-table-column prop="startTime" label="通话时间" :formatter="dateFormat" ></el-table-column>
        <el-table-column prop="talkTime" label="通话时长" ></el-table-column>
        <el-table-column prop="callee" label="客户手机号"></el-table-column>
        <el-table-column label="操作" style="margin-right:15px">
          <template slot-scope="scope">
            <audio :src="scope.row.recordUrl"   ref="audio" 
            @pause="onPause"
            @play="onPlay" 
            controls="controls">
            </audio>
          </template>
        </el-table-column>
        <!-- 音频播放控件 -->
        <div>
          <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>
        </div>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    @size-change="handleSizeChange"
                    :page-sizes="[20, 50, 80, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
            </el-pagination>
    </div>


    <!--窗口组件-->
    <template>
      <!-- 通讯录 -->
      <byhContactDialog
        v-if="ui.byhContactDialog.visible"
        :certNo="ui.byhContactDialog.certNo"
        :clientCell="ui.byhContactDialog.clientCell"
        :clientName="ui.byhContactDialog.clientName"
        :dialogVisible.sync="ui.byhContactDialog.visible">
      </byhContactDialog>

      <!-- 通讯录 -->
      <linkersDialog
        v-if="ui.linkersDialog.visible"
        :clientNo="ui.linkersDialog.clientNo"
        :linkerType="ui.linkersDialog.linkerType"
        :dialogVisible.sync="ui.linkersDialog.visible">
      </linkersDialog>

    </template>
  </div>
</template>

<script>
  import * as moment from "moment";
  import byhContactDialog from './ByhContactDialog';
  import linkersDialog from '../common/LinkersDialog'

  export default {
    name: "ByhPlanRemindList",
    components: {
      byhContactDialog,
      linkersDialog,
    },
    data () {
      return {
        flag: false,
        audio: {
          // 该字段是音频是否处于播放状态的属性
          playing: false
        },
        ui:
          {
            byhContactDialog: {
              visible: false,
              certNo: '',
              clientName: ''
            },
            linkersDialog: {
              visible: false,
              clientNo: '',
              linkerType: ''
            }
          },
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        activeName: '',
        searchInfo: {
          date: [],
          cellName: '',
          callee: '',
          caller: '',
          cellNameStr: '',
          extensionNumber: '',
        },
        tablePlanRemindData: [],
        record: '',
      }

    },

    created () {
      
    },

    mounted: function () {
      this.tablePlanRemindData = this.remindData();
       // 搜索的用户列表
      this.$$get(`/user/select`)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          var array = []
          res.data.data.forEach((item, index) => {
            array[index] = {value: item.userName, lable: item.loginName,}
          })
          this.allUser = array;
        })
        .catch(err => this.$$msg.err(err))
    },
     filters: {
      // 使用组件过滤器来动态改变按钮的显示
      transPlayPause(value) {
        return value ? '暂停' : '播放'
      }
    },

    methods: {

      // 搜索用户名接口
      querySearchAsync(queryString, cb) {
        var allUser = this.allUser;
        var results = queryString ? allUser.filter(this.createStateFilter(queryString)) : allUser;
        cb(results);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().search(queryString.toLowerCase()) >= 0);
        };
      },
      handleSelect(item) {
        console.log(item);
        this.searchInfo.cellName = item.lable;
        this.searchInfo.cellNameStr = item.value;
      },
      formatter (row, column) {
        return row.address;
      },
      selected: function(gameName) {
        this.activeName = gameName
      },
      /** 加载数据 */
      remindData (params) {
        var listsData = [];
        this.$$post('/call/getCallPageList', this.buildParam()).then(res => {
          if (res.data.code != 1) {
            this.$message.error(res.data.msg);
            return
          }
          listsData = res.data.data.records;
          this.tablePlanRemindData = listsData;
          this.page.total = res.data.data.total;
        }).catch(error => {
          this.$Message.error(error || '系统异常');
        });
      },

      //搜索查询
      querySearchRemind () {
        this.remindData();
      },
      // 分页数据加载
      handleSizeChange(row){
        this.page.size=row
        this.page.current=1;
        this.remindData();
      },
      //参数
      buildParam () {
        var return_hash = {
          size: this.page.size,
          current: this.page.current,
        };
        if (this.searchInfo.extensionNumber != '') {
          return_hash['extensionNumber'] = this.searchInfo.extensionNumber
        }
        if (this.searchInfo.cellName != '' && this.searchInfo.cellNameStr !='') {
          return_hash['cellName'] = this.searchInfo.cellName
        }
        // 修改手机号查询为客户编号查询
        if (this.searchInfo.caller != '') {
          return_hash['caller'] = this.searchInfo.caller
        }
        if (this.searchInfo.callee != '') {
          return_hash['callee'] = this.searchInfo.callee
        }
        if (!this.$permissionUtils.btnPermission('updateUser')) {
          return_hash['handler'] = localStorage.getItem("loginName")
        }
        if (this.searchInfo.date != null) {
          return_hash['recordStartTime'] = this.searchInfo.date[0];
          return_hash['recordEndTime'] = this.searchInfo.date[1]
        } 

        return return_hash;
      },

      //显示日期
      dateFormat: function (row, column) {

        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },

      //重置
      reset () {
        this.searchInfo.date = '';
        this.searchInfo.extensionNumber = '';
        this.searchInfo.cellName = '';
        this.searchInfo.cellNameStr = '';
        this.searchInfo.caller = '';
        this.searchInfo.callee = '';
      },

      /** 处理分页操作*/
      handleCurrentChange () {
        this.tablePlanRemindData = this.remindData();
      },

      mergeDate (param1, param2) {
        if (param1 == "") {
          return ""
        }
        var array = new Array();
        array[0] = new Date(param1)
        array[1] = new Date(param2)
        return array;
      },
      getDate (param, num) {
        if (param && param[num] !== '') {
          return moment(param[num]).format("YYYY-MM-DD")
        }
        return ""
      },

       // 控制音频的播放与暂停
      startPlayOrPause () {
        return this.audio.playing ? this.pause() : this.play()
      },
      // 播放音频
      play () {
        this.$refs.audio.play()
      },
      // 暂停音频
      pause () {
        this.$refs.audio.pause()
      },
      // 当音频播放
      onPlay () {
        this.audio.playing = true
      },
      // 当音频暂停
      onPause () {
        this.audio.playing = false
      }

    }

  }
</script>

<style scoped>
</style>
