<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;padding:12px 15px">导出EXCEL</el-button>
				</a>
				<!-- <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="minWidth:150px;marginRight:10px;marginBottom:8px;maxWidth:150px" 
				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="minWidth:150px;marginRight:10px;marginBottom:8px;maxWidth:150px" 
				clearable
				@change="changeFilter">
					<el-option
						v-for="item in areaArr"
						:key="item"
						:label="item"
						:value="item">
					</el-option>
				</el-select>
				<el-select
					v-if="selectType==='系统合同/上传附件'"
					v-model="filterObj.contractType"
					placeholder="请选择合同类型" 
					style="minWidth:150px;marginRight:10px;marginBottom:8px;maxWidth:150px" 
					clearable
					@change="changeFilter"
				>
					<el-option key="系统合同" label="系统合同" value="系统合同"></el-option>
					<el-option key="上传附件" label="上传附件" value="上传附件"></el-option>
				</el-select>
				<date-picker
				style="marginBottom:8px;minWidth:150px;max-width:150px"
				v-model="filterObj.date" 
				type="date" 
				value-type="format"
				placeholder="请选择日期"
				:clearable="false"
				:editable="false"
				@change="changeFilter"/>
				<el-input
				placeholder="请输入客户名称"
				v-model="searchVal"
				style="maxWidth:330px;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="36">
					<el-col 
					:span="6" 
					v-for="item in data_typeArr"
					:key="item.label"
					>
						<el-card 
						:class="['base-card',{'main-card':selectType===item.label}]"
						@click.native="handleChangeType(item.label)"
						shadow="hover">
							<div slot="header" class="clearfix" >
								<span>
									{{item.label}}
									<el-tooltip
									v-if="item.label!='系统合同/上传附件'"
									class="item" 
									effect="dark"
									:content="item.label === '有效合同总数' 
									? '当前未到期的合同总数量(合同截止日期≥所选日期)'
									: item.label === '有效合同总金额'
									? '当前未到期的合同金额总和'
									: item.label==='正式客户数'
									? '当前处于有效合同执行期的客户数'
									:''" 
									placement="top">
										<i class="el-icon-info"></i>
									</el-tooltip>
								</span>
							</div>
							<div class="card-cont">
								{{
									item.label === '有效合同总数' 
									? TotalContract
									: item.label === '有效合同总金额' 
									? TotalMoney
									: item.label === '正式客户数' 
									? TotalCompany
									: item.label==='系统合同/上传附件'
									? TotalContract2
									:''
								}}
							</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 contractTableColums">
				<el-table-column 
				:key="item.label"
				:label="item.label"
				:width="item.widthsty"
				align="center"
				v-if="!item.dataType || item.dataType.split(',').includes(selectType)">
					<template slot-scope="scope">
						<span :style="item.textsty" :class="item.link&&!scope.row.CompanyId?'no-link':''" @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]
							}}
						</span>
						<span v-if="item.action" :style="item.textsty" @click="actionHandle(scope.row)">
							{{ item.action.name }}
						</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>
		<!-- 弹窗 -->
		<ContractDia 
		:isOpenDia="isOpenDia"
		:item="sendObj"
		:date="filterObj.date"
		@cancel="isOpenDia=false"
		/>
	</div>
</template>

<script>
import { contractTableColums } 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/contract_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,
				Keyword:this.searchVal,
				IsExport:true,
				DataType:this.selectType==='系统合同/上传附件'?'类型数据':'',
				SourceType:this.filterObj.contractType,
			};
			for (let key in obj) {
				paramStr = `${paramStr}&${key}=${obj[key]}`;
			}
			return `${baseUrl}?${token}${paramStr}`;
		},

		contractTableColums() {
			return contractTableColums;
		},
		Role() {
			let role = localStorage.getItem('Role') || '';
			return role;
		},
		//管理权限
		ManageType() {
			return localStorage.getItem('ManageType') || '';
		},
	},
	data () {
		return {
			searchVal:sessionStorage.getItem('contractBack')?JSON.parse(sessionStorage.getItem('contractBack')).searchVal:'',
			showTable:false,
			tableData:[],
			isShowloadding:false,
			/* 筛选条件 */
			filterObj: {
				date:moment().format("YYYY-MM-DD"),
				type:'',
				sale: '',
				area: '',
				contractType:''
			},
			salesArr:[],//销售列表
			defaultSalesProps:{
				multiple: true,
				label:'RealName',
				children:'ChildrenList',
				value:'AdminId'
			},//销售级联配置
			typeArr:[
				{
					name:'ficc'
				},{
					name:'权益'
				}
			],//类型
			areaArr:['国内','海外'],
			pageSize:10,
			page_no: sessionStorage.getItem('contractBack')?JSON.parse(sessionStorage.getItem('contractBack')).page_no:1,
			total:0,
			data_typeArr:[
				{
					label:'有效合同总数'
				},
				{
					label:'有效合同总金额'
				},
				{
					label:'正式客户数'
				},
				{
					label:'系统合同/上传附件'
				}
			],//数据类型
			TotalContract:0,//总合同数
			TotalMoney:0,//总金额
			TotalCompany:0,//客户数
			TotalContract2:'0/0',//系统合同/上传附件 数
			/* 弹窗 */
			isOpenDia: false,
			sendObj:{},//传输的props
			
			selectType:sessionStorage.getItem('contractBack')?JSON.parse(sessionStorage.getItem('contractBack')).selectType:'有效合同总数',//选择的 四个 label
		};
	},
	/* 页面跳转前记录参数 */
	beforeRouteLeave(to, form, next) {
		let backData = {
			page_no: this.page_no,
			filterObj: this.filterObj,
			searchVal:this.searchVal,
			selectType:this.selectType
		}
		sessionStorage.setItem('contractBack',JSON.stringify(backData))
		next()
	},
	/* 页面进入前是否清除参数 */
	beforeRouteEnter(to,from,next) {
		if(from.path!='/customDetail') {
			sessionStorage.removeItem('contractBack')
		}
		next()
	},
	methods: {
		// 切换
		handleChangeType(e){
			this.selectType=e
			this.page_no=1
			this.getTableData()
		},

		// 搜索
		handleSearch(){
			this.page_no=1
			this.filterObj= {
				date:this.filterObj.date,
				type:'',
				sale: '',
				area: '',
				contractType:''
			}
			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,
				Keyword:this.searchVal,
				DataType:this.selectType==='系统合同/上传附件'?'类型数据':'',
				SourceType:this.filterObj.contractType,
			}
			dataMainInterface.contractList(params).then(res => {
				if(res.Ret === 200) {
					this.tableData = res.Data.List || [];
					this.tableData.forEach(item => {
						if(item.CreateTime){
							item.CreateTime=item.CreateTime.replace(/-/g,'.')
						}
					})
					this.total = res.Data.Paging.Totals;
					this.TotalContract = res.Data.TotalContract;
					this.TotalMoney = filterMoney(res.Data.TotalMoney);
					this.TotalCompany = res.Data.TotalCompany;
					this.TotalContract2=`${res.Data.TotalSystemContract}/${res.Data.TotalFileContract}`
					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()
		},
		/* 切换页码 */
		handleCurrentChange(page) {
			this.page_no = page;
			this.getTableData()
		},
		// 操作
		actionHandle(row) {
			this.sendObj = {...row,selectType:this.selectType};
			this.isOpenDia = true;
		},
		/* 跳转 */
		jumpHandle(row,item) {
			if(item.link) {
				if(!row.CompanyId) return
				this.$router.push({
					path: '/customDetail',
					query: {
						id:row.CompanyId
					}
				})
			}
		}
	},
	created() {},
	mounted() {
		this.getSale();
		if(sessionStorage.getItem('contractBack')) {
			let backData = JSON.parse(sessionStorage.getItem('contractBack'));
			this.page_no = backData.page_no
			this.filterObj = backData.filterObj
			this.searchVal=backData.searchVal
		}
		this.getTableData();
	
	},
}
</script>
<style lang='scss'>
@import './index.scss';
.no-link{
	color: #333 !important;
	cursor: default !important;
}
</style>