<script setup>
import _ from "lodash"
import { nextTick } from 'vue';
import DatePicker from 'vue-datepicker-next';
import $ from 'jquery'

import { roadshowInterence } from '@/api/api.js';
import actiyityDetailDia from '../compononts/activityDetailDia.vue';
import {roadshowStatisticsHook} from "./hooks"

/* 获取表格数据 */
const getTableData=()=>{
	dataLoading.value = false;
	roadshowInterence.researcherStatistic({
		DataType: default_tab.value === '周度统计表' ? 'week' : default_tab.value === '月度统计表' ? 'month' : 'time_interval',
		StartDate: select_date.value ? select_date.value[0] : '',
		EndDate: select_date.value ? select_date.value[1] : '',
	}).then(res => {
		const { Data,Ret } = res;
		if(Ret !== 200) return

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

		//处理数据结构
		let data = _.cloneDeep(Data.List);
		data.forEach(item => {
			
			let groupDataArr = filterTableData(item.RsReportRecordNumList);
			item.subGroupArr=groupDataArr

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

		datalist.value = data;

		const dynamic_width = {
			'周度统计表': '9%',
			'月度统计表': '7%',
		}
		nextTick(() => {
			dataLoading.value = true;
			$('table').find('td').css({ width: dynamic_width[default_tab.value]?dynamic_width[default_tab.value]:'25%'})
			$('table').find('.thead-rs').css({ width: dynamic_width[default_tab.value] ? dynamic_width[default_tab.value] : '120px' })
			$('table').find('.head-column').css({ width: dynamic_width[default_tab.value] ? dynamic_width[default_tab.value] : '25%' })
		})
	})
}

const HOOK = roadshowStatisticsHook({getTableData})
const {dataLoading,default_tab,select_date,totalGroupArr,datalist,tableTheadColumns,staticTabs,
	dialogForm,isShowDia,diaTitle}=HOOK.datas
const {filterTableData,dateChange,openDiaHandle,changeTabHandle}=HOOK.functions

getTableData()

</script>

<template>
	<div class="statistic-container">
		<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:value="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(4)">
							<td>试用路演</td>
							<td>正式路演</td>
							<td>公开会议</td>
						</template>
					</tr>
					<tr v-if="['周度统计表'].includes(default_tab)">
						<template v-for="(item,index) in new Array(3)">
							<td>试用路演</td>
							<td>正式路演</td>
							<td>公开会议</td>
						</template>
					</tr>
				</thead>
			</table>

			<div class="table-body-wrapper" ref="bodyRef">
				<table>
					<tbody v-for="item in datalist" :key="item.Name">
							<tr>
								<td :rowspan="item.Item.length+1" class="thead-rs">{{item.Name}}</td>
							</tr>

							<tr v-for="rs in item.Item" :key="rs.AdminId">
								<td class="thead-rs">{{rs.Name}}</td>

								<td
									class="data-cell"
									v-for="(data,data_key) in rs.dataArr" 
									:key="data_key" 
									@click="openDiaHandle(data)"
								>
									{{ data.value !== 0 ? data.value : '' }}
								</td>

							</tr>
							
							<tr>
								<td colspan="2">组合计</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>
					</tbody>

						<tfoot>
							<tr>
								<td colspan="2">总合计</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>

		<!-- 详情弹窗 -->
		<actiyityDetailDia
			v-model:isShow="isShowDia"
			:title="diaTitle"
			:form="dialogForm"
			fromType="researcher"
		/>

	</div>
</template>

<style lang='scss' scoped>
*{ box-sizing: border-box;}
@import './index.scss';
</style>