<template>
	<div class="statistic-container">
		<div class="tabs-content">
			<span @click="tabsHandler(item)" :class="['item',departmentAct==item.val && 'item-act']" v-for="item in departmentTabs" :key="item.val">{{item.label}}</span>
		</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">
			<div class="table-body-wrapper">
				<table>
					<thead>
						<tr>
							<td rowspan="2" :class="['thead-rs',departmentAct == '权益' && !['周度统计表','月度统计表'].includes(default_tab) && 'rai_thead-rs']">组别</td>
							<td rowspan="2" :class="['thead-rs',departmentAct == '权益' && !['周度统计表','月度统计表'].includes(default_tab) && 'rai_thead-rs']">销售</td>
							<td
								:colspan="departmentAct == '权益' && ['周度统计表','月度统计表'].includes(default_tab) ? 2 : ['周度统计表','月度统计表'].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)">
								<td  v-for="(tdItem,inx) in departmentTheadColumns" :key="index+'_'+inx">{{tdItem}}</td>
							</template>
						</tr>
						<tr v-if="['周度统计表'].includes(default_tab)">
							<template v-for="(item,index) in new Array(6)">
								<td  v-for="(tdItem,inx) in departmentTheadColumns" :key="index+'_'+inx">{{tdItem}}</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">
									{{ 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">{{departmentAct}}总合计</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
			:isShow.sync="isShowDia"
			:title="diaTitle"
			:form="dialogForm"
			fromType="seller"
		/>

	</div>
</template>

<script>
import { roadshowInterence } from '@/api/api.js';
import mixin from './mixin';
import actiyityDetailDia from '../compononts/activityDetailDia.vue';
export default {
	name:'',
	mixins: [ mixin ],
	components: { actiyityDetailDia },
	data () {
		return {
			Role:localStorage.getItem('Role') || '',
			
		};
	},
	methods: {
		/* 获取表格数据 */
		getTableData() {
			this.dataLoading = false;
			roadshowInterence.sellerStatistic({
				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] : '',
				CompanyType: this.departmentAct,
			}).then(res => {

				const { Data,Ret } = res;
				
				if(Ret !== 200) return
					
				//总合计数据处理
				this.totalGroupArr = this.filterTableData(Data.RsReportRecordNumList);

				//处理数据结构
				let data = _.cloneDeep(Data.List);
				data.forEach(item => {
					item.showDetail = this.departmentAct == '权益' ? true : false;
					let groupDataArr = this.filterTableData(item.RsReportRecordNumList);
					this.$set(item,'subGroupArr',groupDataArr)

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

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

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

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

</style>