<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">
			<date-picker
			v-model="select_date"
			type="date" 
			value-type="format"
			:clearable="false"
			@change="dateChangeHandle"
			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
							v-for="item in tableTheadColumns" 
							:key="item" 
							class="head-column"
						>
							{{item}}
							<el-tooltip 
								effect="dark" 
								placement="top-start"
								:content="tipMap.get(item+activeTab.productionId)"
							>
								<i class="el-icon-info"/>
							</el-tooltip>
						</td> 
					</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
								v-for="item in tableTheadColumns" 
								:key="item" 
								class="head-column"
							>
								{{item}}
								<el-tooltip 
									effect="dark" 
									placement="top-start"
									:content="tipMap.get(item+activeTab.productionId)"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
							</td> 
						</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">
									{{ group_data.value !== 0 ? group_data.value : '' }}
								</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" v-for="(data,data_key) in rs.dataArr" :key="data_key">
										{{ data.value !== 0 ? data.value : '' }}
									</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">
								{{ total_data.value !== 0 ? total_data.value : '' }}
							</td>
						</tr>
					</tfoot>
				</table>
			</div>	
		</div>

	</div>
</template>

<script>
import { dataMainInterface } from '@/api/api.js';
export default {
	name:'',
	data () {
		return {
			dataLoading: false,
			select_date: this.$moment().format('YYYY-MM-DD'),
			datalist:[],
			tableTheadColumns: ['试用','推进','跟踪','预备','未分类','活跃','正式'],
			tipMap: new Map([
				['试用1','截止到查询日期，试用状态的客户数量'],
				['推进1','截止到查询日期，试用（推进）状态的客户数量'],
				['跟踪1','截止到查询日期，试用（跟踪）状态的客户数量'],
				['预备1','截止到查询日期，试用（预备）状态的客户数量'],
				['未分类1','截止到查询日期，试用（未分类）状态的客户数量'],
				['活跃1','截止到查询日期，上述试用状态的客户中，累计报告阅读次数≥50次的客户'],
				['正式1','截止到查询日期，正式状态的客户数量'],

				['试用2','截止到查询日期，试用状态的客户数量'],
				['推进2','截止到查询日期，试用（推进）状态的客户数量'],
				['跟踪2','截止到查询日期，试用（跟踪）状态的客户数量'],
				['预备2','截止到查询日期，试用（预备）状态的客户数量'],
				['未分类2','截止到查询日期，试用（未分类）状态的客户数量'],
				['活跃2','截止到某一日期，累计互动量≥50次的试用客户'],
				['正式2','截止到查询日期，正式状态的客户数量'],
			])
		};
	},
	computed: {
		Role() {
			return localStorage.getItem('Role');
		},
		activeTab(){
			let tabName = sessionStorage.getItem('renewalTab')?sessionStorage.getItem('renewalTab'):'FICC'
			return {
				tabName, // FICC QY
				tabSummationName:tabName == 'FICC'?'ficc总合计':'权益总合计',
				productionId:tabName == 'FICC'?1:2, // 1 FICC 2 权益
			}
		}
	},
	methods: {
		// 切换 FICC 和 权益 TAB
		switchTab(tabName){
				this.activeTab.tabName = tabName
				this.activeTab.tabSummationName = tabName == 'FICC'?"ficc总合计":"权益总合计"
				this.activeTab.productionId = tabName == 'FICC'?1:2
				this.getTableData()
		},

		/* 获取表格数据 */
		getTableData() {
			this.dataLoading = false;
			dataMainInterface.stockcustomStatistic({
				Date: this.select_date,
				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);
				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);
					this.$set(item,'subGroupArr',groupDataArr)

					item.Item && item.Item.forEach(sub_item => {
						
						let dataArr = this.filterTableData(sub_item.CompanyReportRecordNumList,sub_item.AdminId)

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

				this.datalist = data;
				this.dataLoading = true;
				
			})
		},

		dateChangeHandle() {
			$('.table-body-wrapper')[0].scrollTop = 0; 
			this.getTableData();
		},

		/* 处理数据结构 便于页面渲染 */
		filterTableData(data) {
			let list = data.map(item => ([
				{
					key: '试用',
					value: item.TryOutNum,
				},
				{
					key: '推进',
					value: item.TryStagePushNum,
				},
				{
					key: '跟踪',
					value: item.TryStageFollowNum,
				},
				{
					key: '预备',
					value: item.TryStageReadyNum,
				},
				{
					key: '未分类',
					value: item.TryStageInitNum,
				},
				{
					key: '活跃',
					value: item.ActiveNum,
				},
				{
					key: '正式',
					value: item.FormalNum,
				}
			]))
			
			return list.flat(Infinity);
		},

	},
	mounted() {
		if(this.Role.indexOf('rai')!=-1){
			this.activeTab.tabName = 'QY'
			this.activeTab.tabSummationName = '权益总合计'
			this.activeTab.productionId = 2
		}
		this.getTableData();
	},
}
</script>
<style lang='scss' scoped>
*{ box-sizing: border-box;}
@import './index.scss';
/* .thead-rs {
	width: 120px !important;
}
.head-column {
	width: 10% !important;
}
.data-cell{
	width: 10% !important;
} */
</style>