<template>
    <div class="statistic-container" ref="reference">
        <div style="margin-bottom:20px;">

            <el-radio-group v-model="actFilterDay" @input="val => { actFilterDay=val;getTableData() }">
                <el-radio-button 
                    :label="item.value" 
                    v-for="item in filterDaysOptions" 
                    :key="item.value"
                >{{item.label}}</el-radio-button>
            </el-radio-group>
        </div>

        <div class="frequency-cont" style="position: relative;">
            <el-tabs v-model="default_tab" @tab-click="item =>{changeTabHandle(item.name)}" style="margin-right:20px">
                <el-tab-pane 
                    v-for="tab in staticTabs" 
                    :key="tab" 
                    :label="tab" 
                    :name="tab"
                />
            </el-tabs>
			<date-picker
                v-model="select_date"
                type="date" 
                range
                value-type="format"
                :clearable="false"
                @change="dateChange"
                placeholder="请选择统计时间"
            />
            <span style="color:#A3A3A3;display:inline-block;margin-left:20px">续约异常：{{filterDaysOptions.find(_=>_.value===actFilterDay).msg}}</span>

            <div style="color:#409EFF;position: absolute;top:10px;right:10px;cursor: pointer;" @click="showChart=true" v-if="actFilterDay===1">
                <img src="~@/assets/img/icons/changeLang.png" alt="">
                <span style="display:inline-block;position: relative;top:-3px;left:3px">统计图</span>
            </div>
        </div>
        <div class="table-cont" v-show="dataLoading">
            <div class="table-body-wrapper">
                <table>
                    <thead>
						<tr>
							<td class="thead-rs">销售</td>
                            <td 
                                v-for="item in tableThead"
								:key="item" 
								class="head-column"
                            >{{item}}</td>
						</tr>
					</thead>
                    <tbody>
                        <tr v-for="rs in sellerList" :key="rs.SellerId">
                            <td class="thead-rs">{{rs.SellerName}}</td>
                            <td 
								:class="['data-cell',{link: data.UnusualRenewNum}]" 
								v-for="data,index in rs.CompanyRenewRecordNumList" 
								:key="data.UnusualRenewIds"
							>		
								<span 
									@click="goList(data,index,rs)"
								>
									{{ data.UnusualRenewNum !== 0 ? data.UnusualRenewNum : '' }}
								</span>
							</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>合计</td>
                            <td 
                                :class="['data-cell',{link: item.UnusualRenewNum}]" 
                                v-for="item,index in summaryList" 
                                :key="item.UnusualRenewIds"
                            >
                                <span
                                    @click="goList(item,index,{SellerName:'合计'})"
                                >
                                    {{item.UnusualRenewNum||''}}
                                </span>
                            </td>
                        </tr>
                        <tr v-if="actFilterDay===1">
                            <td>
                                <span>异常率</span>
                                <el-tooltip 
									effect="dark" 
									placement="top-start" 
									content="异常率=当期续约异常客户总数/截止当期系统中存量客户总数"
								>
									<i class="el-icon-info"/>
								</el-tooltip>
                            </td>
                            <td v-for="item in summaryList" :key="item.UnusualRenewIds">{{item.UnusualRate||''}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <abnormalRenewalChart v-if="showChart" @close="showChart=false"/>
    </div>
</template>

<script>
import { dataMainInterface } from '@/api/api.js';
import mixin from './mixin';
import abnormalRenewalChart from '../components/abnormalRenewalChart.vue';
export default {
    name:'abnormalRenewal',
    mixins: [ mixin ],
    components:{abnormalRenewalChart},
    computed:{
        tableThead:function(){
            if(['周度统计表','月度统计表'].includes(this.default_tab)){
                return this.tableTheadColumns
            }
            return ['续约异常']
        }
    },

    data() {
        return {
            sellerList:[],
            summaryList:[],
            showChart:false,
        }
    },
    created() {
        this.getTableData()
    },
    methods:{

        getTableData(){
            this.dataLoading=true
            this.sellerList=[]
            this.summaryList=[]
            dataMainInterface.unusualRenewalCustomStatistic({
                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] : '',
                Source: this.actFilterDay
            }).then(res=>{
                const { Data,Ret } = res;
				if(Ret !== 200) return
                this.sellerList=Data.List||[]
                this.summaryList=Data.SummaryList||[]
            })
        },

        /* 进入列表 */
        goList({UnusualRenewNum,UnusualRenewIds},index,parent) {
            // if(!value) return
            let column_title = this.getColumnTitle(index);
            let filterDay = this.filterDaysOptions.find(_=>_.value===this.actFilterDay) ? `${this.filterDaysOptions.find(_=>_.value===this.actFilterDay).label}/` : ''
            let title=encodeURIComponent(`${filterDay}${column_title}/${parent.SellerName}`);
                    
            sessionStorage.setItem('renewalTab',this.activeTab.tabName)
            const{href}=this.$router.resolve({
                path: '/abnormalRenewalCustomlist',
                query: {
                    ids: encodeURIComponent(UnusualRenewIds),
                    title
                }
            })
            window.open(href,'_blank')
        },

        /* 获取数据对应表头 */
        getColumnTitle(index) {
			let title = '';

			if(['周度统计表','月度统计表'].includes(this.default_tab)) {
				title=this.tableTheadColumns[index] 
			} else {
				title = this.default_tab || `${this.select_date[0]}~${this.select_date[1]}`;
			}
			
			return title
		}
    }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
.statistic-container{
    height: calc(100vh - 180px);
    position: relative;
}
</style>
<style lang="scss">
.statistic-container{
    .el-tabs__header {
        margin-bottom: 0 !important;
    }
}    
</style>