<template>
  <div>
    <div class="page-search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.collNo" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                    placeholder="请输入案件编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.name" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                    placeholder="请输入客户姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.clientCell" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                    placeholder="请输入客户编号"></el-input>
        </el-form-item>
        <el-form-item>
            <!-- <el-input v-model="formInline.collUser" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入跟进人"></el-input> -->
             <el-autocomplete style="width: 80%"
                             v-model="formInline.collUserZh"
                             :fetch-suggestions="querySearchAsync"
                             placeholder="请输入跟进人"
                             @select="handleSelect"
            ></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.status" placeholder="案件状态">
            <el-option v-for="item in this.$enumUtils.toValue('LoanCollectStatusEnum')" :key="item.value"
                       :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="formInline.date" type="daterange" range-separator="至"
                          start-placeholder="入催开始日期" end-placeholder="入催结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset" type="primary">重置</el-button>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="system-list">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="collNo" label="案件编号" width="160"></el-table-column>
        <el-table-column prop="planNo" label="计划还款编号" width="160"></el-table-column>
        <el-table-column prop="clientByhModel.clientName" label="客户姓名"></el-table-column>
        <el-table-column prop="clientByhModel.certNo" label="证件号码" width="170"></el-table-column>
        <el-table-column prop="clientByhModel.clientCell" label="手机号码" width="120">
         <template slot-scope="scope">
            {{ scope.row.clientByhModel.clientCell }}
            <span><el-button size="medium" round  type="primary" @click="callPhone(scope.row)">拨号</el-button></span>
          </template>
        </el-table-column>
        <el-table-column prop="clientNo" label="客户编号" width="135"></el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数"></el-table-column>
        <el-table-column prop="planIndex" label="期数" :formatter="planIndexFormat"></el-table-column>
        <el-table-column prop="collUserBean.userName" label="催收人员" width="160"></el-table-column>
        <el-table-column prop="remainBen" label="剩余本金"></el-table-column>
        <el-table-column prop="remainXi" label="剩余利息"></el-table-column>
        <el-table-column prop="overdueXi" label="剩余罚息"></el-table-column>
        <el-table-column prop="channelSign" label="借款渠道"  :formatter="loanChannelStatus"></el-table-column>
        <el-table-column prop="status" label="逾期状态" :formatter="statusFormat"></el-table-column>
        <el-table-column prop="collDate" label="逾期时间" :formatter="dateFormat" sortable
                         width="120"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button type="text" size="mini" @click="getCollectDetails(scope.row)">详情</el-button>
            <el-button type="text" size="mini" @click="addCollectLog(scope.row)">跟踪小计</el-button>
            <el-button type="text" size="mini" @click="transferCollect(scope.row)">案件交接</el-button>
            <el-button size="mini" type="text" @click="jumpLinkerList(scope.row,'XmLinkerList')">通讯录</el-button>
            <el-button size="mini" type="text" @click="jumpLinkerList(scope.row,'XmLinkerTopCells')">topCell</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page.current"
        :page-size="page.size"
        layout="prev, pager, next"
        :total="page.total">
      </el-pagination>
    </div>

    <!--窗口组件-->
    <template>
      <!--跟踪小计-->
      <addCollectLogDialog
        v-if="ui.addCollectLogDialog.visible"
        :dialogVisible="ui.addCollectLogDialog.visible"
        :collNo="ui.addCollectLogDialog.collNo">
      </addCollectLogDialog>

      <!--案件交接-->
      <allotCollUserDialog
        v-if="ui.allotCollUserDialog.visible"
        :dialogVisible="ui.allotCollUserDialog.visible"
        :collNo="ui.allotCollUserDialog.collNo">
      </allotCollUserDialog>

      <!-- 通讯录 -->
      <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 addCollectLogDialog from './AddCollectLogDialog'
  import allotCollUserDialog from './AllotCollUserDialog'
  import linkersDialog from '../../common/LinkersDialog'

  export default {
    name: 'ByhLoanCollectList',
    components: {
      addCollectLogDialog,
      allotCollUserDialog,
      linkersDialog
    },
    data () {
      return {
        table: {
          layout: {
            header: {
              height: '60px',
              fontSize: '14px'
            },
            row: {
              height: '60px'
            }
          }
        },
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        tableData: [],
        formInline: {
          collNo: '',
          date: null,
          status: '',
          clientCell: '',
          collUser: '',
          collUserZh:'',
          name: ''
        },
        ui: {
          addCollectLogDialog: {
            visible: false,
            loanNo: ''
          },
          allotCollUserDialog: {
            visible: false,
            collNo: ''
          },
          linkersDialog: {
            visible: false,
            clientNo: '',
            linkerType: ''
          }
        },
        allUser: [],
      }
    },

    created () {
      if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
        this.flag = this.$route.query.flag
        this.formInline.status = this.$route.query.status
        this.formInline.clientCell = this.$route.query.clientCell
        this.formInline.name = this.$route.query.name
        this.formInline.collUser = this.$route.query.collUser
        this.formInline.clientCell = this.$route.query.clientCell
        this.formInline.collNo = this.$route.query.collNo
        this.page.current = parseInt(this.$route.query.current)
        this.formInline.date = this.mergeDate(this.$route.query.startDate, this.$route.query.endDate)
      }
    },

    mounted: function () {
      // this.formInline.collUser = localStorage.getItem("userName");
      this.$nextTick(() => {
        this.loadData()
      })
      // 搜索的用户列表
      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))
    },

    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);
        console.log(678678678);
        this.formInline.collUser = item.lable;
        this.formInline.collUserZh = item.value;
      },
      /** 加载数据 */
      callPhone (params) {
        const {clientNo} = params;
        // 先拿回用户手机号 在发起打电话请求
        this.$$get('/client/getClientCell/'+clientNo)
          .then(res => {
            if (res.data.code == 1){
               if (window.CallServer !== null) {
                  window.CallServer.MakeCall(res.data.data)
                  this.dialogState = true;
                } else {
                  this.$message.error("请先签入话机");
                }
            }else{
              this.$message({message: res.data.msg, type: 'error'});
            }
          })
        .catch(err => this.$$msg.err(err))
       
        console.log(params, '参数内容');
      },
      loadData (params) {
        var listsData = []
        this.$$post('/collect/getByhCollectList', this.buildParam()).then(res => {
          if (res.data.code != 1) {
            this.$message.error(res.data.msg)
            return
          }
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total
        }).catch(error => {
          this.$Message.error(error || '系统异常')
        })
      },
      /* 查看详情 */
      getCollectDetails (record) {
        this.$$get(`/collect/getDetail/${record.collNo}`)
          .then(res => {
            if (res.data.code != 1) {
              throw res.data.msg
            }
          })
          .catch(err => this.$$msg.err(err))
        this.$router.push({
          path: 'ByhLoanCollectDetails',
          query: {
            collNo: record.collNo,
            bizNo: record.bizNo,
            clientNo: record.clientNo,
            planNo: record.planNo,
            certNo: record.clientByhModel.certNo,
            clientPhone: record.clientByhModel.clientCell,
            clientName: record.clientByhModel.clientName,
            collUser: this.formInline.collUser,
            status: this.formInline.status,
            current: this.page.current,
            clientCell: this.formInline.clientCell,
            name: this.formInline.name,
            startDate: this.getDate(this.formInline.date, 0),
            endDate: this.getDate(this.formInline.date, 1)
          }
        })
      },
      /* 添加跟踪日志 */
      addCollectLog (record) {
        this.ui.addCollectLogDialog = {
          visible: true,
          collNo: record.collNo
        }
      },

      /* 案件交接 */
      transferCollect (record) {
        this.ui.allotCollUserDialog = {
          visible: true,
          collNo: record.collNo
        }
      },
      jumpLinkerList(record,type){
        this.$router.push({
          path:'/byh/collect/ByhLoanLinkerList',
          query:{
            clientNo:record.clientNo,
            linkerType: type,
            pageType: 'yuqi',
            size: this.page.size,
            current: this.page.current,
          }
        })
      },
      /* 通讯录 */
      searchLinkers (record) {
        this.ui.linkersDialog = {
          visible: true,
          clientNo: record.clientNo,
          linkerType: 'XmLinkerList'
        }
      },
      /* topCell */
      searchTopCells (record) {
        this.ui.linkersDialog = {
          visible: true,
          clientNo: record.clientNo,
          linkerType: 'XmLinkerTopCells'
        }
      },
      /* 搜索条件 */
      onSubmit () {
        this.loadData()
      },
      /* 重置 */
      reset () {
        this.formInline.collNo = ''
        this.formInline.date = ''
        this.formInline.status = ''
        this.formInline.clientCell = ''
        this.formInline.name = ''
        this.formInline.collUser = ''
        this.formInline.collUserZh = ''
      },
      /** 处理分页操作 */
      handleCurrentChange () {
        this.tableData = this.loadData()
      },

      /* 日期 */
      dateFormat: function (row, column) {
        var date = row[column.property]
        if (date == undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD')
      },

      /* 案件状态 */
      statusFormat: function (row, column) {
        var status = row['status']
        return this.$enumUtils.toMsg('CollectStatusEnum', status)
      },
      /*  借款渠道 */
      loanChannelStatus: function (row, column) {
        var status = row['channelSign'];
        return this.$enumUtils.toMsg('loanChannel', status);
      },

      /* 案件类型 */
      typeFromat: function (row, column) {
        var status = row['bizType']
        return this.$enumUtils.toMsg('CollectBizTypeEnum', status)
      },

      /* 逾期期数 */
      planIndexFormat: function (row) {
        var planIndex = row.planIndex
        var allIndex = row.allIndex
        if (planIndex == undefined || allIndex == undefined) {
          return ''
        }
        return planIndex + '/' + allIndex
      },

      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 ''
      },

      /* 构建参数 */
      buildParam () {
        var return_hash = {
          size: this.page.size,
          current: this.page.current,
          collUser: '',
        }

        if (this.formInline.collNo != '') {
          return_hash['collNo'] = this.formInline.collNo
        }
        if (this.formInline.status != '') {
          return_hash['status'] = this.formInline.status
        }
        if (this.formInline.clientCell != '') {
          return_hash['clientNo'] = this.formInline.clientCell
        }
        if (this.formInline.name != '') {
          return_hash['clientName'] = this.formInline.name
        }
        if (this.formInline.date != null) {
          return_hash['startDate'] = this.formInline.date[0]
          return_hash['endDate'] = this.formInline.date[1]
        }
        if (this.formInline.collUser != null) {
          return_hash['collUser'] = this.formInline.collUser
        }
        if (!this.$permissionUtils.btnPermission('updateUser')) {
          return_hash['collUser'] = localStorage.getItem('loginName')
        }
        return return_hash
      }
    }
  }
</script>

<style scoped>

</style>
