<script setup>
import _ from "lodash"
import DatePicker from 'vue-datepicker-next';
import { ArrowDown,ArrowUp } from '@element-plus/icons-vue'

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


/* 获取表格数据 */
const getTableData=()=>{
	dataLoading.value = false;
	roadshowInterence.sellerStatistic({
		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 => {
			item.showDetail=false
			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;
		dataLoading.value = true;
	})
}

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

			<div class="table-body-wrapper">
				<table>
					<thead style="z-index: 1;">
						<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)" :key="index">
								<td>试用路演</td>
								<td>正式路演</td>
								<td>公开会议</td>
							</template>
						</tr>
					</thead>
					<tbody v-for="item in datalist" :key="item.Name">
							<tr>
								<td colspan="2" @click="item.showDetail=!item.showDetail"> {{`${item.Name}合计`}}
									<el-icon :size="14" style="vertical-align: text-top;" v-if="item.Item.length">
										<ArrowUp v-show="item.showDetail" />
										<ArrowDown v-show="!item.showDetail" />
									</el-icon>	
								</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 v-show="item.showDetail">
								<td :rowspan="item.Item.length+1" class="thead-rs">{{item.Name}}</td>
							</tr>

							<tr v-for="rs in item.Item" :key="rs.AdminId" v-show="item.showDetail">
								<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>
							</template>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="2">ficc总合计</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="seller"
		/>

	</div>
</template>

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