<template>
	<div class="dataReport-container">
		<div class="dataReport-top">
			<a :href="exportExcel" download>
				<button class="button-sty act">导出EXCEL</button>
			</a>
			<button 
			:class="['button-sty',{'act':filterObj.month===item.label}]"
			v-for="item in monthLabel"
			@click="toggleMonth(item.label)"
			:key="item.label">
				{{item.label}}
			</button>
			<date-picker
			v-model="filterObj.date" 
			type="date" 
			range
			value-type="format"
			placeholder="自定义时间段"
			:clearable="false"
			:editable="false"
			:disabled-date="disabledBeforeToday"
			@change="dateChange"/>
			<el-input
			placeholder="请输入客户名称"
			v-model="searchVal"
			style="maxWidth:400px;margin-left:auto"
			@input="handleSearch"
			clearable>
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
		</div>
		<div class="dataReport-main">
			<div class="main-top">
				<!-- <el-select 
				v-model="filterObj.sale" 
				placeholder="请选择销售" 
				style="width:150px;marginRight:10px;marginBottom:8px;" 
				v-if="Role=='admin'||Role=='ficc_admin'||Role=='rai_admin'||ManageType!=0" 
				clearable  
				@change="changeFilter" 
				filterable>
					<el-option
						v-for="item in salesArr"
						:key="item"
						:label="item.RealName"
						:value="item.AdminId">
					</el-option>
				</el-select> -->
				<el-cascader
					v-if="Role=='finance'||Role=='admin'||Role=='ficc_admin'||Role=='rai_admin'||ManageType!=0"
					v-model="filterObj.sale"
					placeholder="请选择销售"
					style="min-width:250px;marginRight:10px;marginBottom:8px;"
					:options="salesArr"
					:props="defaultSalesProps"
					:show-all-levels="false"
					collapse-tags
					clearable
					filterable
					@change="changeFilter">
				</el-cascader>
				<el-select 
				v-model="filterObj.type" 
				placeholder="请选择客户类型" 
				style="width:150px;marginRight:10px;marginBottom:8px;" 
				v-if="Role=='finance'||Role=='admin'"
				clearable
				@change="changeFilter">
					<el-option
						v-for="item in typeArr"
						:key="item"
						:label="item.name"
						:value="item.name">
					</el-option>
				</el-select>
				<el-select 
				v-model="filterObj.area" 
				placeholder="请选择所属区域" 
				style="width:150px;marginRight:10px;marginBottom:8px;" 
				clearable
				@change="changeFilter">
					<el-option
						v-for="item in areaArr"
						:key="item"
						:label="item"
						:value="item">
					</el-option>
				</el-select>
			</div>
			<div class="main-section">
				<el-card class="main-card" shadow>
					<div slot="header" class="clearfix">
						<span>
							即将到期客户数
							<el-tooltip
							class="item" 
							effect="dark"
							content="服务期限截止日期在所选时间段内的客户"
							placement="top-start">
								<i class="el-icon-info"></i>
							</el-tooltip>
						</span>
					</div>
					<div class="card-cont">{{totalCompany}}</div>
				</el-card>
			</div>
			<el-table
				:data="tableData"
				border
				style="margin-top: 20px;min-height:400px"
				v-loading="isShowloadding"
				element-loading-text="数据加载中..."
			>
				<el-table-column 
				v-for="item in expringTableColums" 
				:key="item.label" 
				:label="item.label"
				:width="item.widthsty"
				align="center">
					<template slot-scope="scope">
						<span :style="item.textsty" @click="jumpHandle(scope.row,item)">
							{{
								item.label=='服务期限'&&scope.row.StartDate.indexOf('/')==-1
								? scope.row.StartDate+'~'+scope.row.EndDate 
								:item.label=='服务期限'&&scope.row.StartDate.indexOf('/')!=-1
								?scope.row.StartDate.substr(0,10)+'~'+scope.row.EndDate.substr(0,10)+'/'+scope.row.StartDate.substr(11)+'~'+scope.row.EndDate.substr(11)
								:scope.row[item.key] |formatTime
							}}
						</span>
					</template>
				</el-table-column>
				<div slot="empty" style="lineHeight:44px;margin:60px 0;color:#999;">
					<img src="~@/assets/img/cus_m/nodata.png" alt="" style="display:block;width:160px;height:128px;margin: auto;">
					<span>暂无数据</span>
				</div>
			</el-table>
			<el-col :span="24" class="toolbar" v-if="total">
				<m-page
				:total="total"
				:page_no="page_no"
				@handleCurrentChange="handleCurrentChange"/>
			</el-col>
		</div>
	</div>
</template>

<script>
import { expringTableColums } from './configdata.js'
import { dataMainInterface,customInterence } from '@/api/api.js'
import mPage from '@/components/mPage.vue'
var moment = require('moment');
moment().format();
export default {
	name:'',
	components: {mPage},
	computed: {
		expringTableColums() {
			return expringTableColums;
		},
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		},
		//管理权限
		ManageType() {
			return localStorage.getItem('ManageType') || '';
		},
		exportExcel() {
			let baseUrl = process.env.API_ROOT + "/statistic_report/will_expire_list";
			let token = localStorage.getItem("auth") || "";
			let paramStr = "";
			let salesArr=[]
			if(this.filterObj.sale.length){
				salesArr=this.filterObj.sale.map(item=>{
					return item[item.length-1]
				})
			}
			let obj = {
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				CompanyType: this.filterObj.type,
				AdminId: salesArr.join(','),
				RegionType: this.filterObj.area,
				EndDate: this.end_date,
				StartDate: this.start_date,
				Keyword:this.searchVal,
				IsExport:true
			};
			for (let key in obj) {
				paramStr = `${paramStr}&${key}=${obj[key]}`;
			}
			return `${baseUrl}?${token}${paramStr}`;
		},
	},
	data () {
		return {
			searchVal:sessionStorage.getItem('expiringListBack')?JSON.parse(sessionStorage.getItem('expiringListBack')).searchVal:'',//搜索关键词
			isShowloadding:false,
			start_date:'',
			end_date:'',
			/* 筛选条件 */
			filterObj: {
				month:'未来1个月',
				date:[],
				type:'',
				sale: '',
				area: ''
			},
			monthLabel: [
				{
					label: "未来1个月"
				},
				{
					label: "未来2个月"
				},
				{
					label: "未来3个月"
				}
			],
			salesArr:[],//销售列表
			defaultSalesProps:{
				multiple: true,
				label:'RealName',
				children:'ChildrenList',
				value:'AdminId'
			},//销售级联配置
			typeArr:[
				{
					name:'ficc'
				},{
					name:'权益'
				}
			],//类型
			areaArr:['国内','海外'],
			pageSize:10,
			page_no:sessionStorage.getItem('expiringListBack')?JSON.parse(sessionStorage.getItem('expiringListBack')).page_no:1,
			total:0,
			totalCompany:0,//总客户数
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no: this.page_no,
			end_date: this.end_date,
			start_date: this.start_date,
			filterObj: this.filterObj,
			searchVal:this.searchVal,
		}
		sessionStorage.setItem('expiringListBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('expiringListBack')
		}
		next()
	},
	methods: {
		// 搜索
		handleSearch(){
			if(!this.searchVal){
				this.page_no=1
				this.filterObj= {
					month:'未来1个月',
					date:[],
					type:'',
					sale: '',
					area: ''
				}
				let date_now = moment().format("YYYY-MM-DD");
				let date_after = moment().add(1,'M').format("YYYY-MM-DD");
				let date = [date_now,date_after]
				this.start_date = date_now;
				this.end_date = date_after;
				this.filterObj.date = date;
				this.getTableData()
				return
			}
			this.page_no=1
			this.filterObj= {
				month:'',
				date:[],
				type:'',
				sale: '',
				area: ''
			}
			this.start_date = '';
			this.end_date = '';
			this.getTableData()
		},

		/* 获取表格 */
		getTableData() {
			// 处理销售筛选
			let salesArr=[]
			if(this.filterObj.sale.length){
				salesArr=this.filterObj.sale.map(item=>{
					return item[item.length-1]
				})
			}
			this.isShowloadding = true;
			let params = {
				PageSize:this.pageSize,
				CurrentIndex:this.page_no,
				CompanyType: this.filterObj.type,
				AdminId: salesArr.join(','),
				RegionType: this.filterObj.area,
				EndDate: this.end_date,
				StartDate: this.start_date,
				Keyword:this.searchVal,
			}
			dataMainInterface.expireList(params).then(res => {
				if(res.Ret === 200) {
					this.tableData = res.Data.List || [];
					this.total = res.Data.Paging.Totals;
					this.totalCompany = res.Data.TotalCompany;
					this.isShowloadding = false;
				}
			})
		},
		/* 获取销售 */
		getSale() {
			customInterence.getSale().then(res => {
				if(res.Ret === 200) {
					this.salesArr = res.Data.List;
				}
			})
		},
		/* 切换月份 */
		toggleMonth(label) {
			this.filterObj.month = label;
			let days = label=='未来1个月' ? 1 : label=='未来2个月' ? 2 : label=='未来3个月' ? 3 : 0;
			this.filterDate(days)
		},
		/* 选择服务日期 */
		dateChange(e) {
			if(e[0]) {
				this.start_date = e[0];
				this.end_date = e[1];
			}else {
				this.start_date = '';
				this.end_date = '';
			}
			this.filterObj.month = '';
			this.page_no = 1;
			this.searchVal=''
			this.getTableData();
		},
		/* 筛选改变时 */
		changeFilter() {
			this.page_no = 1;
			this.searchVal=''
			this.getTableData()
		},
		/* 切换页码 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData()
		},
		/* 定义今天之前的日期不可选择 */
		disabledBeforeToday(date) {
			const today = new Date();
			today.setHours(0, 0, 0, 0);
			return date < today;
		},
		/* 获取未来几个月的日期范围 */
		filterDate(month) {
			if(month) {
				let date_now = moment().format("YYYY-MM-DD");
				let date_after = moment().add(month,'M').format("YYYY-MM-DD");
				let date = [date_now,date_after]
				this.start_date = date_now;
				this.end_date = date_after;
				this.filterObj.date = date;	
				this.page_no = 1;
				this.searchVal=''
				this.getTableData();
			}
		},
		/* 跳转 */
		jumpHandle(row,item) {
			if(item.link) {
				this.$router.push({
					path: '/customDetail',
					query: {
						id:row.CompanyId
					}
				})
			}
		}
	},
	created() {},
	mounted() {
		this.getSale();
		if(sessionStorage.getItem('expiringListBack')) {
			let backData = JSON.parse(sessionStorage.getItem('expiringListBack'));
			this.page_no = backData.page_no
			this.end_date = backData.end_date
			this.start_date = backData.start_date
			this.filterObj = backData.filterObj
			this.searchVal=backData.searchVal
		}
		/* 默认选中未来1个月 */
		this.filterDate(this.filterObj.month === '未来1个月' ? 1 : this.filterObj.month === '未来2个月' ? 2 : this.filterObj.month === '未来3个月' ? 3 : 0);
	
	},
}
</script>
<style lang='scss'>
@import './index.scss';
</style>