<template>
	<view style="display: flex;flex-direction: column;justify-content: space-between;">
		<view><uni-steps :options="progress" :active="processIndex"></uni-steps></view>
		<scroll-view style="height: 88vh">
			<thirdlucky-data-form v-if="processIndex == 0" :showButton="false" :columns="component.columns" :formData="component.data"></thirdlucky-data-form>
			<thirdlucky-data-view
				v-if="processIndex == 1"
				:buttons="buttons"
				:columns="entity.columns"
				:datas="entity.datas"
				:tableNames="entity.tableNames"
				:showButton="false"
				@selected="onSelected"
			></thirdlucky-data-view>
			<thirdlucky-data-form v-if="processIndex == 2" :showButton="false" :columns="code.columns" :formData="code.data"></thirdlucky-data-form>
			<view v-if="processIndex == 3">
				<button @click="onCreateComponent">新建组件</button>
				<button @click="onCreateGit">新建git</button>
				<button @click="onSaveModel">保存模型</button>
				<button @click="onGenerateCode">生成代码</button>
				<button @click="onUpload">上传代码</button>
				<thirdlucky-console-view ref="console" class="console-view"></thirdlucky-console-view>
			</view>
		</scroll-view>
		<view style="display: flex;flex-direction: row;">
			<button style="flex: 1;" :disabled="processIndex == 0" @click="onPrevious">上一步</button>
			<button style="flex: 1;" :disabled="processIndex == 3" @click="onNext">下一步</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			processIndex: 0,
			column: {},
			progress: [{ title: '1.新建组件' }, { title: '2.创建模型' }, { title: '3.生成代码' }, { title: '4.推送代码' }],
			buttons: [{ id: 'edit', name: '编辑', color: 'green' }],
			entity: {
				columns: [
					{
						name: 'name',
						info: '名称',
						type: 'text',
						tips: '名称'
					},
					{
						name: 'title',
						info: '标题',
						type: 'text',
						tips: '标题'
					},
					{
						name: 'comment',
						info: '描述',
						type: 'text',
						tips: '描述'
					},
					{
						name: 'show',
						info: '开关',
						type: 'switch',
						tips: ''
					}
				],
				datas: [],
				tableNames: ['name', 'comment']
			},
			component: {
				columns: [
					{
						name: 'name',
						info: '名称',
						tips: '组件名称',
						type: 'text'
					},
					{
						name: 'comment',
						info: '介绍',
						tips: '组件介绍',
						type: 'textarea'
					},
					{
						name: 'show',
						info: '开关',
						tips: '开关',
						type: 'switch'
					},
					{
						name: 'domainName',
						info: '域名',
						tips: 'http://localhost',
						type: 'text'
					},
					{
						name: 'projectName',
						info: '工程名称',
						tips: '工程名称',
						type: 'text'
					},
					{
						name: 'projectPath',
						info: '工程路径',
						tips: '相对路径',
						type: 'text'
					},
					{
						name: 'filePath',
						info: '文件路径',
						tips: '文件相对路径',
						type: 'text'
					},
					{
						name: 'port',
						info: '端口号',
						tips: '8080',
						type: 'number'
					},
					{
						name: 'rootPackage',
						info: '包名',
						tips: 'com.bfec',
						type: 'text'
					},
					{
						name: 'deployUrl',
						info: '部署地址',
						tips: '172.17.14.179',
						type: 'text'
					},
					{
						name: 'deployPath',
						info: '部署路径',
						tips: '/usr/local/services/',
						type: 'text'
					},
					{
						name: 'gitPath',
						info: 'GIT地址',
						tips: 'ssh://git@support.licaiedu.com:2222/test-group/code-factory-service.git',
						type: 'text'
					},
					{
						name: 'gitGroup',
						info: 'GIT分组',
						tips: 'test-group',
						type: 'text'
					}
				],
				data: {}
			},
			code: {
				columns: [
					{
						name: 'template_id',
						info: '模板ID',
						tips: '1',
						type: 'number'
					}
				],
				data: {}
			}
		};
	},
	methods: {
		onSelected(index, action, data) {
			if (action == 'edit') {
			}
		},
		onPrevious() {
			if (this.processIndex > 0) {
				this.processIndex--;
			}
		},
		onNext() {
			if (this.processIndex < 4) {
				switch (this.processIndex) {
					case 0:
						break;
					case 1:
						break;
					case 2:
						break;
					case 3:
						break;
				}
				this.processIndex++;
			}
		},
		onCreateComponent() {
			console.log("组件",this.component.data);
			this.callApi(this.api.addComponent, this.component.data);
		},
		onCreateGit() {
			
		},
		onSaveModel() {},
		onGenerateCode() {},
		onUpload() {},

		callApi(apifunc, data) {
			apifunc(
				data,
				res => {
					uni.showToast({
						title: '提交成功:',
						icon: 'succes',
						duration: 2000
					});
				},
				res => {
					uni.showToast({
						title: '提交失败:' + res.errMsg,
						icon: 'error',
						duration: 2000
					});
				}
			);
		}
	}
};
</script>

<style>
.console-view {
	background: white;
	border-style: solid;
	border-width: 100%;
	height: 60vh;
}
</style>
