<template>
  <div class="statistic-container" ref="reference">
    <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 rowspan="2" class="thead-rs-typeTwo">
              未续约
              <el-tooltip 
								effect="dark" 
								placement="top-start" 
								:content="tipMap.get('未续约')"
                v-if="['周度统计表'].includes(default_tab)"
							>
                <i class="el-icon-info"/>
							</el-tooltip>
            </td>
						<td rowspan="2" class="thead-rs-typeTwo">
              续约跟进
              <el-tooltip 
								effect="dark" 
								placement="top-start" 
								:content="tipMap.get('续约跟进')"
                v-if="['周度统计表'].includes(default_tab)"
							>
                <i class="el-icon-info"/>
							</el-tooltip>
            </td>
						<td
							:colspan="['周度统计表','月度统计表'].includes(default_tab) ? 2 : 1"
							v-for="item in contractTableThead"
							: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'">
								到期
							<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('续约')"
								>
									<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'">到期</td>
							<td :key="index+'_1'">续约</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 rowspan="2" class="thead-rs-typeTwo">
								未续约
								<el-tooltip 
									effect="dark" 
									placement="top-start" 
									:content="tipMap.get('未续约')"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
							</td>
							<td rowspan="2" class="thead-rs-typeTwo">
								续约跟进
								<el-tooltip 
									effect="dark" 
									placement="top-start" 
									:content="tipMap.get('续约跟进')"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
							</td>
							<td
								:colspan="['周度统计表','月度统计表'].includes(default_tab) ? activeTab.tabName !== 'QY'? 3:2 : 1"
								v-for="item in contractTableThead"
								:key="item" 
								class="head-column"
							>
								{{item}}
								<el-tooltip 
									effect="dark" 
									placement="top-start"
									v-if="!['周度统计表','月度统计表'].includes(default_tab)"
									:content="tipMap.get(item)"
								>
									<i class="el-icon-info"/>
								</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('续约')"
									>
										<i class="el-icon-info"/>
									</el-tooltip>
								</td>
								<td :key="index+'_2'" v-if="activeTab.tabName !== 'QY'">
									续约异常
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('续约异常')"
									>
										<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('续约')"
									>
										<i class="el-icon-info"/>
									</el-tooltip>
								</td>
								<td :key="index+'_2'" v-if="activeTab.tabName !== 'QY'">
									续约异常
									<el-tooltip 
										effect="dark" 
										placement="top-start" 
										v-if="index === 0"
										:content="tipMap.get('续约异常')"
									>
										<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 v-if="item.Item.length" :class="item.showDetail?'el-icon-arrow-up':'el-icon-arrow-down'"></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)" 
									>
										{{ group_data.value !== 0 ? group_data.value : '' }}
									</span>
								</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',{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>
									</td>
									
								</tr>
							</template>	
					</tbody>

					<tfoot>
						<tr>
							<td colspan="2">{{activeTab.tabSummationName}}</td>
							<td>
								<span>
									{{ notRenewNumAll !== 0 ? notRenewNumAll : '' }}
								</span>
							</td>
							<td>
								<span>
									{{ renewFollowNumAll !== 0 ? renewFollowNumAll : '' }}
								</span>
							</td>
							<td v-for="(item,index) in totalGroupArr" :key="index">
								<span>
									{{ item.value !== 0 ? item.value : '' }}
								</span>
							</td>
						</tr>
						<tr v-if="activeTab.tabName !== 'QY'">
							<td colspan="2">
								<span>异常率</span>
								<el-tooltip 
									effect="dark" 
									placement="top-start" 
									:content="tipMap.get('异常率')"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
							</td>
							<td>
								<span></span>
							</td>
							<td>
								<span></span>
							</td>
							<template v-if="['周度统计表','月度统计表'].includes(default_tab)">
								<td v-for="(item,index) in UnusualRateArr" :key="index" colspan="3">{{item.UnusualRate}}</td>
							</template>
							<template v-else>
								<td colspan="3">{{UnusualRateArr[0].UnusualRate}}</td>
							</template>
						</tr>
					</tfoot>
				</table>
			</div>	
		</div>
  </div>
</template>
<script>
import { dataMainInterface } from '@/api/api.js';
import mixin from './mixin';
import { defaultFormat } from 'moment';

export default {
  name:'contractCustom',
  mixins: [ mixin ],
  data() {
    return {
      	tipMap:new Map([
			['未续约','之前是正式客户，现在是冻结或流失状态的客户'],
			['续约跟进','之前是正式客户，现在是试用状态且未经历过冻结或流失状态的客户'],
			['到期','合同到期时间在统计时间段内的客户'],
			['续约','续约申请审批通过时间在所选时间段内的客户'],
			['续约异常','合同到期后两个月内未签约 '],
			['异常率','异常率=当期续约异常客户总数/截止当期系统中存量客户总数']

		]),
		notRenewNumAll:0, // 未续约总合计
		renewFollowNumAll:0, // 续约跟进总合计
		UnusualRateArr:[],
    }
  },
  computed:{
    contractTableThead:function(){
      if(['周度统计表','月度统计表'].includes(this.default_tab)){
        return this.tableTheadColumns
      }
      return this.activeTab.tabName !== 'QY'?['到期','续约','续约异常']:['到期','续约']
    }
  },
  created(){
    this.getTableData()
  },
	beforeRouteEnter (to, from, next) {
		// 从续约客户列表进来才使用 renewalTab
		if(from.path != '/contractCustomlist'){
			sessionStorage.removeItem('renewalTab')
		}
		next()
	},
  methods: {
    getTableData() {
			this.dataLoading = false;
			dataMainInterface.renewalCustomStatistic({
				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.CompanyRenewRecordNumList,{},'renew');
				this.notRenewNumAll = Data.CompanyRenewRecordNumList[0].NotRenewNum
				this.renewFollowNumAll = Data.CompanyRenewRecordNumList[0].RenewFollowNum
				// 异常率处理
				this.UnusualRateArr= Data.CompanyRenewRecordNumList||[]
				//处理数据结构
				let data = []
				if(this.activeTab.productionId ==1){
					// FICC
					data = _.cloneDeep(Data.List).sort((a,b) => b.Item.length - a.Item.length);
                    //data.push({Item: [], GroupId: 37, Name: "共享客户组", CompanyRenewRecordNumList: []})
				}else{
					data=_.cloneDeep(Data.List)
				}
				

				data.forEach(item => {
					item.showDetail=false
					let groupDataArr = this.filterTableData(item.CompanyRenewRecordNumList,{
						rs_name: item.Name + '合计'
					},'renew');
					// 将 未续约 和 续约跟进 加入
                    if(item.CompanyRenewRecordNumList[0]){
                        groupDataArr.unshift({
                            key: '未续约',
                            value: item.CompanyRenewRecordNumList[0].NotRenewNum,
                            ids: item.CompanyRenewRecordNumList[0].NotRenewIds,
                            rs_name: item.Name + '合计'
                        },{
                            key: '续约跟进',
                            value: item.CompanyRenewRecordNumList[0].RenewFollowNum,
                            ids: item.CompanyRenewRecordNumList[0].RenewFollowIds,
                            rs_name: item.Name + '合计'
                        })
                    }
					this.$set(item,'subGroupArr',groupDataArr)

					item.Item && item.Item.forEach(sub_item => {
						
						let dataArr = this.filterTableData(sub_item.CompanyRenewRecordNumList,{
							rs_name : sub_item.Name,
						},'renew')
						// 将 未续约 和 续约跟进 加入
						dataArr.unshift({
							key: '未续约',
							value: sub_item.CompanyRenewRecordNumList[0].NotRenewNum,
							ids: sub_item.CompanyRenewRecordNumList[0].NotRenewIds,
							rs_name : sub_item.Name,
						},{
							key: '续约跟进',
							value: sub_item.CompanyRenewRecordNumList[0].RenewFollowNum,
							ids: sub_item.CompanyRenewRecordNumList[0].RenewFollowIds,
							rs_name : sub_item.Name,
						})
						this.$set(sub_item,'dataArr',dataArr)
					})
				})

				this.datalist = data.filter(i=>i.CompanyRenewRecordNumList.length);
				this.dataLoading = true;
				// const dynamic_width = {
				// 	'周度统计表': '5%',
				// 	'月度统计表': '5%',
				// }
				// // console.log(this.datalist,'this.datalist');
				// this.$nextTick(() => {
				// 	this.dataLoading = true;
				// 	$('table').find('td').css({ width: dynamic_width[this.default_tab]?dynamic_width[this.default_tab]:'20%'})
				// 	$('table').find('.thead-rs').css({ width: dynamic_width[this.default_tab] ? dynamic_width[this.default_tab] : '120px' })
				// 	$('table').find('.thead-rs-typeTwo').css({ 
				// 		width: dynamic_width[this.default_tab] ? dynamic_width[this.default_tab] : '20%' ,
				// 		backgroundColor:dynamic_width[this.default_tab] ? "#fff" :"#F0F2F5"})
				// 	$('table').find('.head-column').css({ width: dynamic_width[this.default_tab] ? dynamic_width[this.default_tab] : '20%' })
				// })
			})
    },
    /* 进入列表 */
    goList({value,rs_name,ids,key},index, parent) {
      if(!parent.length || !value) return
      let column_title = this.getColumnTitle(index);
			let title=''
			if(['未续约','续约跟进'].includes(key)){
				title =  encodeURIComponent(`${rs_name}/${key}`);
			}else{
				title =  encodeURIComponent(`${column_title}/${rs_name}/${key}`);
			}
			sessionStorage.setItem('renewalTab',this.activeTab.tabName)
      const{href}=this.$router.resolve({
        name: '续约客户列表',
        query: {
          ids: encodeURIComponent(ids),
          title
        }
      })
	  window.open(href,'_blank')
    },
    /* 获取数据对应表头 */
		getColumnTitle(index) {
			let title = '';

			if(['周度统计表','月度统计表'].includes(this.default_tab)) {
				title = [2,3,4].includes(index) 
				? this.tableTheadColumns[0] 
				: [5,6,7].includes(index) 
				? this.tableTheadColumns[1] 
				: [8,9,10].includes(index) 
				? this.tableTheadColumns[2] 
				: [11,12,13].includes(index) 
				? this.tableTheadColumns[3]
				: [14,15,16].includes(index) 
				? this.tableTheadColumns[4]
				: [17,18,19].includes(index) 
				? this.tableTheadColumns[5] 
				: '';
			} else {
				title = this.default_tab || `${this.select_date[0]}~${this.select_date[1]}`;
			}
			
			return title
		}
  }
}
</script>
<style lang="scss" scoped>
  @import './index.scss';

</style>