<template>
    <div>
        <br>
        <div class="top">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
               
                <el-form-item label="姓名：">
                    <el-input placeholder="请输入姓名" v-model="searchInfo.clientName"></el-input>
                </el-form-item>

                <el-form-item label="手机号：">
                    <el-input placeholder="请输入手机号" v-model="searchInfo.clientCell"></el-input>
                </el-form-item>

                <el-form-item label="客户批次：">
                    <el-input placeholder="请输入批次号" v-model="searchInfo.batchNo"></el-input>
                </el-form-item>

                <el-form-item label="跟进人：" v-show="this.$permissionUtils.btnPermission('updateUser')">
                     <div class="block">
                        <el-cascader
                            v-model="searchInfo.followUser"
                            :options="operatFollow"
                            :props="{ expandTrigger: 'hover' }"
                        ></el-cascader>
                    </div>
                                        
                </el-form-item >
               
                <el-form-item label="客户意愿：">
                    <el-select v-model="searchInfo.marketersId" placeholder="请选择">
                        <el-option
                        v-for="item in operat"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                                        
                </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'}">
                <el-table-column prop="batchNo" label="客户批次" sortable ></el-table-column>
                <el-table-column prop="clientName" label="姓名" ></el-table-column>
                <el-table-column prop="clientCell" label="手机号" >
                    <template slot-scope="scope">
                        {{ scope.row.clientCell }}
                        <span><el-button size="medium" round  type="primary" @click="callPhone(scope.row)">拨号</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column prop="creditDate" label="授信日期"  sortable ></el-table-column>
                <el-table-column prop="creditTime" label="授信时间"  sortable ></el-table-column>
                <el-table-column prop="creditMoney" label="授信额度" ></el-table-column>
                <el-table-column prop="descireName" label="客户意愿" ></el-table-column>
                <el-table-column prop="contant" label="联系内容" ></el-table-column>
                 <el-table-column prop="handlerName" label="跟进人" ></el-table-column>
                <el-table-column prop="momo" label="备注"></el-table-column>
                <el-table-column label="小计详情">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="assignCustomerDetail(scope.row)">小计详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="assignAddCUstomer(scope.row)">小计</el-button>
                        <el-button size="mini" type="text" @click="checkDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </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>
            <!-- 小计详情弹窗 -->
            <assignCustomerDetail
                    v-if="ui.assignCustomerDetail.visible"
                    :clientCell="ui.assignCustomerDetail.clientCell"
                    :clientName="ui.assignCustomerDetail.clientName"
                    :dialogVisible.sync="ui.assignCustomerDetail.visible">
            </assignCustomerDetail>

            <!-- 添加小计 -->
            <assignAddCUstomer
                    v-if="ui.assignAddCUstomer.visible"
                    :batchNo="ui.assignAddCUstomer.batchNo"
                    :id="ui.assignAddCUstomer.id"
                    :clientCell="ui.assignAddCUstomer.clientCell"
                    :clientName="ui.assignAddCUstomer.clientName"
                    :handlerName="ui.assignAddCUstomer.handlerName"
                    :dialogVisible.sync="ui.assignAddCUstomer.visible"  @my-event="getMyMarket" >
            </assignAddCUstomer>

             <!-- 导入弹窗 -->
            <byhImportMarketPhone
                    v-if="ui.byhImportMarketPhone.visible"
                    :batchNo="ui.byhImportMarketPhone.batchNo"
                    :clientCell="ui.byhImportMarketPhone.clientCell"
                    :clientName="ui.byhImportMarketPhone.clientName"
                    :dialogVisible.sync="ui.byhImportMarketPhone.visible">
            </byhImportMarketPhone>

              <!-- 导出弹窗 -->
            <byhExportMarket
                    v-if="ui.byhExportMarket.visible"
                    :batchNo="ui.byhExportMarket.batchNo"
                    :clientCell="ui.byhExportMarket.clientCell"
                    :clientName="ui.byhExportMarket.clientName"
                    :dialogVisible.sync="ui.byhExportMarket.visible">
            </byhExportMarket>


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

<script>
    import * as moment from "moment";
    import assignCustomerDetail from './assignCustomerDetail';
    import assignAddCUstomer from './assignAddCUstomer';
    import byhImportMarketPhone from './byhImportMarketPhone';
    import byhExportMarket from './byhExportMarket';

    export default {
        name: "ByhPlanRemindList",
        components: {
            assignCustomerDetail,
            assignAddCUstomer,
            byhImportMarketPhone,
            byhExportMarket
        },
        data() {
            return {
                flag: false,
                ui:
                    {
                        assignCustomerDetail: {
                            visible: false,
                            certNo: '',
                            clientName: ''
                        },
                        assignAddCUstomer: {
                            visible: false,
                            clientNo: '',
                            clientName: '',
                            handlerName:'',
                            id:'',
                        },
                        byhImportMarketPhone:{
                            visible: false,
                            clientNo: '',
                            clientName: ''
                        },
                        byhExportMarket:{
                            visible: false,
                            clientNo: '',
                            clientName: ''
                        }
                    },
                page: {
                    current: 1,
                    size: 20,
                    total: 0
                },
                userInfo:{
                    phone:''
                },
                searchInfo: {
                    date: [new Date(),new Date()],
                    clientName: '',
                    clientCell: '',
                    batchNo:'',
                    marketersId:'',
                    followUser:'',
                },
                tablePlanRemindData: [],
                record: '',
                operat: [],
                operatFollow:[],
               
            }

        },

        created() {
            if (this.$route != null && this.$route.query != null && this.$route.query.flag) {
                this.flag = this.$route.query.flag;
                this.searchInfo.idCard = this.$route.query.idcard;
                this.searchInfo.name = this.$route.query.name;
                this.searchInfo.phoneNo = this.$route.query.phoneNo;
                this.searchInfo.status = this.$route.query.status;
                this.page.current = parseInt(this.$route.query.current);
                this.searchInfo.date = this.mergeDate(this.$route.query.planDateStart, this.$route.query.planDateEnd);
            }
        },

        mounted: function () {
            this.tablePlanRemindData = this.remindData();
            this.loadOperate();
            this.loadFollowUser();
        },
        methods: {

            callPhone (params) {
                const {clientCell} = params;
                if (window.CallServer !== null) {
                    window.CallServer.MakeCall(clientCell)
                    this.dialogState = true;
                    } else {
                    this.$message.error("请先签入话机");
                }
                console.log(params, '参数内容');
            },

            formatter(row, column) {
                return row.address;
            },
             // 分配后不刷新页面加载数据
            getMyMarket(msg){
                if(msg){
                    this.tablePlanRemindData = this.remindData();
                }
            },

            /** 加载数据 */
            remindData(params) {
                var listsData = [];

                this.$$post('/market/selectMarketers', 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();
            },

            /*提醒期数*/
            planIndexFormat: function (row, column) {
                var planIndex = row[column.property]
                if (planIndex == undefined) {
                    return ''
                }
                return planIndex + '/3'
            },

            //查看详情
            checkDetails(record) {
                let routeData = this.$router.resolve({ path: 'SaleCustomerDetail', query: {  phone: record.clientCell } });
                window.open(routeData.href, '_blank');
            },

            assignCustomerDetail(record) {
                this.ui.assignCustomerDetail = {
                    visible: true,
                    clientCell: record.clientCell,
                    clientName: record.clientName,
                }
            },
            assignAddCUstomer(record){
                this.ui.assignAddCUstomer = {
                    visible: true,
                    id: record.id,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName,
                    handlerName: record.handlerName,
                }
            },
            importMarketPhone(record){
                this.ui.byhImportMarketPhone = {
                    visible: true,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName
                }
            },
            exportMarket(record){
                this.ui.byhExportMarket = {
                    visible: true,
                    batchNo: record.batchNo,
                    clientCell: record.clientCell,
                    clientName: record.clientName
                }
            },

             loadOperate() {
                this.$$post('/market/getDesire', {
                    batchNo : this.searchInfo.batchNo,
                })
                    .then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }

                    var arr_data = res.data.data;
                    var arr = new Array()
                    arr_data.forEach(e=>{
                        if(e.parentId==0){
                        var a = new Object();
                        a.value = e.desireNo;
                        a.label = e.name;
                        var arr2 = new Array();
                        arr_data.forEach(item=>{
                            if (item.parentId==e.id) {
                            var b = new Object;
                            b.value = item.desireNo;
                            b.label = item.name;
                            arr2.push(b);
                            }
                        });
                        a.children = arr2;
                        arr.push(a)
                        }
                    })
                    this.operat  = arr;
                    })
                    .catch(err => {
                    alert("error!")
                    })
            },

            // 跟进人

             loadFollowUser() {
                this.$$get('/group/selectAll/')
                    .then(res => {
                    if (res.data.code < 1) {
                        this.$message.error(res.data.msg);
                        return
                    }


                    var arr_data = res.data.data;
                    var arr = new Array()
                    arr_data.forEach(e=>{
                        if(e.parentId==0){
                        var a = new Object();
                        a.value = e.value;
                        a.label = e.name;
                        var arr2 = new Array();
                        arr_data.forEach(item=>{
                            if (item.parentId==e.id) {
                            var b = new Object;
                            b.value = item.value;
                            b.label = item.name;
                            arr2.push(b);
                            }
                        });
                        a.children = arr2;
                        arr.push(a)
                        }
                    })
                    this.operatFollow  = arr;
                    })
                    .catch(err => {
                    alert("error!")
                    })
            },

            /* 通讯录*/
            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'
                }
            },

             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.clientName != '') {
                    return_hash['clientName'] = this.searchInfo.clientName
                }
                if (this.searchInfo.clientCell != '') {
                    return_hash['clientCell'] = this.searchInfo.clientCell
                }
                if (this.searchInfo.batchNo != '') {
                    return_hash['batchNo'] = this.searchInfo.batchNo
                }
                if (this.searchInfo.marketersId != '') {
                    return_hash['desireNo'] = this.searchInfo.marketersId
                }

                if (this.$permissionUtils.btnPermission('updateUser') && this.searchInfo.followUser != '') {
                    return_hash['handler'] = this.searchInfo.followUser[1];
                }
                if (!this.$permissionUtils.btnPermission('updateUser')) {
                    return_hash['handler'] = localStorage.getItem("loginName")
                }
               

                return return_hash;
            },

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

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

            //重置
            reset() {
                this.searchInfo.clientName = '';
                this.searchInfo.clientCell = '';
                this.searchInfo.batchNo = '';
                this.searchInfo.marketersId = '';
                this.searchInfo.followUser = '';
            },

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

            getStatus(row) {
                let value = row.status;
                if (value === 'BACKING') {
                    return '回款中';
                } else if (value === 'SETTLED') {
                    return '已结清';
                } else if (value === 'OVERDUED') {
                    return '已逾期';
                }
            },

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

        }

    }
</script>

<style scoped>

</style>