<template>
    <div id="loan-record">
        <br>
        <div class="top">
            <el-form :inline="true" :model="queryModel" class="demo-form-inline">
                <el-form-item>
                    <el-input placeholder="请输入客户姓名" v-model="clientName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入客户身份证号" v-model="certNo"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入借款编号" v-model="loanNo"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="loanStatus" clearable placeholder="请选择借条状态">
                        <el-option v-for="item in loanStatusOpts" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="loanType" clearable placeholder="请选择借条类型">
                        <el-option v-for="item in loanTypeOpts" :key="item.value" :label="item.name" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-autocomplete style="width: 80%" v-model="handler" :fetch-suggestions="querySearchAsync" placeholder="当前处理人" @select="handleSelect"></el-autocomplete>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="beginDate" type="daterange" range-separator="至"
                                    start-placeholder="起息开始日期"
                                    end-placeholder="起息结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="repayDate" type="daterange" range-separator="至"
                                    start-placeholder="还款开始日期"
                                    end-placeholder="还款结束日期"></el-date-picker>
                </el-form-item>
                <div class="btn">
                    <el-button @click="querySearch" type="primary">查询</el-button>
                </div>
            </el-form>
        </div>

        <!--客户信息列表-->
        <div>
            <div class="system-list">
                <el-table :data="records" stripe style="width: 100%">
                    <el-table-column type="index" width="60"></el-table-column>
                    <el-table-column prop="loanNo" sortable label="借条编号"></el-table-column>
                    <el-table-column prop="clientNo" sortable label="客户编号"></el-table-column>
                    <el-table-column prop="clientBean.clientName" sortable label="客户名称"></el-table-column>
                    <el-table-column prop="clientBean.certNo" sortable label="证件号码"></el-table-column>
                    <el-table-column prop="loanType" sortable label="借条类型"
                                     :formatter="loanTypeFormat"></el-table-column>
                    <el-table-column prop="status" sortable label="借条状态"
                                     :formatter="loanStatusFormat"></el-table-column>
                    <el-table-column prop="loanAmt" sortable label="合同金额" :formatter="amtFormat"></el-table-column>
                    <el-table-column prop="startDate" sortable label="起息日" :formatter="dateFormat"></el-table-column>
                    <el-table-column prop="endDate" sortable label="还款日" :formatter="dateFormat"></el-table-column>
                    <el-table-column prop="bizGroup" sortable label="业务组"></el-table-column>
                    <el-table-column prop="backType" sortable label="结清方式"
                                     :formatter="backTypeFormat"></el-table-column>
                    <el-table-column prop="handlerBean" sortable label="当前处理人"
                                     :formatter="nullFormat"></el-table-column>
                    <el-table-column label="操作" style="">
                        <template scope="scope">
                            <el-button size="mini" type="text" @click="showDetail(scope.row)">详情</el-button>
                            <el-button size="mini" type="text" @click="getHandle(scope.row)">领用</el-button>
                            <el-button size="mini" type="text" @click="addContact(scope.row)">小计</el-button>
                            <el-button size="mini" type="text" @click="searchLinkers(scope.row)">通讯录</el-button>
                            <el-button size="mini" type="text" @click="searchTopCells(scope.row)">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>

        </div>


        <!--窗口组件-->
        <template>


            <!--借条操作-->
            <loanInfoDisposeDialog
                    v-if="ui.loanInfoDisposeDialog.visible"
                    :dialogVisible="ui.loanInfoDisposeDialog.visible"
                    :dialogVisible.sync="ui.loanInfoDisposeDialog.visible">
            </loanInfoDisposeDialog>

            <!--还款确认-->
            <repayConfirmDialog
                    v-if="ui.repayConfirmDialog.visible"
                    :dialogVisible="ui.repayConfirmDialog.visible"
                    :dialogVisible.sync="ui.repayConfirmDialog.visible">
            </repayConfirmDialog>

            <!--添加联系小计-->
            <contactDialog
                    v-if="ui.contactDialog.visible"
                    :type="ui.contactDialog.type"
                    :loanNo="ui.contactDialog.loanNo"
                    :dialogVisible="ui.contactDialog.visible"
                    :dialogVisible.sync="ui.contactDialog.visible">
            </contactDialog>

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


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

<script>
    import * as moment from 'moment'

    import loanInfoDisposeDialog from './LoanInfoDisposeDialog'
    import repayConfirmDialog from './RepayConfirmDialog'
    import contactDialog from '../common/ContactDialog'
    import linkersDialog from '../common/LinkersDialog'

    export default {
        name: 'LoanRecordList',
        components: {
            loanInfoDisposeDialog,
            repayConfirmDialog,
            contactDialog,
            linkersDialog,
        },
        data() {
            return {
                flag: false,
                clientName:'',
                certNo:'',
                loanNo: '',
                handler: '',
                beginDate: '',
                repayDate: '',
                queryModel: {},
                search: '',
                records: [],
                page: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                ui:
                    {
                        loanInfoDisposeDialog: {
                            visible: false,
                        },
                        repayConfirmDialog: {
                            visible: false,
                        },
                        contactDialog: {
                            visible: false,
                            loanNo: '',
                            type: ''
                        },
                        linkersDialog: {
                            visible: false,
                            clientNo: '',
                            linkerType: ''
                        }
                    },
                record: '',
                options: [
                    {name: '组合查询', value: 'condition'},
                    {name: '借条状态', value: 'loanStatus'},
                    {name: '借条编号', value: 'loanNo'},
                    {name: '客户名称', value: 'clientName'},
                    {name: '客户证件', value: 'certNo'},
                    {name: '当前处理人', value: 'handler'},
                    {name: '起息日', value: 'startDate'},
                    {name: '还款日', value: 'endDate'},
                ],
                loanStatusOpts: [],
                loanStatus: '',
                loanTypeOpts: [],
                loanType: '',
            }
        },

        mounted: function () {
            this.$$get(`/enumOpt/enumList/LoanStatusEnum`)
                .then(res => {
                    if (res.data.code < 1) {
                        throw res.data.msg
                    }
                    var array = []
                    res.data.data.forEach((item, index) => {
                        array[index] = {name: item.message, value: item.code}
                    })
                    this.loanStatusOpts = array
                })
                .catch(err => this.$$msg.err(err))

            this.$$get(`/enumOpt/enumList/LoanTypeEnum`)
                .then(res => {
                    if (res.data.code < 1) {
                        throw res.data.msg
                    }
                    var array = []
                    res.data.data.forEach((item, index) => {
                        array[index] = {name: item.message, value: item.code}
                    })
                    this.loanTypeOpts = array
                })
                .catch(err => this.$$msg.err(err))

            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))

            if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
                this.flag = this.$route.query.flag;
                this.clientName = this.$route.query.clientName;
                this.certNo = this.$route.query.certNo;
                this.loanNo = this.$route.query.loanNo;
                this.beginDate = this.mergeDate(this.$route.query.beginDate1, this.$route.query.beginDate2)
                this.repayDate = this.mergeDate(this.$route.query.repayDate1, this.$route.query.repayDate2)
                this.handler = this.$route.query.handler
                this.loanStatus = this.$route.query.loanStatus
                this.loanType = this.$route.query.loanType
                this.page.current = this.$route.query.page
                this.querySearch()
            }
        },

        methods: {
            querySearch() {
                var url = `/loanRecord/search?`
                if (this.clientName !== '') {
                    url = url + `&clientName=` + this.clientName
                }
                if (this.certNo !== '') {
                    url = url + `&certNo=` + this.certNo
                }
                if (this.handler !== '') {
                    url = url + `&handler=` + this.loginName
                }
                if (this.loanNo !== '') {
                    url = url + `&loanNo=` + this.loanNo
                }
                if (this.loanStatus !== '') {
                    url = url + `&status=` + this.loanStatus
                }
                if (this.loanType !== '') {
                    url = url + `&loanType=` + this.loanType
                }
                if (this.beginDate && this.beginDate[0] !== '') {
                    var beginDate1 = moment(this.beginDate[0]).format('YYYY-MM-DD')
                    var beginDate2 = moment(this.beginDate[1]).format('YYYY-MM-DD')
                    url = url + `&startDate1=` + beginDate1 + `&startDate2=` + beginDate2
                }
                if (this.repayDate && this.repayDate[0] !== '') {
                    var repayDate1 = moment(this.repayDate[0]).format('YYYY-MM-DD')
                    var repayDate2 = moment(this.repayDate[1]).format('YYYY-MM-DD')
                    url = url + `&endDate1=` + repayDate1 + `&endDate2=` + repayDate2
                }
                url = url + `&current=` + this.page.current + `&pageSize=` + this.page.size

                this.loadSearchData(url)
            },
            /** 加载搜索数据 */
            loadSearchData(url) {
                this.$$get(url)
                    .then(res => {
                        if (res.data.code < 1) {
                            throw res.data.msg
                        }
                        this.page = this.clonePage(res.data)
                        this.records = res.data.data.data
                    })
                    .catch(err => this.$$msg.err(err))
            },
            /** 处理分页操作*/
            handleCurrentChange() {
                this.querySearch()
            },

            //处理人下拉列表
            querySearchAsync(queryString, cb) {
                var allUser = this.allUser;
                var results = queryString ? allUser.filter(this.createStateFilter(queryString)) : allUser;
                cb(results);
            },
            handleSelect(item) {
                this.loginName = item.lable;

            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().search(queryString.toLowerCase()) >= 0);
                };
            },
            getHandle(record) {
                // 领用
                this.$$get(`/loanRecord/handle/${record.loanNo}`)
                    .then(res => {
                        if (res.data.code < 1) {
                            throw res.data.msg
                        }
                    })
                    .catch(err => this.$$msg.err(err))

                this.$router.push({
                    path: 'LoanRecordDetail',
                    query: {
                        name: record.loanNo,
                        clientName:this.clientName,
                        certNo:this.certNo,
                        loanNo:this.loanNo,
                        beginDate1: this.getDate(this.beginDate, 0),
                        beginDate2: this.getDate(this.beginDate, 1),
                        repayDate1: this.getDate(this.repayDate, 0),
                        repayDate2: this.getDate(this.repayDate, 1),
                        handler: this.handler,
                        loanType: this.loanType,
                        loanStatus: this.loanStatus,
                        page: this.page.current,
                    }
                })
            },
            searchLinkers(record) {
                this.ui.linkersDialog = {
                    visible: true,
                    clientNo: record.clientNo
                }
            },
            searchTopCells(record) {
                this.ui.linkersDialog = {
                    visible: true,
                    clientNo: record.clientNo,
                    linkerType: 'TopCells'
                }
            },
            getDate(param, num) {
                if (param && param[num] !== '') {
                    return moment(param[num]).format('YYYY-MM-DD')
                }
                return ''
            },

            mergeDate(param1, param2) {
                if (param1 == '') {
                    return ''
                }
                var array = new Array()
                array[0] = new Date(param1)
                array[1] = new Date(param2)
                return array
            },

            showDetail(record) {

                this.$$get(`/loanRecord/getInfo/${record.loanNo}`)
                    .then(res => {
                        if (res.data.code < 1) {
                            throw res.data.msg
                        }
                    })
                    .catch(err => this.$$msg.err(err))
                this.$router.push({
                    path: 'LoanRecordDetail',
                    query: {
                        name: record.loanNo,
                        clientName:this.clientName,
                        certNo:this.certNo,
                        loanNo:this.loanNo,
                        beginDate1: this.getDate(this.beginDate, 0),
                        beginDate2: this.getDate(this.beginDate, 1),
                        repayDate1: this.getDate(this.repayDate, 0),
                        repayDate2: this.getDate(this.repayDate, 1),
                        handler: this.handler,
                        loanType: this.loanType,
                        loanStatus: this.loanStatus,
                        page: this.page.current,
                    }
                })

            },
            addContact(record) {
                this.ui.contactDialog = {
                    visible: true,
                    type: 'Check',
                    loanNo: record.loanNo
                }
            },
            loanDispose() {
                this.ui.loanInfoDisposeDialog = {
                    visible: true
                }
            },
            repayConfirm() {
                this.ui.repayConfirmDialog = {
                    visible: true
                }
            },

            dateFormat: function (row, column) {
                var date = row[column.property]
                if (date == undefined) {
                    return ''
                }
                return moment(date).format('YYYY-MM-DD')
            },
            amtFormat: function (row, column) {
                var loanAmt = row[column.property]
                return loanAmt + ' / ' + row.backAmt + ' / ' + row.rateAmt + ' / ' + row.serviceAmt
            },
            loanTypeFormat: function (row, column) {
                var loanType = row[column.property]
                return this.$enumUtils.toMsg('LoanTypeEnum', loanType)
            },
            loanStatusFormat: function (row, column) {
                var loanStatus = row[column.property]
                return this.$enumUtils.toMsg('LoanStatusEnum', loanStatus)
            },
            backTypeFormat: function (row, column) {
                var backType = row[column.property]
                return this.$enumUtils.toMsg('LoanBackTypeEnum', backType)
            },
            nullFormat(row, column) {
                var param = row['handlerBean']
                var param1 = param
                if (param1 == null || param1 == '') {
                    return ' ';
                }
                return param1.userName;
            },

        }
    }

</script>

