<template>
    <el-dialog custom-class="total-click-dialog"
        :title="`${customData.CompanyName}-点击量详情`"
        :visible.sync="isTotalClickShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="$emit('close')"
        width="842px"
        v-dialogDrag
        center
    >
        <div class="table-wrap" v-loading="tableLoading">
            <el-table :data="dataList" border @sort-change="clickNumSortChange" v-loading="showLoading" element-loading-text="加载中">
                <el-table-column  v-for="column in columns" :key="column.key" 
                    :label="column.label" align="center" :prop="column.key"
                    :sortable="column.sortable?'custom':false">
                    <template slot-scope="{row}">
                    {{row[column.key]}}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination 
                layout="total,prev,pager,next,jumper" 
                background 
                :current-page="tableParams.CurrentIndex"
                @current-change="handlePageChange"
                :page-size="tableParams.PageSize"
                :total="total"
                style="text-align: right;margin-top:20px;margin-bottom:20px;"/>
        </div>
    </el-dialog>
</template>

<script>
import { customInterence } from '@/api/api.js'
export default {
    props:{
        customData:{
            type:Object,
            default:{}
        },
        isTotalClickShow:{
            type:Boolean,
            default:false
        }
    },
    watch:{
        isTotalClickShow(newVal){
            if(newVal){
                this.tableParams = {
                    CurrentIndex:1,
                    PageSize:5,
                    SortParam:'',
                    SortType:'',
                }
                this.getTableData()
            }else{
                this.dataList = []
            }
        }
    },
    data() {
        return {
            dataList:[],
            columns:[{
                label:"联系人姓名",
                key:"UserName"
            },{
                label:"手机号/邮箱",
                key:"Email"
            },{
                label:"点击次数",
                key:"ViewTotal",
                sortable:true
            },{
                label:"最近点击时间",
                key:"LastViewTime",
                sortable:true
            }],
            tableParams:{
                CurrentIndex:1,
                PageSize:5,
                SortParam:'',
                SortType:'',
            },
            total:0,
            tableLoading:false,
        };
    },
    methods: {
        getTableData(){
            this.tableLoading = true
            if(this.customData.Source===1){
                customInterence.customEnHitNumber({
                    ...this.tableParams,
                    CompanyId:this.customData.CompanyId - 10000000,
                    EmailId:this.customData.CompanyId - 10000000,
                }).then(res=>{
                    this.tableLoading = false
                    if(res.Ret!==200) return 
                    this.dataList = res.Data.List || []
                    this.total = res.Data.Paging.Totals
                    this.dataList = this.dataList.map(i=>{
                        return {
                            ...i,
                            Email:(i.Mobile?i.Mobile:i.Email)||''
                        }
                    })
                })
            }else{
                customInterence.getZNCustomClickList({
                    ...this.tableParams,
                    CompanyId:this.customData.CompanyId
                }).then(res=>{
                    this.tableLoading = false
                    if(res.Ret!==200) return 
                    this.dataList = res.Data.List||[]
                    this.total = res.Data.Paging.Totals
                    this.dataList = this.dataList.map(i=>{
                        return {
                            ...i,
                            Email:(i.Mobile?i.Mobile:i.Email)||''
                        }
                    })
                })
            }
        },
        handlePageChange(page){
            this.tableParams.CurrentIndex = page
            this.getTableData()
        },
        clickNumSortChange({prop,order}){
            const map = {
                'ViewTotal':1,
                'LastViewTime':2
            }
            this.tableParams.SortParam = order?map[prop]:''
            this.tableParams.SortType = order=="ascending"?2:1
            this.handlePageChange(1)
        }
    },
};
</script>

<style scoped lang="scss">

</style>
