<!--
 * @Descripttion: 表格窗口
 * 
-->
<template>
	<div class="x-tabledialog">

		<component :is="componentType" :title="(config.name || titleMap[mode]) || '编辑'" v-model="visible" :size="size" :style="style" @closed="$emit('closed')" width="80%">
		  <div style="padding:0 6px 6px 6px" class="pagetable">
		    <xTable 
		      ref="table" 
		      :tableColumn="column" 
		      :name="tablename" 
		      :params="search" 
		      api="app/url/lists" 
		      :row-key="key" 
		      :remoteSort="true" 
		      :remoteFilter="true" 
		      :hideDo="true" 
		      :hideRefresh="true" 
		      :hideSetting="true" 
		      :hidePagination="true" 
		      :height="contentHeight"
		      border
		      stripe>

		  <el-table-column prop="msg" label="msg" width="800" />
		  <el-table-column prop="id" label="Name" width="180" />
		  <el-table-column prop="address" label="Address" width="500" />


		    </xTable>
		    </div>
		    <template #footer>
		      <el-pagination 
		        style="float: right;" 
		        background 
		        layout="consists,prev,pager,next" 
		        :total="1000" 
		        :page-size="100" 
		        :page-sizes="100" />
		    </template>
		</component>
	</div>
</template>
<style scoped>
	.x-tabledialog /deep/ .el-table th.el-table__cell{
	  background-color: #f6f8fa;
	  border-bottom: 1px solid #ebeef5;
	  color: #333;
	}
</style>

<script>
	export default {
		emits: ['success', 'closed'],
		props: {
			column: { type: Array, default: () => [] },
			name: { type: String, default: "id" },
		},
		data() {
			return {
				loading: false,
				mode: "plus",
				token: '',
				key: this.name,
				titleMap: {
					plus: '新增',
					edit: '编辑'
				},
				data: {},
				style: {},
				config: {
					column : this.column,
					labelPosition : "right",
					labelWidth : "120px",
					size : "medium",
					url:'',
					submitname:'保存'
				},
				size:900,
				visible: true,
				isSaveing: false,
				type:'drawer',
			}
		},
		watch: {
			column(){
				this.config.column = this.column;
			}
		},
		computed: {
		    componentType() {
		      	return this.type == 'drawer' ? 'el-drawer' : 'x-dialog';
		    },
		    contentHeight(){
				return document.documentElement.clientHeight - (this.type == 'drawer' ? '124' : 230);		    	
		    }
		},
		mounted() {

		},
		methods: {
			getComponentType(type) {
			   	this.type = type;
			   	return this;
			},
			// 显示
			open(mode='plus'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			// 配置
			setConfig(o){
				Object.assign(this.config, o);
				// 远程读取数据
				if (this.config.remoteurl) {
					this.loading = true;
					setTimeout(async ()=>{
						var res = await this.$http.get(this.config.remoteurl,  {[this.key]: this.data[this.key]})
						if (res.code == 200 ) {

							this.loading = false;
							if (res.data.config) {
								Object.assign(this.config, res.data.config);
							}

							if (res.data.data) {
								this.setData(res.data.data);
							}

							if (res.data.token) {
								this.token = res.data.token
							}

							if (res.data.size) {
								this.size = res.data.size
							}

							if (res.data.type && res.data.type !== this.type) {
								this.getComponentType(res.data.type)
							}

							if (res.data.style) {
								this.style = res.data.style;
							}
							return;
						}
						this.$alert(res.message, "提示", {type: 'error'});
					}, 100)
					return false;
				}
			},
			// 表单注入数据
			setData(data){
				this.data = data;
				return this;
			},
		}
	}
</script>