<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 tableColumns"
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				:min-width="item.minwidthsty"
				:prop="item.key"
				align="center"
				:sortable="['YbLogNum','CollectNum','viewTotal','RoadShowTotal','LastViewTime','ExpireDay','createTime'].includes(item.key) ? 'custom' : false"
			>
				<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-if="item.key==='CollectNum'" @click="showCollectDetail(row)" class=" editsty">
            {{row.CollectNum}}
          </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 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>
			<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>
    <!-- 研报/视频收藏统计 -->
    <collect-detail 
      :isCollectDetailShow="isCollectDetailShow"
      :customItem="customItem"
      :StartDate="StartDate"
      :EndDate="EndDate"
      :customStatus="$route.query.CompanyStatus"
      :SellerIds="$route.query.SellerIds"
      @cancel="isCollectDetailShow=false"
    />
    <!-- 图收藏统计 -->
    <collect-list 
      :isCollectListShow="isCollectListShow"
      :customItem="customItem"
      :StartDate="StartDate"
      :EndDate="EndDate"
      :customStatus="$route.query.CompanyStatus"
      :SellerIds="$route.query.SellerIds"
      @cancel="isCollectListShow=false"
    />
	</div>
</template>

<script>
import { dataMainInterface } from '@/api/api.js';
import mPage from '@/components/mPage.vue';
import CollectDetail from '../components/CollectDetail.vue';
import CollectList from '../components/CollectList.vue';

export default {
	name: '',
	components: { mPage,CollectDetail, CollectList },
	data() {
		return {
			title: '',
			ids:'',//公司id
			tableData:[],
			tableColumns:[
				{
					label: '联系人',
					key: 'OldRealName',
					minwidthsty: '80px',
				},
				{
					label: '点击量',
					key: 'YbLogNum',
					minwidthsty: '100px',
				},
				{
					label: '客户名称',
					key: 'CompanyName',
					minwidthsty: '180px',
				},
				{
					label: '客户类型',
					key: 'CompanyType',
					widthsty: '80px',
				},
				{
					label: '所属行业',
					key: 'IndustryName',
				},
				{
					label: '客户地址',
					key: 'City',
					widthsty: '110px',
				},
				{
					label: '所属销售',
					key: 'SellerName',
				},
				{
					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: 20,
			// 产品ID
			productionId:0,
			// 产品类型
			ProductType:0,
			CompanyStatus:'',
			StartDate:'',
			EndDate:'',
      isCollectDetailShow:false,//研报 / 视频收藏统计 弹窗
      customItem:null,
      isCollectListShow:false,//图收藏统计弹窗
		}
	},
	methods: {

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

			const { param, type } = this.sort_obj;
      const collectMap = {
        999:'collectStatisticList',
        998:'chartStatisticList'
      }
      const InterfaceName = this.productionId>=998&&this.ProductType>=998?collectMap[this.productionId]:'newCustomProductionList'
			dataMainInterface[InterfaceName]({
				ProductId:this.productionId,
				ProductType:this.ProductType,
				StartDate:this.StartDate,
				StartDate:this.StartDate,
				EndDate:this.EndDate,
				CompanyStatus: this.CompanyStatus,
				CurrentIndex: this.page_no,
				SortParam: param,
				SortType: type,
				SellerIds: this.ids,
        PageSize:this.pageSize
			}).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();
		},

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

			const typeMap = {
				'RoadShowTotal': 'roadShowTotal',
				'LastViewTime': 'viewTime',
				'ExpireDay': 'expireDay',
				'YbLogNum':'ybUserLog',
        'CollectNum':'ybCollectLog'
			}

			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,
				}
			})
		},

    /* 打开收藏详情弹窗 */
    showCollectDetail(item){
      this.customItem = item
      //如果是 研报 / 视频收藏统计
      if(this.productionId===999&&this.ProductType===999){
        this.isCollectDetailShow = true
      }
      //如果是 图收藏统计
      if(this.productionId===998&&this.ProductType===998){
        this.isCollectListShow = true
      }
    }
	},
	/* 页面跳转前记录参数 */
	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
		}
		this.productionId = parseInt(this.$route.query.productionId) || 0
		this.ProductType = parseInt(this.$route.query.ProductType) || 0
    if(this.productionId>=998&&this.ProductType>=998){
      //如果从收藏统计进入详情，将点击量列换成收藏量列
      const index = this.tableColumns.findIndex(item=>item.label==='点击量')
      this.tableColumns.splice(index,1,{
					label: '收藏量',
					key: 'CollectNum',
					minwidthsty: '100px',
				},)
    }
    
		// 客户状态 
		this.CompanyStatus = this.$route.query.CompanyStatus || ''
		// 开始日期
		this.StartDate = this.$route.query.StartDate || ''
		// 结束日期
		this.EndDate = this.$route.query.EndDate || ''
		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.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>
