<template>
	<div class="common-page qyzz page-t1">
		<div class="option page-row">
			<table-filter
				ref="filter" 
				:form="form"
				:Dict="Dict"
				:rules="rules"
				:config="form.config"
				:loadData="loadData"
			/>
		</div>
		<div class="panel-bottom page-row">
			<div class="ctin-box">
				<div class="content-within">
					<div class="content-fix">
						<div class="toolbar">
							<div>
								<el-button v-for="(item, key) in form.config.otherBtn" size="mini" :type="item.type" :icon="item.icon" @click="item.callback.call(_self, $event)">{{item.name}}</el-button>
							</div>
							<div>
								<el-button v-for="(item, key) in form.config.rightBtn" size="mini" :type="item.type" :icon="item.icon" @click="item.callback.call(_self, $event)">{{item.name}}</el-button>
							</div>
						</div>
						<!-- 表格渲染 -->
						<cu-table
							ref="cuTable" 
							:table="table"
							:Dict="Dict"
							:config="form.config"
							:loadData="loadData"
						/>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单渲染 -->
		<cu-form
			ref="cuForm" 
			:form="form"
			:Dict="Dict"
			:rules="rules"
			:submit="submitForm" 
			:cancel="cancelForm"
			:watchKeys="['paperfilename']"
		/>

		<div class="el-message-box__wrapper " style="z-index:2001;background-color:rgba(0, 0, 0, 0.5);" v-if="popupTabel.status.cu" ><div class="kmb-message-box custom-alert"><div class="el-message-box__content" style="min-width:300px;width:undefined"><div class="alert-ctbox">
		<div style="width:13rem;min-height:75vh;position:relative;">
			<div class="p-head scrolling4" style="margin-top:30px;">
				<el-table :data="popupTabel.dataList" v-loading="popupTabel.loading" border style="width:auto">
					<el-table-column prop="incubatorName" label="孵化器名称"></el-table-column>
					<el-table-column prop="year" label="年度"></el-table-column>
					<el-table-column prop="totalRevenue" label="孵化器总收入(万元)"></el-table-column>
					<el-table-column prop="serviceRevenue" label="综合服务收入(万元)"></el-table-column>
					<el-table-column prop="rentRevenue" label="房租及物业收入(万元)"></el-table-column>
					<el-table-column prop="investmentRevenue" label="投资收入(万元)"></el-table-column>
					<el-table-column prop="otherRevenue" label="其他收入(万元)"></el-table-column>
				</el-table>
				<!--分页组件-->
				<!-- <el-pagination v-if="config.pagination!==false" :total="table.total" :current-page="table.page" style="margin-top:8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" /> -->
			</div>
		</div>
		</div></div><button class="el-message-box__headerbtn el-icon-close" @click="popupTabel.close"></button></div></div>
	</div>
</template>

<script>
import { reqApi, Config } from '@/assets/js/httpApi.js';
import { Tools } from '@/assets/js/common.js';
import DateRangePicker from '@/components/DateRangePicker';
import TableFilter from '@/components/TableFilter';
import cuForm from '@/components/cuForm';
import cuTable from '@/components/cuTable';

export default {
	name: 'Dashboard',
	components: {
		DateRangePicker, TableFilter, cuForm, cuTable
	},
	data() {
		return {
			Dict:{selectList:[]},
			table:{
				page: 1,
				size: 10,
				total: 0,
				loading: false,
				dataList:[],
			},
			rules: {},
			form: {
				title:'', visible:false, reqType:'add', historyDialog:false,
				status:{cu:0},
				query:{},
				search:{},
				item:{},
				file:0,
				config:{},
			},
			popupTabel:{
				status:{cu:0},
				page: 1,
				size: 10,
				total: 0,
				loading: false,
				dataList:[],
			},
		}
	},
	created(){
		// 获取基本信息
		this.pageApi = Config.getModuleInfo(this);
		this.Dict = this.pageApi.Dict;
		this.form.config = this.pageApi.config;
		this.rules = reqApi.getRules(this.Dict.baseInfo) || (this.Dict.rules || {});
		this.pageApi.created && this.pageApi.created();
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData();
		});

		// 获取选择列表字典
		var selectList = this.Dict.selectList;
		Tools.asyncLoop.call(this, selectList, function(key, value, next){
			if(typeof value === 'function'){
				value.call(this.Dict).then(function(res){
					selectList[key] = res; next();
				})
			}else{next()};
		});
	},
	methods: {
		loadData:reqApi.common.getRequst,
		cancelForm(){
			this.form.visible = false;
		},
		submitForm(form, item){
			reqApi.common.submitForm.call(this, form, item);
		},
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
	.el-table thead th{
		color: #666;
		background-color: #f8f8f8;
	}
	.p-head{position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;}
</style>
