<template>
	<div class="statistic-container">
		<div class="custom-tab-box" v-if="Role==='admin'">
			<div class="custom-tab" :class="activeTab.tabName =='FICC' && 'activeTab'" @click="switchTab('FICC')">
				FICC
			</div>
			<div class="custom-tab" :class="activeTab.tabName =='QY' && 'activeTab'" @click="switchTab('QY')">
				权益
			</div>
		</div>
		<div class="frequency-cont">
			<ul class="frequency-ul">
				<li v-for="tab in staticTabs" :key="tab" :class="{act: tab=== default_tab}" @click="changeTabHandle(tab)">{{ tab }}</li>
			</ul>
			<date-picker
			v-model="select_date"
			type="date" 
			range
			value-type="format"
			:clearable="false"
			@change="dateChange"
			placeholder="请选择统计时间"/>
		</div>
		<div class="table-cont" v-show="dataLoading">
			<!-- <table>
				<thead>
					<tr>
						<td rowspan="2" class="thead-rs">组别</td>
						<td rowspan="2" class="thead-rs">销售</td>
						<td
							:colspan="['周度统计表','月度统计表'].includes(default_tab) ? 3 : 1"
							v-for="item in tableTheadColumns"
							:key="item" 
							class="head-column"
						>
							{{item}}
						</td>	
					</tr>
					<tr v-if="['月度统计表'].includes(default_tab)">
						<template v-for="(item,index) in new Array(6).fill('')">
							<td :key="index+'_0'">试用</td>
							<td :key="index+'_1'">活跃</td>
							<td :key="index+'_2'">正式</td>
						</template>
					</tr>
					<tr v-else-if="['周度统计表'].includes(default_tab)">
						<template v-for="(item,index) in new Array(6).fill('')">
							<td :key="index+'_0'">
								试用
							<el-tooltip 
								effect="dark" 
								placement="top-start" 
								v-if="index === 0"
								:content="tipMap.get('试用')"
							>
								<i class="el-icon-info"/>
							</el-tooltip>
							</td>
							<td :key="index+'_1'">
								活跃
								<el-tooltip 
									effect="dark" 
									placement="top-start" 
									v-if="index === 0"
									:content="tipMap.get('活跃'+activeTab.productionId)"
								>
									<i class="el-icon-info"/>
									<div slot="content" v-html="tipMap.get('活跃'+activeTab.productionId)"></div>
								</el-tooltip>
							</td>
							<td :key="index+'_2'">
								正式
								<el-tooltip 
									effect="dark" 
									placement="top-start" 
									v-if="index === 0"
									:content="tipMap.get('正式'+activeTab.productionId)"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
							</td>
						</template>
					</tr>
				</thead>
			</table>	 -->
			<div class="table-body-wrapper">
				<table>
					<thead>
						<tr>
							<td rowspan="2" class="thead-rs">组别</td>
							<td rowspan="2" class="thead-rs">销售</td>
							<td
								:colspan="['周度统计表','月度统计表'].includes(default_tab) ? 3 : 1"
								v-for="item in tableTheadColumns"
								:key="item" 
								class="head-column"
							>
								{{item}}
								<el-tooltip 
									effect="dark" 
									placement="top-start"
									v-if="!['周度统计表','月度统计表'].includes(default_tab)"
								>
									<i class="el-icon-info"/>
									<div slot="content" v-html="tipMap.get(item==='试用'?item:`${item}${activeTab.productionId}`)"></div>
								</el-tooltip>
							</td>	
						</tr>
						<tr v-if="['月度统计表'].includes(default_tab)">
							<template v-for="(item,index) in new Array(6).fill('')">
								<td :key="index+'_0'">
									试用
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('试用')"
									>
										<i class="el-icon-info"/>
									</el-tooltip>
								</td>
								<td :key="index+'_1'">
									活跃
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('活跃'+activeTab.productionId)"
									>
										<i class="el-icon-info"/>
										<div slot="content" v-html="tipMap.get('活跃'+activeTab.productionId)"></div>
									</el-tooltip>
								</td>
								<td :key="index+'_2'">
									正式
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('正式'+activeTab.productionId)"
									>
										<i class="el-icon-info"/>
									</el-tooltip>
								</td>
							</template>
						</tr>
						<tr v-else-if="['周度统计表'].includes(default_tab)">
							<template v-for="(item,index) in new Array(6).fill('')">
								<td :key="index+'_0'">
									试用
								<el-tooltip 
									effect="dark" 
									placement="top-start" 
									v-if="index === 0"
									:content="tipMap.get('试用')"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
								</td>
								<td :key="index+'_1'">
									活跃
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('活跃'+activeTab.productionId)"
									>
										<i class="el-icon-info"/>
										<div slot="content" v-html="tipMap.get('活跃'+activeTab.productionId)"></div>
									</el-tooltip>
								</td>
								<td :key="index+'_2'">
									正式
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('正式'+activeTab.productionId)"
									>
										<i class="el-icon-info"/>
									</el-tooltip>
								</td>
							</template>
						</tr>
					</thead>
					<tbody v-for="item in datalist" :key="item.Name">
							<tr>
								<td colspan="2" 
									@click="item.showDetail=!item.showDetail" 
								>{{item.Name}}合计<i :class="item.showDetail?'el-icon-arrow-up':'el-icon-arrow-down'" v-if="item.Item.length"></i></td>
								<td 
									v-for="(group_data,group_data_key) in item.subGroupArr" 
									:key="group_data_key"
									:class="{link: item.Item.length}"
								>

									<span 
										@click="goList(group_data,group_data_key,item.Item)" 
										v-if="Object.prototype.toString.call(group_data.value) === '[object Number]'"
									>
										{{ group_data.value !== 0 ? group_data.value : '' }}
									</span>

									<span 
										v-else 
										v-for="(sub_data_value,sub_index) in group_data.value" 
										@click="goList(group_data,group_data_key,item.Item,sub_index)" 
										:key="sub_index" 
										:style=" sub_data_value ? '' : 'color:#666'"
									>
										{{sub_data_value}} 
										<span style="color:#666">{{ sub_index === group_data.value.length - 1 ? '' : '/' }}</span>
									</span>
								</td>
							</tr>
							<template v-if="item.Item.length" >
								<tr :style="{display:item.showDetail?'table-row':'none'}">
									<td :rowspan="item.Item.length+1" class="thead-rs">{{item.Name}}</td>
								</tr>

								<tr v-for="rs in item.Item" :key="rs.AdminId" :style="{display:item.showDetail?'table-row':'none'}">
									<td class="thead-rs">{{rs.Name}}</td>

									<td 
										:class="['data-cell',{link: item.Item.length}]" 
										v-for="(data,data_key) in rs.dataArr" 
										:key="data_key"
									>
										
										<span 
											@click="goList(data,data_key,item.Item)" 
											v-if="Object.prototype.toString.call(data.value) === '[object Number]'"
										>
											{{ data.value !== 0 ? data.value : '' }}
										</span>

										<span 
											v-else 
											v-for="(sub_data_value,sub_index) in data.value" 
											:key="sub_index" 
											:style=" sub_data_value ? '' : 'color:#666'" 
											@click="goList(data,data_key,item.Item,sub_index)"
										>
											{{sub_data_value}} 	
											<span style="color:#666">{{ sub_index === data.value.length - 1 ? '' : '/' }}</span>
										</span>
									</td>
									
								</tr>
							</template>	
					</tbody>

					<tfoot>
						<tr>
							<td colspan="2">{{activeTab.tabSummationName}}</td>
							<td v-for="(total_data,total_data_key) in totalGroupArr" :key="total_data_key">

								<span v-if="Object.prototype.toString.call(total_data.value) === '[object Number]'">
									{{ total_data.value !== 0 ? total_data.value : '' }}
								</span>

								<span v-else v-for="(sub_data_value,sub_index) in total_data.value" :key="sub_index">
									{{sub_data_value}} 
									<span>{{ sub_index === total_data.value.length - 1 ? '' : '/' }}</span>
								</span>
							</td>
						</tr>
					</tfoot>
				</table>
			</div>	
		</div>

	</div>
</template>

<script>
import { dataMainInterface } from '@/api/api.js';
import mixin from './mixin';
export default {
	name:'',
	mixins: [ mixin ],
	data () {
		return {
			//1 ficc 2权益
			tipMap: new Map([
				['试用','在所选时间段内，新建的或转为试用状态的客户数量（正式转试用的除外）'],
				['活跃1','在所选时间段内，累计报告阅读次数由＜50次，转变为≥50次的试用客户数量<br/>在所选时间段内，累计报告阅读次数由＜50次，转变为≥50次的非新增试用客户数量'],
				['活跃2','在所选时间段内，互动量由＜50次，转变为≥50次的试用客户数量'],
				['正式1','首次申请转正的审批通过时间，在所选时间段内的客户数'],
				['正式2','新签合同的开始日期在统计时间段内的客户'],
			])
		};
	},
	beforeRouteEnter (to, from, next) {
		// 从续约客户列表进来才使用 renewalTab
		if(from.path != '/newCustomlist'){
			sessionStorage.removeItem('renewalTab')
		}
		next()
	},
	methods: {
		/* 获取表格数据 */
		getTableData() {
			this.dataLoading = false;
			dataMainInterface.newcustomStatistic({
				DataType: this.default_tab === '周度统计表' ? 'week' : this.default_tab === '月度统计表' ? 'month' : 'time_interval',
				StartDate: this.select_date ? this.select_date[0] : '',
				EndDate: this.select_date ? this.select_date[1] : '',
				ProductId:this.activeTab.productionId
			}).then(res => {
				const { Data,Ret } = res;
				if(Ret !== 200) return

				//总合计数据处理
				this.totalGroupArr = this.filterTableData(Data.CompanyReportRecordNumList);

				//处理数据结构
				let data = _.cloneDeep(Data.List).sort((a,b) => b.Item.length - a.Item.length);
				if(!['admin','ficc_admin'].includes(this.Role)) data = data.sort((a,b) => b.Item.length - a.Item.length);

				data.forEach(item => {
					item.showDetail=false
					
					let groupDataArr = this.filterTableData(item.CompanyReportRecordNumList,{
						rs_name: item.Name + '合计'
					});
					this.$set(item,'subGroupArr',groupDataArr)

					item.Item && item.Item.forEach(sub_item => {
						
						let dataArr = this.filterTableData(sub_item.CompanyReportRecordNumList,{
							rs_name : sub_item.Name,

						})

						this.$set(sub_item,'dataArr',dataArr)
					})
				})

				this.datalist = data;
				this.dataLoading = true;
				// console.log(data);
				/**
				 * 前一版每页显示前4周和前4个月的数据时  为7%
				 * 现在每页显示前6周和前6个月的数据
				 */
				// const dynamic_width = {
				// 	'周度统计表': '5%',
				// 	'月度统计表': '5%',
				// }
				// console.log(this.default_tab);
				// this.$nextTick(() => {
				// 	this.dataLoading = true;
					// $('table').find('td').css({ width: dynamic_width[this.default_tab]&&dynamic_width[this.default_tab]})
					// $('table').find('.thead-rs').css({ width: dynamic_width[this.default_tab] ? dynamic_width[this.default_tab] : '120px' })
					// $('table').find('.head-column').css({ width: dynamic_width[this.default_tab] ? dynamic_width[this.default_tab] : '25%' })
				// })
			})
		},

		/* 进入列表 */
		goList({ ids, key, rs_name, value },index, parent,sub_index= "") {
			if(!parent.length || !value) return
			if(sub_index && (!value[sub_index] || !parent.length)) return

			let column_title = this.getColumnTitle(index);

			let title =  encodeURIComponent(`${column_title}/${rs_name}/${key}`);
			sessionStorage.setItem('renewalTab',this.activeTab.tabName)	
			const {href}=this.$router.resolve({
				name: '新增客户列表',
				query: {
					ids: sub_index !== '' ? encodeURIComponent(ids[sub_index]) : encodeURIComponent(ids),
					title
				}
			})
			window.open(href,'_blank')
		},

		/* 获取数据对应表头 */
		getColumnTitle(index) {
			let title = '';

			if(['周度统计表','月度统计表'].includes(this.default_tab)) {
				title = [0,1,2].includes(index) 
				? this.tableTheadColumns[0] 
				: [3,4,5].includes(index) 
				? this.tableTheadColumns[1] 
				: [6,7,8].includes(index) 
				? this.tableTheadColumns[2] 
				: [9,10,11].includes(index) 
				? this.tableTheadColumns[3]
				: [12,13,14].includes(index) 
				? this.tableTheadColumns[4]
				: [15,16,17].includes(index) 
				? this.tableTheadColumns[5] 
				: '';
			} else {
				title = this.default_tab || `${this.select_date[0]}~${this.select_date[1]}`;
			}
			
			return title
		}

	},
	mounted() {
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
*{ box-sizing: border-box;}
@import './index.scss';
</style>