<template>
	<div class="list-container">
		<span class="tag">{{title}}</span>
		<el-table
			:data="tableData"
			@sort-change="sortChangeHandle"
			border
			class="table-cont"
		>
			<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="sortableCheck(item.key)"
			>
				<template slot-scope="{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="act_status=='流失'">
								创建时间：{{row.CreatedTime|formatTime}}
							</template>
							<template v-else-if="row.Status == '永续'">
								永久
							</template>
							<template v-else-if="act_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"
				v-if="!isRenewalException"
			>
				<template slot-scope="scope">
					<span>
						<template v-if="title.includes('正式')">
							{{scope.row.FormalTime|formatTime}}
						</template>
						<template v-else>
							{{scope.row.CreatedTime|formatTime}}
						</template>
					</span> 
				</template>
			</el-table-column>
			<el-table-column
				prop="ServiceYears"
				sortable="custom"
				align="center" 
				min-width="120"
				v-else
			>
				<template slot="header" slot-scope="scope">
					<el-tooltip content="客户年限=（当前年月日-首签合同开始年月日）/365，结果进行四舍五入，保存一位小数" placement="top">
						<div style="display: inline-flex;align-items: center;">
							<span style="margin-right: 4px;">客户年限</span>
							<i class="el-icon-info" style="color: #333333;"/>
						</div>
					</el-tooltip>
				</template>
				<template slot-scope="scope">
					<span>{{scope.row.ServiceYears}}</span> 
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" prop="LatestServiceRecord" :sortable="isRenewalException?'custom':false">
				<span slot-scope="scope">
					<el-button type="text" @click="handleShowShareRecode(scope.row,'list')">沟通记录</el-button>
					<span style="white-space: nowrap;" v-if="isRenewalException">{{ scope.row.LatestServiceRecord }}</span>
				</span>
			</el-table-column>
			<div slot="empty" style="lineHeight: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>
		</el-table>
		<div class="bottom">
			<m-page
				:total="total"
				:page_no="page_no"
				:pageSize="pageSize"
				@handleCurrentChange="handleCurrentChange"
			/>
		</div>

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

<script>
import { dataMainInterface } from '@/api/api.js';
import mPage from '@/components/mPage.vue';
import ShareListDialog from '@/views/custom_manage/customList/components/shareListDialog.vue';
import customMixin from '@/views/custom_manage/customList/mixins/customlistMixin.js';

export default {
	name: '',
	mixins:[customMixin],
	components: { mPage,ShareListDialog },
	data() {
		return {
			title: '',
			ids:'',//公司id
			tableData:[],
			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'
				}
			],
			sort_obj: {
				param: '',
				type: ''
			},//排序字段
			total: 0,
			page_no: 1,
			pageSize: 10,
		}
	},
	computed:{
		Role() {
			return localStorage.getItem('Role');
		},
		// 是否是续约异常
		isRenewalException(){
			return this.$route.path=="/abnormalRenewalCustomlist"
		},
		tableColumnsComputed(){
			// 分配销售 续约统计和续约异常统计需要显示
			let hasDistributionSales = this.Role.indexOf('rai')==-1 && 
																['/contractCustomlist','/abnormalRenewalCustomlist'].includes(this.$route.path)
			if(hasDistributionSales){
				return this.tableColumns
			}else{
				return this.tableColumns.filter(item => item.label!='分配销售')
			}
		}
	},
	methods: {

		/* 获取数据	 */
		getTableData() {

			const { param, type } = this.sort_obj;

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

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

		/* 切换页码 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData();
		},

		sortableCheck(key){
			return ( ['viewTotal','RoadShowTotal','LastViewTime','ExpireDay','createTime'].includes(key) ||
							(['ShareSeller','SellerName','Status'].includes(key) && this.isRenewalException) ) ? 'custom' : false
		},
		/* 排序变化时 */
		sortChangeHandle({ prop,order }) {
			console.log(prop,order)
			this.page_no = 1;

			const typeMap = {
				'RoadShowTotal': 'roadShowTotal',
				'LastViewTime': 'viewTime',
				'ExpireDay': 'expireDay',
				'ShareSeller':'shareSellerName',
				'SellerName':'sellerName',
				'Status':'status',
				'ServiceYears':'serviceYears',
				'LatestServiceRecord':'latestServiceRecord'
			}

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

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

	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no: this.page_no,
			ids: this.ids,
			title: this.title,
			sort_obj:this.sort_obj
		}
		sessionStorage.setItem('newCustomBack',JSON.stringify(backData))
		localStorage.removeItem("newCustomBack");
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('newCustomBack')
		}
		next()
	},
	mounted() {
		if(this.$route.query.ids) {
			this.ids = decodeURIComponent(this.$route.query.ids);	
		}
		this.title = decodeURIComponent(this.$route.query.title);
		if(this.$route.query.sort_obj){
			this.sort_obj = this.$route.query.sort_obj
		}
		if(this.$route.query.ids||this.$route.query.title||this.$route.query.sort_obj){
			let backData = {
      			page_no: this.page_no,
      			ids: this.ids,
      			title: this.title,
				sort_obj:this.sort_obj
    		};
			localStorage.setItem("newCustomBack", JSON.stringify(backData));
		}
		if(sessionStorage.getItem('newCustomBack')) {
			let { page_no,ids,title,sort_obj } = JSON.parse(sessionStorage.getItem('newCustomBack'));
			this.page_no = page_no;
			this.ids = ids;
			this.title = title;
			this.sort_obj = sort_obj
		}else if(localStorage.getItem("newCustomBack")){
      		let { page_no, ids, title,sort_obj } = JSON.parse(localStorage.getItem("newCustomBack"));
      		this.page_no = page_no;
      		this.ids = ids;
      		this.title = title;
			this.sort_obj = sort_obj
    	}
		this.pageSize=this.isRenewalException?50:10
		this.ids && this.getTableData();
	},
}
</script>
<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>
