<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1200" :close-on-press-escape="false" :close-on-click-modal="false" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="dialogForm" :model="form" label-width="100px" label-position="top">
					<el-row :gutter="10">
						<el-col :span="20">
							<el-form-item label="表格标识" prop="name">
								<el-input v-model="form.name"  placeholder="用于识别"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="10">
						<el-col :span="8">
							<el-form-item label="表格名称" prop="title">
								<el-input v-model="form.title"  placeholder="请输入中文描述标题"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="16">
							<el-form-item label="数据请求 API" prop="api">
								<el-input v-model="form.api"  placeholder="数据请求API"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="16">
							<el-form-item label="主键" prop="key">
								<el-input v-model="form.key"  placeholder="主键键位, 默认 id"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="备注" prop="key">
								<el-input v-model="form.remark" placeholder="备注"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="10">
						<el-col :span="24">
							<el-form-item label="操作部分" prop="key">
								<el-checkbox-group v-model="form.operationtype">
								    <el-checkbox-button label="plus">添加</el-checkbox-button>
								    <el-checkbox-button label="edit">编辑</el-checkbox-button>
								    <el-checkbox-button label="delete">删除</el-checkbox-button>
								    <el-checkbox-button label="batchdeletion">批量删除</el-checkbox-button>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row :gutter="10"  v-show="form.operationtype.includes('plus')">
						<el-col :span="4">
							<el-form-item label="添加按钮" prop="key">
								<el-input v-model="form.operation.plus.label" placeholder="名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="添加请求" prop="plus">
								<el-autocomplete style="width: 100%;" v-model="form.operation.plus.url" :fetch-suggestions="querySearchSubmit" clearable placeholder="请求 URL"/>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="类型" prop="type">
								<el-select v-model="form.operation.plus.type" placeholder="选择">
									<el-option value="primary" key="primary" label="Primary"> Primary </el-option>
									<el-option value="success" key="success" label="Success"> Success </el-option>
									<el-option value="warning" key="warning" label="Warning"> Warning </el-option>
									<el-option value="danger" key="danger" label="Danger"> Danger </el-option>
									<el-option value="info" key="info" label="Info"> Info </el-option>
									<el-option value="text" key="text" label="Text"> Text </el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="远程链接" prop="edit">
								<el-autocomplete style="width: 100%;" v-model="form.operation.plus.remoteurl" :fetch-suggestions="querySearchGet" clearable placeholder="远程链接, 添加此链接由远程配置调用"/>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="弹窗组件" prop="component">
								<el-select v-model="form.operation.plus.component" placeholder="选择">
									<el-option value="drawer" key="drawer" label="drawer"> 抽屉 </el-option>
									<el-option value="dialog" key="dialog" label="dialog"> 对话框 </el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="10"  v-show="form.operationtype.includes('edit')">
						<el-col :span="4">
							<el-form-item label="编辑按钮" prop="key">
								<el-input v-model="form.operation.edit.label" placeholder="名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="编辑请求" prop="edit">
								<el-autocomplete style="width: 100%;" v-model="form.operation.edit.url" :fetch-suggestions="querySearchSubmit" clearable placeholder="请求 URL"/>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="类型" prop="type">
								<el-select v-model="form.operation.edit.type" placeholder="选择">
									<el-option value="primary" key="primary" label="Primary"> Primary </el-option>
									<el-option value="success" key="success" label="Success"> Success </el-option>
									<el-option value="warning" key="warning" label="Warning"> Warning </el-option>
									<el-option value="danger" key="danger" label="Danger"> Danger </el-option>
									<el-option value="info" key="info" label="Info"> Info </el-option>
									<el-option value="text" key="text" label="Text"> Text </el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="6">
							<el-form-item label="远程链接" prop="edit">
								<el-autocomplete style="width: 100%;" v-model="form.operation.edit.remoteurl" :fetch-suggestions="querySearchGet" clearable placeholder="远程链接, 添加此链接由远程配置调用"/>
							</el-form-item>
						</el-col>

						<el-col :span="4">
							<el-form-item label="弹窗组件" prop="component">
								<el-select v-model="form.operation.edit.component" placeholder="选择">
									<el-option value="drawer" key="drawer" label="drawer"> 抽屉 </el-option>
									<el-option value="dialog" key="dialog" label="dialog"> 对话框 </el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="10"  v-show="form.operationtype.includes('delete')">
						<el-col :span="4">
							<el-form-item label="下架按钮" prop="key">
								<el-input v-model="form.operation.delete.label" placeholder="名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="下架请求" prop="delete">
								<el-autocomplete style="width: 100%;" v-model="form.operation.delete.url" :fetch-suggestions="querySearchDelete" clearable placeholder="请求 URL"/>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="类型" prop="type">
								<el-select v-model="form.operation.delete.type" placeholder="选择">
									<el-option value="primary" key="primary" label="Primary"> Primary </el-option>
									<el-option value="success" key="success" label="Success"> Success </el-option>
									<el-option value="warning" key="warning" label="Warning"> Warning </el-option>
									<el-option value="danger" key="danger" label="Danger"> Danger </el-option>
									<el-option value="info" key="info" label="Info"> Info </el-option>
									<el-option value="text" key="text" label="Text"> Text </el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>


					<el-row :gutter="10" v-show="form.operationtype.includes('batchdeletion')">
						<el-col :span="4">
							<el-form-item label="批量删除按钮" prop="label">
								<el-input v-model="form.operation.batchdeletion.label" placeholder="名称"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="批量删除请求" prop="url">
								<el-autocomplete style="width: 100%;" v-model="form.operation.batchdeletion.url" :fetch-suggestions="querySearchDelete" clearable placeholder="请求 URL"/>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="类型" prop="type">
								<el-select v-model="form.operation.batchdeletion.type" placeholder="选择">
									<el-option value="primary" key="primary" label="Primary"> Primary </el-option>
									<el-option value="success" key="success" label="Success"> Success </el-option>
									<el-option value="warning" key="warning" label="Warning"> Warning </el-option>
									<el-option value="danger" key="danger" label="Danger"> Danger </el-option>
									<el-option value="info" key="info" label="Info"> Info </el-option>
									<el-option value="text" key="text" label="Text"> Text </el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>



					<x-title title="统计标签"></x-title>
					<x-form-table v-model="form.stat" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
						<el-table-column prop="label" label="名称">
							<template #default="scope">
								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="value" label="值">
							<template #default="scope">
								<el-input v-model="scope.row.value" :disabled="scope.row.component=='title'" placeholder="选中值"></el-input>
							</template>
						</el-table-column>
					</x-form-table>

					<x-title title="页头tabs"></x-title>
					<x-form-table v-model="form.tabs" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
						<el-table-column prop="label" label="名称">
							<template #default="scope">
								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="value" label="值">
							<template #default="scope">
								<el-input v-model="scope.row.value" :disabled="scope.row.component=='title'" placeholder="选中值"></el-input>
							</template>
						</el-table-column>
					</x-form-table>
					<div style="padding-top:20px">	
						<el-row :gutter="10" v-if="form.tabs && form.tabs.length>0">
							<el-col :span="6">
								<el-form-item label="tabs主键" prop="label">
									<el-input v-model="form.tabskey" placeholder="名称"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="16">
								<el-form-item label="默认值" prop="url">
									<el-input v-model="form.tabsdefaultvalue" placeholder="默认值"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</div>



					<x-title title="筛选条件"></x-title>
					<x-form-table v-model="form.filter" :addTemplate="addfilterTemplate" drag-sort placeholder="暂无数据">
						<el-table-column prop="label" label="名称">
							<template #default="scope">
								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="component" label="表单组件" width="120">
							<template #default="scope">
								<el-select v-model="scope.row.component" placeholder="选择">
									<el-option value="input" key="input" label="Input"> Input </el-option>
									<el-option value="select" key="select" label="下拉"> 下拉 </el-option>
									<el-option value="switch" key="switch" label="开关"> 开关 </el-option>
									<el-option value="date" key="date" label="日期选择"> 日期选择 </el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="字段">
							<template #default="scope">
								<el-input v-model="scope.row.name" placeholder="字段名"></el-input>
							</template>
						</el-table-column>

						<el-table-column prop="selected" label="置顶" width="70" align="center">
							<template #default="scope">
								<el-switch v-model="scope.row.selected"></el-switch>
							</template>
						</el-table-column>

						<el-table-column prop="width" label="宽" width="80">
							<template #default="scope">
								<el-input v-model="scope.row.width" v-show="scope.row.selected" placeholder="宽"></el-input>
							</template>
						</el-table-column>
						
						<el-table-column prop="operator" label="默认筛选" width="110">
							<template #default="scope">
								<el-select v-model="scope.row.filter" placeholder="选择">
									<el-option value="<" key="<" label="小于"> 小于 </el-option>
									<el-option value="<=" key="<=" label="小于"> 小于等于 </el-option>
									<el-option value=">" key=">" label="大于"> 大于 </el-option>
									<el-option value=">=" key=">=" label="大于等于"> 大于等于 </el-option>
									<el-option value="!=" key="!=" label="不等于"> 不等于 </el-option>
									<el-option value="=" key="=" label="等于"> 等于 </el-option>
									<el-option value="notin" key="notin" label="Input"> 不包含 </el-option>
									<el-option value="in" key="in" label="包含"> 包含 </el-option>
									<el-option value="like" key="like" label="模糊查询"> 模糊查询 </el-option>
									<el-option value="between" key="between" label="区间查询"> 区间查询 </el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="options" label="选项" width="80" align="center">
							<template #default="scope">
								<el-button text size="small" :type="Object.keys(scope.row.options).length==0?'':'primary'" @click="setoptions(scope.row)">
									选项
									<el-badge :hidden="Object.keys(scope.row.options).length==0" :value="Object.keys(scope.row.options).length" class="badge" type="danger"></el-badge>
								</el-button>
							</template>
						</el-table-column>
					</x-form-table>


					<x-title title="Column表格"></x-title>
					<x-form-table v-model="form.column" :addTemplate="addcolumnTemplate" drag-sort placeholder="暂无数据">
						<el-table-column prop="label" label="名称">
							<template #default="scope">
								<el-input v-model="scope.row.label" placeholder="名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="component" label="表单组件" width="120">
							<template #default="scope">
								<el-select v-model="scope.row.component" placeholder="选择">
									<el-option value="" key="" label=""> 空 </el-option>
									<el-option value="input" key="input" label="Input"> Input </el-option>
									<el-option value="title" key="title" label="标题占位"> 标题占位 </el-option>
									<el-option value="checkbox" key="checkbox" label="复选框"> 复选框 </el-option>
									<el-option value="radio" key="radio" label="单选"> 单选 </el-option>
									<el-option value="select" key="select" label="下拉"> 下拉 </el-option>
									<el-option value="checkboxGroup" key="checkboxGroup" label="复组组合"> 复组组合 </el-option>
									<el-option value="upload" key="upload" label="文件上传"> 文件上传 </el-option>
									<el-option value="updatemultiple" key="updatemultiple" label="多文件上传"> 多文件上传 </el-option>
									<el-option value="switch" key="switch" label="开关"> 开关 </el-option>
									<el-option value="cascader" key="cascader" label="级联选择器"> 级联选择器 </el-option>
									<el-option value="date" key="date" label="日期选择"> 日期选择 </el-option>
									<el-option value="number" key="number" label="数字"> 数字 </el-option>
									<el-option value="color" key="color" label="颜色选择"> 颜色选择 </el-option>
									<el-option value="rate" key="rate" label="评分"> 评分 </el-option>
									<el-option value="slider" key="slider" label="滑块"> 滑块 </el-option>
									<el-option value="tableselect" key="tableselect" label="表格选择"> 表格选择 </el-option>
									<el-option value="editor" key="editor" label="编辑器"> 编辑器 </el-option>
									<el-option value="text" key="text" label="文本"> 文本 </el-option>
									<el-option value="avatar" key="avatar" label="头像"> 头像 </el-option>
									<el-option value="formtable" key="formtable" label="表单表格"> 表单表格 </el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="span" label="表单跨度" width="110">
							<template #default="scope">
								<el-input v-model="scope.row.span" :disabled="!scope.row.component" placeholder="表单跨度"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="字段">
							<template #default="scope">
								<el-input v-model="scope.row.name" :disabled="scope.row.component=='title'" placeholder="字段名"></el-input>
							</template>
						</el-table-column>
						<el-table-column prop="columntype" label="表格类型" width="120">
							<template #default="scope">
								<el-select v-model="scope.row.columntype" placeholder="选择">
									<el-option value="avatar" key="avatar" label="用户"> 用户 </el-option>
									<el-option value="badge" key="badge" label="徽章"> 徽章 </el-option>
									<el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option>
									<el-option value="image" key="image" label="单图"> 单图 </el-option>
									<el-option value="status" key="status" label="状态"> 状态 </el-option>
									<el-option value="input" key="input" label="Input"> Input </el-option>
									<el-option value="select" key="select" label="下拉选择"> 下拉选择 </el-option>
									<el-option value="tag" key="tag" label="时间组件"> 时间组件 </el-option>
									<el-option value="components" key="components" label="自定义组件"> 自定义组件 </el-option>
								</el-select>
							</template>
						</el-table-column>

						<el-table-column prop="hide" label="隐藏" width="70" align="center">
							<template #default="scope">
								<el-switch v-model="scope.row.hide" :disabled="scope.row.component=='title'"></el-switch>
							</template>
						</el-table-column>
						<el-table-column prop="width" label="宽" width="80">
							<template #default="scope">
								<el-input v-model="scope.row.width" :disabled="scope.row.component=='title'" placeholder="宽"></el-input>
							</template>
						</el-table-column>
						<!-- <el-table-column prop="options" label="选项" width="80" align="center">
							<template #default="scope">
								<el-button text size="small" :type="Object.keys(scope.row.options).length==0?'':'primary'" @click="setoptions(scope.row)">
									选项
									<el-badge :hidden="Object.keys(scope.row.options).length==0" :value="Object.keys(scope.row.options).length" class="badge" type="danger"></el-badge>
								</el-button>
							</template>
						</el-table-column> -->
					</x-form-table>
				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>
		<options ref="options"></options>
	</el-drawer>
</template>


<script>

	import options from './options'


	export default {
		emits: ['success', 'closed'],
		components: {
			options,
		},
		data() {
			return {
				token: null,
				loading: false,
				mode: "add",
				titleMap: {
					add: '新增',
					edit: '编辑'
				},
				form: {
					operationtype:[],
					stat:[],
					tabs:[],
					column:[],
					filter:[],
					title:'',
					name:'',
					api:'',
					key:'',
					operation:{
						plus:{
							label:'',
							url:'',
						},
						delete:{
							label:'',
							url:'',
						},
						edit:{
							label:'',
							url:'',
						},
						batchdeletion:{
							label:'',
							url:'',
						}
					}
				},
				addTemplate: {
					label:'',
					value:'',
				},
				addcolumnTemplate: {
					component:'',
					columntype:'',
					label:'',
					name:'',
					width:'',
					hide:'',
					span:'',
					options:{},
				},
				addfilterTemplate: {
					label:'',
					name:'',
					selected:false,
					component:'',
					operator:'',
					options:{},
					operators:[],
				},
				visible: false,
				dialog: false,
			}
		},
		mounted() {

		},
		methods: {
			querySearchSubmit(queryString, cb){
				if (this.form.api) {
					var lastIndex = this.form.api.lastIndexOf('/');
					var updatedUrl = this.form.api.substring(0, lastIndex + 1) + 'submit';
					cb([{value: updatedUrl}])
				}
			},
			querySearchGet(queryString, cb){
				if (this.form.api) {
					var lastIndex = this.form.api.lastIndexOf('/');
					var updatedUrl = this.form.api.substring(0, lastIndex + 1) + 'info';
					cb([{value: updatedUrl}])
				}
			},
			querySearchDelete(queryString, cb){
				if (this.form.api) {
					var lastIndex = this.form.api.lastIndexOf('/');
					var updatedUrl = this.form.api.substring(0, lastIndex + 1) + 'delete';
					cb([{value: updatedUrl}])
				}
			},
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			dialogclose(){
				this.dialog = false;
			},
			close(){
				this.visible = false;
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$http.post('system/table/submit',{info:this.form, token:this.token});
						this.isSaveing = false;
						if(res.code == 200){
							this.visible = false;
							this.$message.success("操作成功")
							this.$emit('success', this.form, this)
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			},
			//表单注入数据
			setData(data){

				this.loading = true
				const params = {
					id: data.id,
					uniqid: data.uniqid,
				}
				this.form.title = data.title;
				this.form.uniqid = data.uniqid;
				setTimeout(async ()=>{
					var res = await this.$http.get('system/table/info',params)
					this.loading = false
					this.form = res.data.data;
					this.token = res.data.token;
				}, 400)

			},
			//设置过滤项
			setoptions(o){
				this.dialog = true
				this.$nextTick(() => {
					this.$refs.options.open().setData(o)
				})
			},
		}
	}
</script>

<style>
</style>
