<style>
.todayCustomer{
    height: 100%;
}
.todayCustomer .title{
    padding: 10px 20px;
    font-size: 14px;
    color: #333;
}
.title .iconfont{
    display: inline-block;
    font-size: 12px;
    padding: 6px;
    color: #fff;
    margin-right: 10px;
}
.todayCustomer .query-box{
    padding: 15px 20px;
}
.todayCustomer .title .tips{
    cursor: pointer;
    font-size: 12px;
    color: white;
    background-color: #cbcbcb;
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    text-align: center;
    line-height: 13px;
    margin-left: 5px;
}
</style>
<template>
    <div class="todayCustomer">
        <div class="title">
            <i class="iconfont iconcompany" style="background-color: rgb(35, 98, 251)"></i>
            <span>今日需联系客户</span>
            <el-tooltip class="item" effect="dark" content="下次跟进时间为今日的客户" placement="top">
                <span  class="tips">?</span>
            </el-tooltip>
        </div>
        <div class="query-box">
            <el-select size="mini" v-model="msg.ToDayContactType" @change="getList">
                <el-option :key="1" label="今日需联系的" :value="1"> </el-option>
                <el-option :key="2" label="已逾期" :value="2"> </el-option>
                <el-option :key="3" label="已联系" :value="3"> </el-option>
            </el-select>
            <el-select size="mini" v-model="msg.WhereType" style="width: 120px;margin-left: 10px;" @change="getList">
                <el-option :key="1" label="我的" :value="1"> </el-option>
                <el-option :key="2" label="下属的" :value="2"> </el-option>
            </el-select>
        </div>
        <div>
            <el-table
                v-loading="loading"
                stripe
                ref="multipleTable"
                :data="dataList"
                tooltip-effect="dark"
                style="width: 100%"
                row-class-name="font-size-12">
                <el-table-column 
                    prop="CustomerName"
                    label="客户名称"
                    show-overflow-tooltip>
                    <template slot-scope="scope">
                        <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.CustomerName}}</p>
                    </template>
                </el-table-column>
                <el-table-column 
                    prop="CustomerLevelStr"
                    label="客户级别"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="CustomerSourceTypeStr"
                    label="客户来源"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="Contact"
                    label="联系人"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    prop="ContactNumber"
                    label="联系电话"
                    show-overflow-tooltip>
                </el-table-column>
                
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg: {
                ToDayContactType: 1,
                WhereType: 1,
                pageIndex: 1,
                pageSize: 15
            },
            dataList: [],
            loading: false
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        openDetails(scope){
            this.MsgBus.$emit('openCustomerWin', scope.row)
        },
        getList(){
            this.loading = true
            this.apipost('/api/CustomerAgency/GetToDayContactPageList', this.msg, res=>{
                if (res.data.resultCode == 1) {
                    this.loading = false
                    this.dataList = res.data.data.pageData
                } else {
                    this.loading = false
                }
            })
        }
    }
}
</script>