<template>
	<div class="dataReport-container">
		<div class="dataReport-main first">
			<div class="main-top" style="display:flex;align-items: center;">
				<a :href="exportExcel" download>
					<el-button type="primary" style="marginRight:10px;marginBottom:8px;">导出EXCEL</el-button>
				</a>
				<date-picker
				v-model="filterObj.date" 
				type="month"
				range 
				value-type="format"
				placeholder="请选择月份区间"
				:clearable="false"
				:editable="false"
				@change="dateChange"
				style="marginRight:10px;marginBottom:8px;"/>
				<!-- <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>
				<el-input
				placeholder="请输入客户名称"
				v-model="searchVal"
				style="maxWidth:400px;margin-left:auto;marginBottom:8px;"
				@input="handleSearch"
				clearable>
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="main-section">
				<el-row :gutter="30">
					<el-col 
					:span="12" 
					v-for="item in data_typeArr"
					:key="item.label"
					>
						<el-card
						class="base-card" 
						shadow>
							<div slot="header" class="clearfix">
								<span>
									{{item.label}}
									<el-tooltip
									class="item" 
									effect="dark"
									:content="item.label === '签约合同数' 
									? '合同起始日期在所选月份区间内的合同数'	
									: '合同金额的总和'" 
									placement="top">
										<i class="el-icon-info"></i>
									</el-tooltip>
								</span>
							</div>
							<div class="card-cont">
								{{
									item.label === '签约合同数' 
									? TotalContract
									: item.label === '签约合同总金额' 
									? TotalMoney
									:""
								}}
							</div>
						</el-card>
					</el-col>	
				</el-row>
			</div>
			<el-table
				:data="tableData"
				border
				style="margin-top: 20px;min-height:400px"
				v-loading="isShowloadding"
				element-loading-text="数据加载中..."
			>
			<template v-for="item in incomeTableColums">
				<el-table-column 
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				align="center"
				v-if="!item.dataType || item.dataType.split(',').includes(filterObj.data_type)">
					<template slot-scope="scope">
						<span :style="item.textsty" @click="jumpHandle(scope.row,item)">
							{{
								item.label=='服务期限'&&scope.row.StartDate.indexOf('/')==-1
								? scope.row.StartDate.replace(/-/g,'.')+'~'+scope.row.EndDate.replace(/-/g,'.') 
								: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] 
							}}
						</span>
						<span v-if="item.action" :style="item.textsty">
							<el-popover
							placement="right"
							width="400"
							trigger="click">
								<div style="display: flex;justify-content:space-between;font-size:16px">
									<h3>查看权限</h3>
									<!-- <i class="el-icon-close" style="font-size:20px"></i> -->
								</div>
								<ul style="margin:20px 0;">
									<li style="margin-bottom: 15px;display:flex;align-items:center;flex-wrap:wrap;" v-for="auth in perssionList" :key="auth.ClassifyName">
										<span style="color: #409EFF;margin-right: 10px;">{{auth.ClassifyName}}:</span>
										<template v-for="sub_auth in auth.PermissionList">
											<el-tag
												size="mini"
												style="margin: 5px 8px;"
												:key="sub_auth.ChartPermissionName">
												{{sub_auth.ChartPermissionName}}
											</el-tag>
										</template>
									</li>
								</ul>
								<span class="editsty" slot="reference" @click="openDia(scope.row)">查看权限详情</span>
							</el-popover>
						</span>
					</template>
				</el-table-column>
			</template>
				<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 { incomeTableColums } from './configdata.js'
import { filterMoney } from '@/common/js/util'
import { dataMainInterface,customInterence } from '@/api/api.js'
import mPage from '@/components/mPage.vue'
import ContractDia from './components/ContractDialog.vue'
var moment = require('moment');
moment().format();
export default {
	name:'',
	components: { mPage,ContractDia },
	computed: {
		exportExcel() {
			let baseUrl = process.env.API_ROOT + "/statistic_report/income_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.filterObj.date[1],
				StartDate: this.filterObj.date[0],
				Keyword:this.searchVal,
				IsExport:true,
			};
			for (let key in obj) {
				paramStr = `${paramStr}&${key}=${obj[key]}`;
			}
			return `${baseUrl}?${token}${paramStr}`;
		},

		incomeTableColums() {
			return incomeTableColums;
		},
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		},
		//管理权限
		ManageType() {
			return localStorage.getItem('ManageType') || '';
		},
	},
	data () {
		return {
			searchVal:sessionStorage.getItem('incomeBack')?JSON.parse(sessionStorage.getItem('incomeBack')).searchVal:'',
			showTable:false,
			tableData:[],
			isShowloadding:false,
			start_date:'',
			end_date:'',
			/* 筛选条件 */
			filterObj: {
				date:[moment().format("YYYY-MM"),moment().format("YYYY-MM")],
				type:'',
				sale: '',
				area: ''
			},
			salesArr:[],//销售列表
			defaultSalesProps:{
				multiple: true,
				label:'RealName',
				children:'ChildrenList',
				value:'AdminId'
			},//销售级联配置
			typeArr:[
				{
					name:'ficc'
				},{
					name:'权益'
				}
			],//类型
			areaArr:['国内','海外'],
			pageSize:10,
			page_no: sessionStorage.getItem('incomeBack')?JSON.parse(sessionStorage.getItem('incomeBack')).page_no:1,
			total:0,
			data_typeArr:[
				{
					label:'签约合同数'
				},
				{
					label:'签约合同总金额'
				},
			],//数据类型
			TotalContract:0,//总合同数
			TotalMoney:0,//总金额
			perssionList: [],//权限列表

		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no: this.page_no,
			filterObj: this.filterObj,
			start_date: this.start_date,
			end_date: this.end_date,
			searchVal:this.searchVal
		}
		sessionStorage.setItem('incomeBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('incomeBack')
		}
		next()
	},
	methods: {
		// 搜索
		handleSearch(){
			if(!this.searchVal){
				this.page_no=1
				this.filterObj= {
					date:[moment().format("YYYY-MM"),moment().format("YYYY-MM")],
					type:'',
					sale: '',
					area: ''
				}
				this.getTableData()
				return
			}
			this.page_no=1
			this.filterObj= {
				date:[],
				type:'',
				sale: '',
				area: ''
			}
			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.filterObj.date[1],
				StartDate: this.filterObj.date[0],
				Keyword:this.searchVal
			}
			dataMainInterface.incomeList(params).then(res => {
				if(res.Ret === 200) {
					this.tableData = res.Data.List || [];
					this.total = res.Data.Paging.Totals;
					this.TotalContract = res.Data.Total;
					this.TotalMoney = filterMoney(res.Data.Money);
					this.showTable = true;
					this.isShowloadding=false
				}
			})
		},
		/* 获取销售 */
		getSale() {
			customInterence.getSale().then(res => {
				if(res.Ret === 200) {
					this.salesArr = res.Data.List;
				}
			})
		},
		/* 筛选改变时 */
		changeFilter() {
			this.page_no = 1;
			this.searchVal=''
			this.getTableData()
		},
		/* 选择时间 */
		dateChange(e) {
			if(e[0]) {
				this.start_date = e[0];
				this.end_date = e[1];
			}else {
				this.start_date = '';
				this.end_date = '';
			}
			this.page_no = 1;
			this.searchVal=''
			this.getTableData();
		},
		/* 切换页码 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData()
		},
		// 操作
		actionHandle(row) {
			this.sendObj = row;
			this.isOpenDia = true;
		},
		/* 跳转 */
		jumpHandle(row,item) {
			if(item.link) {
				this.$router.push({
					path: '/customDetail',
					query: {
						id:row.CompanyId
					}
				})
			}
		},
		/* 查看权限 */
		openDia(row) {
			this.perssionList = row.PermissionList;
		}
	},
	created() {},
	mounted() {
		this.getSale();
		if(sessionStorage.getItem('incomeBack')) {
			let backData = JSON.parse(sessionStorage.getItem('incomeBack'));
			this.page_no = backData.page_no
			this.filterObj = backData.filterObj
			this.start_date = backData.start_date
			this.end_date = backData.end_date
			this.searchVal=backData.searchVal
		}
		this.getTableData();
	
	},
}
</script>
<style lang='scss'>
@import './index.scss';
</style>