<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">
							<template v-for="(item, key) in form.config.otherBtn">
								<el-button v-if="item.fn==='toAdd'" size="mini" :type="item.type" :icon="item.icon" @click="toAdd">{{item.name}}</el-button>
							</template>
						</div>
						<!-- 表格渲染 -->
						<cu-table
							ref="cuTable" 
							:table="table"
							:Dict="Dict"
							:config="form.config"
							:toDownload="toDownload" 
							:toEdit="toEdit" 
							:toDelete="toDelete"
							:loadData="loadData"
						/>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单渲染 -->
		<cu-form
			ref="cuForm" 
			:form="form"
			:Dict="Dict"
			:rules="rules"
			:submit="submitForm" 
			:cancel="cancelForm"
			:upload="upload"
			:watchKeys="['paperfilename']"
		/>
	</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:{},
			},
		}
	},
	mounted() {
		var that = this;
		// 获取基本信息
		this.pageApi = Config.getModuleInfo(this);
		this.Dict = this.pageApi.Dict;
		this.form.search = this.Dict.search;
		this.form.config = this.pageApi.config;
		this.rules = reqApi.getRules(this.Dict.baseInfo) || (this.Dict.rules || {});
		
		this.$nextTick(() => {
			this.loadData();
		});

		// 获取选择列表字典
		var selectList = this.Dict.selectList;
		Tools.asyncLoop.call(this,selectList, function(key, value, next){
			if(typeof value === 'function'){
				value().then(function(res){
					selectList[key] = res;
					next();
				})
			}else{
				next();
			};
		});
	},
	methods: {
		// 点击搜索
		toSearch() {
			this.table.page = 1;
			this.loadData()
		},
		clearLimit(){		// 清除限制
			this.loadData()
		},
		loadData() {
			var searchItem = reqApi.common.getSearchParam(this.form);
			reqApi.common.getRequst.call(this, searchItem);
		},
		toAdd() {
			reqApi.common.toAdd.call(this);
		},
		toEdit(item) {
			reqApi.common.toEdit.call(this, item);
		},
		cancelForm(){
			this.form.visible = false;
		},
		toDelete(item) {
			reqApi.common.toDelete.call(this, item);
		},
		upload(e, key){
			reqApi.common.upload.call(this, e, key);
		},
		toDownload(item) {
			reqApi.common.toDownload.call(this, item);
		},
		submitForm(form, item){
			reqApi.common.submitForm.call(this, form, item);
		},
		reqRemoveItem(item){
			reqApi.common.removeRequst.call(this, item);
		},
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
	.qyzz{
	}
</style>
