<script setup>
import { reactive, ref,watch } from 'vue';
import { customInterence } from '@/api/api.js'

const props = defineProps({
    customData:{
        type:Object,
        default:{}
    },
    isTotalClickShow:{
        type:Boolean,
        default:false
    }
})
const emit = defineEmits(['close'])

const columns = [{
		label:"联系人姓名",
		key:"UserName"
	},{
			label:"手机号/邮箱",
			key:"Email"
	},{
			label:"点击次数",
			key:"ViewTotal",
			sortable:true
	},{
			label:"最近点击时间",
			key:"LastViewTime",
			sortable:true
	}
]

const tableParams = reactive({
		CurrentIndex:1,
		PageSize:5,
		SortParam:'',
		SortType:'',
})
const total = ref(0)
const dataList = ref([])
const tableLoading = ref(false)
function getTableData(){
	tableLoading.value = true
	if(props.customData.Source===1){
			customInterence.customEnHitNumber({
					...tableParams,
					CompanyId:props.customData.CompanyId - 10000000,
					EmailId:props.customData.CompanyId - 10000000,
			}).then(res=>{
					tableLoading.value = false
					if(res.Ret!==200) return 
					dataList.value = res.Data.List || []
					total.value = res.Data.Paging.Totals
					dataList.value = dataList.value.map(i=>{
							return {
									...i,
									Email:(i.Mobile?i.Mobile:i.Email)||''
							}
					})
			})
	}else{
			customInterence.getZNCustomClickList({
					...tableParams,
					CompanyId:props.customData.CompanyId
			}).then(res=>{
					tableLoading.value = false
					if(res.Ret!==200) return 
					dataList.value = res.Data.List||[]
					total.value = res.Data.Paging.Totals
					dataList.value = dataList.value.map(i=>{
							return {
									...i,
									Email:(i.Mobile?i.Mobile:i.Email)||''
							}
					})
			})
	}
}

function handlePageChange(page){
		tableParams.CurrentIndex = page
		getTableData()
}

function clickNumSortChange({prop,order}){
		const map = {
				'ViewTotal':1,
				'LastViewTime':2
		}
		tableParams.SortParam = order?map[prop]:''
		tableParams.SortType = order=="ascending"?2:1
		handlePageChange(1)
}

watch(
	() => props.isTotalClickShow,
	(newVal) => {
		if(newVal){
				tableParams.CurrentIndex=1
				tableParams.PageSize=5
				tableParams.SortParam=''
				tableParams.SortType=''

				getTableData()
		}else{
				dataList.value = []
		}
	}
)
</script>
<template>
    <el-dialog 
				class="total-click-dialog"
        :title="`${customData.CompanyName}-点击量详情`"
        :model-value="isTotalClickShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        @close="emit('close')"
        width="842px"
        draggable
        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 #default="{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>
<style scoped lang="scss">

</style>