<script>
import { defineComponent } from "vue";

export default defineComponent({
  beforeRouteEnter(to, from, next) {
		/* 页面进入前是否清除参数 */
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('newCustomBack')
		}
		next()
  },
});
</script>

<script setup>
import { ref,reactive,computed } from "vue";
import { useRouter,useRoute} from 'vue-router';
import _ from 'lodash'
import {onBeforeRouteLeave} from "vue-router"

import { dataMainInterface } from '@/api/api.js';
import mPage from '@/components/mPage.vue';
import ShareListDialog from '@/views/custom_manage/custom/components/shareListDialog.vue';
import {customListHook} from '@/views/custom_manage/custom/hooks/customlistHook.js';
import {formatTime} from '@/hooks/mixins/index.js'

const $route = useRoute()
const $router = useRouter()
const {isShareRecodeDialogShow,customInfo,handleShowShareRecode} = customListHook()

const title=ref('')
const ids=ref('')//公司id
const tableData=ref([])
const tableColumns=[
	{
		label: '客户名称',
		key: 'CompanyName',
		minwidthsty: '180px',
	},
	{
		label: '客户类型',
		key: 'CompanyType',
		widthsty: '80px',
	},
	{
		label: '所属行业',
		key: 'IndustryName',
	},
	{
		label: '客户地址',
		key: 'City',
		widthsty: '110px',
	},
	{
		label: '所属销售',
		key: 'SellerName',
	},
	{
		label: '分配销售',
		key: 'ShareSeller',
	},
	{
		label: '客户状态',
		key: 'Status',
		// widthsty: '180px',
	},
	{
		label: '累计阅读次数',
		key: 'viewTotal',
	},
	{
		label: '累计路演次数',
		key: 'RoadShowTotal',
	},
	{
		label: '最近一次阅读时间',
		key: 'LastViewTime',
		widthsty: '200px',
	},
	{
		label: '服务期限',
		key: 'EndDate',
		minwidthsty: '180px',
	},
	{
		label: '到期天数',
		key: 'ExpireDay',
		widthsty: '110px'
	}
]
let sort_obj=reactive({
	param: '',
	type: ''
})//排序字段
const total=ref(0)
const page_no=ref(1)
const pageSize=ref(10)

const Role = computed(()=>{
	return localStorage.getItem('Role');
})

const tableColumnsComputed = computed(()=>{
	// 分配销售 续约统计和续约异常统计需要显示
	let hasDistributionSales = Role.value.indexOf('rai')==-1 && 
													['/contractCustomlist','/abnormalRenewalCustomlist'].includes($route.path)
	if(hasDistributionSales){
		return tableColumns
	}else{
		return tableColumns.filter(item => item.label!='分配销售')
	}
})

/* 获取数据	 */
const getTableData=()=>{

	const { param, type } = sort_obj;

	dataMainInterface.newcustomList({
		PageSize: pageSize.value,
		CurrentIndex: page_no.value,
		SortParam: param,
		SortType: type,
		CompanyIds: ids.value
	}).then(res => {
		const { Ret,Data } = res;
		if(Ret !== 200) return

		total.value = res.Data.Paging.Totals;
		tableData.value = Data.List || [];
	})
}

/* 切换页码 */
const handleCurrentChange=(page)=>{
	page_no.value = page;
	getTableData();
}

/* 排序变化时 */
const sortChangeHandle=({ prop,order })=>{
	console.log(prop,order)
	page_no.value = 1;

	const typeMap = {
		'RoadShowTotal': 'roadShowTotal',
		'LastViewTime': 'viewTime',
		'ExpireDay': 'expireDay',
	}

	sort_obj = {
		type: order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : '',
		param: typeMap[prop] || prop
	}
	getTableData();
}

/* 前往详情页 */
const goDetail=({CompanyId})=>{
	$router.push({
		path:'/customDetail',
		query:{
			id: CompanyId,
		}
	})
}

const init=()=>{
	if($route.query.ids) {
		ids.value = decodeURIComponent($route.query.ids);	
	}
	title.value = decodeURIComponent($route.query.title);
	if($route.query.sort_obj){
		sort_obj = $route.query.sort_obj
	}
	if($route.query.ids||$route.query.title||$route.query.sort_obj){
		let backData = {
					page_no: page_no.value,
					ids: ids.value,
					title: title.value,
			sort_obj:sort_obj
			};
		localStorage.setItem("newCustomBack", JSON.stringify(backData));
	}
	if(sessionStorage.getItem('newCustomBack')) {
		let newCustomBack= JSON.parse(sessionStorage.getItem('newCustomBack'));
		page_no.value = newCustomBack.page_no;
		ids.value = newCustomBack.ids;
		title.value = newCustomBack.title;
		sort_obj = newCustomBack.sort_obj
	}else if(localStorage.getItem("newCustomBack")){
				let newCustomBack = JSON.parse(localStorage.getItem("newCustomBack"));
				page_no.value = newCustomBack.page_no;
				ids.value = newCustomBack.ids;
				title.value = newCustomBack.title;
		sort_obj = newCustomBack.sort_obj
		}

	ids.value && getTableData();
}

/* 页面跳转前记录参数 */
onBeforeRouteLeave((to, form, next) =>{
	let backData = {
		page_no: page_no.value,
		ids: ids.value,
		title: title.value,
		sort_obj:sort_obj
	}
	sessionStorage.setItem('newCustomBack',JSON.stringify(backData))
	localStorage.removeItem("newCustomBack");
	next()
})

init()

</script>

<template>
	<div class="list-container">
		<span class="tag">{{title}}</span>
		<el-table
			:data="tableData"
			@sort-change="sortChangeHandle"
			border
			class="table-cont"
			size="default"
		>
			<el-table-column
				v-for="item in tableColumnsComputed"
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				:prop="item.key"
				align="center"
				:sortable="['viewTotal','RoadShowTotal','LastViewTime','ExpireDay','createTime'].includes(item.key) ? 'custom' : false"
			>
				<template #default="{row}">

					<span v-if="item.key === 'CompanyName'" @click="goDetail(row)" class="customName editsty">
						{{row.CompanyName}}
					</span>

					<span v-else-if="item.key === 'CompanyType'">
						<span :style="row.IsSuspend===1?'color:#bbb':''">{{row.CompanyType}}</span> 
						<span v-if="row.FiccPackageType"  class="ficc-package">{{row.FiccPackageType == 1 ? '大套餐': '小套餐'}}</span>
					</span>

					<span v-else-if="item.key === 'City'">
						{{`${row.Province}/${row.City}`}}
					</span>

					<span v-else-if="item.key === 'Status'">
						{{row.Status}}
					</span>

					<span v-else-if="item.key === 'viewTotal'">
						{{row.AllViewTotal}}
					</span>

					<span v-else-if="item.key === 'LastViewTime'">
						{{
							row.FiccLastViewTime 
							? `ficc： ${row.FiccLastViewTime}` 
							:row.RaiLastViewTime?
							 `权益： ${row.RaiLastViewTime}`:'--'
						}}
					</span>

					<span v-else-if="item.key === 'EndDate'">
						<!-- 正常的时间显示 -->
						<template v-if="row.StartDate.indexOf('/')==-1">
							<template v-if="row.Status=='流失'">
								创建时间：{{formatTime(row.CreatedTime)}}
							</template>
							<template v-else-if="row.Status == '永续'">
								永久
							</template>
							<template v-else-if="row.Status == '冻结'">
								{{row.FreezeStartDate}}~{{row.FreezeEndDate}}
							</template>
							<template v-else>
								{{row.StartDate}}~{{row.EndDate}}
							</template>
						</template>
						<!-- 公用客户的时间显示 -->
						<template v-else>
							{{row.StartDate.substr(0,10)}}~{{row.EndDate.substr(0,10)}}/{{row.StartDate.substr(11)}}~{{row.EndDate.substr(11)}}
						</template>
					</span>

					<span v-else>{{ row[item.key]}}</span>
				</template>
			</el-table-column>
			<el-table-column
				:prop="title.includes('正式') ? 'formalTime' : 'createTime'"
				:label="title.includes('正式') ? '转正时间' : '创建时间'"
				sortable="custom"
				align="center" 
				min-width="120"
			>
				<template #default="scope">
					<span>
						<template v-if="title.includes('正式')">
							{{formatTime(scope.row.FormalTime)}}
						</template>
						<template v-else>
							{{formatTime(scope.row.CreatedTime)}}
						</template>
					</span> 
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="85px">
				<template #default="scope">
					<el-button link type="primary" @click="handleShowShareRecode(scope.row,'list')" style="padding:12px 0;">沟通记录</el-button>
				</template>
			</el-table-column>
			<template #empty>
				<div style="line-height: 44px; margin: 60px 0; color: #999">
					<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display: block; width: 160px; height: 128px; margin: auto"/>
					<span>暂无数据</span>
				</div>
			</template>
		</el-table>
		<div class="bottom">
			<m-page
				:total="total"
				:page_no="page_no"
				@handleCurrentChange="handleCurrentChange"
			/>
		</div>

		<!-- 服务记录弹窗 -->
		<ShareListDialog
			:isShareRecodeDialogShow="isShareRecodeDialogShow"
			:customInfo="customInfo"
			:allowEdit="false"
			@close="()=>{isShareRecodeDialogShow=false;}"
		/>
	</div>
</template>

<style lang="scss" scoped>
*{ box-sizing: border-box; }
.list-container {
	min-height: calc(100vh - 120px);
	background-color: #fff;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	padding: 30px 20px;
	.tag {
		padding: 10px 24px;
		display: inline-block;
		background: #E8F3FF;
		color: #2D8CF0;
		font-size: 14px;
		border-radius: 4px;
	}
	.table-cont {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.bottom {
		height: 40px;
	}
}
</style>
