<style>
    .myClue {
        height: 100%;
    }

    .myClue .title {
        padding: 10px 20px;
        font-size: 14px;
        color: #333;
    }

    .title .iconfont {
        display: inline-block;
        font-size: 12px;
        padding: 6px;
        color: #fff;
        margin-right: 10px;
    }

    .myClue .query-box {
        padding: 15px 20px;
    }

    .myClue .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="myClue">
        <div class="title">
            <i class="iconfont iconxiansuo" style="background-color: rgb(112, 74, 253)"></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-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" @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" width="40"></el-table-column>
                <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="CustomerName" label="线索来源" show-overflow-tooltip>
                </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-column prop="NextContantTime" label="下次联系时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Remark" label="备注" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="CreateTimestr" label="创建时间" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="PersonChargeStr" label="创建人" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                msg: {
                    ToDayContactType: 1,
                    pageIndex: 1,
                    pageSize: 15
                },
                dataList: [],
                loading: false,
                selectID: []
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            openDetails(scope) {
                this.MsgBus.$emit('openClueWin', scope.row)
            },
            handleSelectionChange(val) {
                this.selectID = val.map(x =>
                    x.ID
                )
            },
            getList() {
                this.loading = true
                this.apipost('/api/CustomerAgency/GetFollowUpCluePageList', this.msg, res => {
                    if (res.data.resultCode == 1) {
                        this.loading = false
                        this.dataList = res.data.data.pageData
                    } else {
                        this.loading = false
                    }
                })
            }
        }
    }
</script>