
<!-- 
/**
  * 表单通用组件
  *	@example1: 
		1, 引入
			import cuTable from '@/components/cuTable';

		2, 注册
			export default {
				components: {
					cuTable
				},
				data() {
					return {
						Dict:{selectList:[]},
						table:{
							page: 1,
							size: 10,
							total: 0,
							loading: false,
							dataList:[],
						},
						rules: {},
					}
				},
				mounted(){
					// 获取基本信息
					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 || {});
				},
				methods: {
					loadData(searchItem) {
						var that = this;
						//reqApi.common.getRequst.call(this, searchItem);
					},
				}
			}
		
		3, 创建
			<cu-table
				ref="cuTable" 
				:table="table"
				:Dict="Dict"
				:config="form.config"
			/>

		#4, 使用
  * @author: Kimber
  * @updatetime: 2022/5/13(周五)
  * @createtime: 2021/12/09
  */
-->
<template>
	<div class="content cu-table">
		<!-- :style="'width:'+ (item.fixed ? '400px' : 'auto') +" -->
		<el-table :data="table.dataList" v-loading="table.loading" border style="width: 100%;" :row-class-name="tableRowClassName">
			<template v-for="(item, key) in Dict.baseInfo" v-if="item.table !== 0 && item.showYN !==false" >
				<el-table-column v-if="item.type === 'select'" :prop="key" :label="item.name" :fixed="fixed" :width="item.width||'200px'">
					<template slot-scope="scope">
						<template v-for="sitem in Dict.selectList[key]">
							<template v-if="typeof scope.row[key] === 'object'">
								<span v-for="val in scope.row[key]" v-if="val===sitem[item.val||'value']">
									{{sitem[item.key||'name']}}， 
								</span>
							</template>
							<span v-else-if="sitem[item.val||'value']===scope.row[key]" class="orange" :style="'color:'+(sitem.color||'')+';'">
								<i v-if="item.icon" :class="item.icon" style="font-size:16px;"></i>{{sitem[item.key||'name']}}
							</span>
						</template>
					</template>
				</el-table-column>
				<el-table-column v-else-if="item.type === 'img'" :prop="key" :label="item.name" width="150px">
					<img slot-scope="scope" :src="item.src ? item.src.call(_self, scope.row, key) :scope.row[key]" style="width:100%;border:0;height:auto;" @click="item.click ? item.click(scope.row[key]) :function(){}"/>
				</el-table-column>
				<el-table-column v-else-if="item.type === 'tableFormat'" :prop="key" :label="item.name" width="150px">
					<template slot-scope="scope">{{item.tableFormat.call(scope.row, scope.row[key])}}</template>
				</el-table-column>
				<el-table-column v-else-if="item.type === 'button'" :prop="key" :label="item.name" :align="item.align" width="150px">
					<el-button size="mini" slot-scope="scope" :type="item.btnType" :icon="item.icon" @click="item.click.call(_self, scope.row[key])">{{item.name}}</el-button>
				</el-table-column>
				<el-table-column v-else :prop="key" :label="item.name" :fixed="item.fixed" :width="item.width||'200px'"></el-table-column>
			</template>
			<el-table-column v-if="config.buttons && config.buttons[0]" label="操作" :width="(config.operWidth || 180)+'px'" align="center" fixed="right">
				<template slot-scope="scope" class="oper">
					<el-button v-for="(bitem, i) in config.buttons" size="mini" :type="bitem.type" :icon="bitem.icon" :disabled="bitem.isvalid && (typeof bitem.isvalid==='function'?bitem.isvalid(scope.row):!scope.row[bitem.isvalid])" @click="bitem.callback ? bitem.callback.call(_self, scope.row, $event) : btnClick(scope.row, bitem.fn)">{{bitem.name}}</el-button>
				</template>
			</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>
</template>
<script>
var watchParams = {};

export default {
	data() {
		return {
			loading: false,
		}
	},
	props:{
		table: {
			type: Object,
			default: {},
		},
		Dict: {
			type: Object,
			default: {},
		},
		config: {
			type: Object,
			default: {},
		},
		loadData:{
			type: Function,
			default: () => {}
		},
	},
	beforeCreate(){
	},
	created(){
	},
	mounted() {
	},
	/* watch:{
		'form.item.paperfilename':{
			immediate:true,
			handler(aa){
				this.form.item.paperfilename = aa;
			},
		},
	}, */
	methods: {
		tableRowClassName({row, rowIndex}) {
			if (rowIndex === 1) {
				return 'warning-row';
			} else if (rowIndex === 3) {
				return 'success-row';
			}return '';
		},
		pageChange(e) {
			this.table.page = e
			this.loadData()
		},
		sizeChange(e) {
			this.table.page = 1
			this.table.size = e
			this.loadData()
		},
		btnClick(row, fnName){
			new Function('this.$parent.'+fnName+'('+JSON.stringify(row)+')').call(this);
		},
	},
}
</script>
<style lang="scss" scope>
	.cu-table{
		.el-table{
			font-size:14px;
			thead{
				th{color:#666;background-color:#f8f8f8;}
			}
			tbody{color:#777;}
		}
		.content-between{
			padding-right:10px;height:40px;line-height:40px;
			.r-btn{padding:5px 10px;border:1px solid #58ACFF;border-radius:5px;}
		}
		.el-button{
			margin-left:5px;margin-top:4px;
			span{margin-left:1px;}
		}
	}
</style>