<template>
	<div class="demo">
		<cl-crud @load="onLoad">
			<el-row type="flex">
				<cl-refresh-btn></cl-refresh-btn>
				<cl-add-btn></cl-add-btn>
				<cl-multi-delete-btn></cl-multi-delete-btn>
				<cl-query :list="query" @change="onQueryChange"></cl-query>
				<cl-filter label="是否过滤">
					<el-switch v-model="selects.filter"></el-switch>
				</cl-filter>
				<el-button size="mini" @click="openForm">自定义表单</el-button>
				<el-button size="mini" @click="openDialog">自定义对话框</el-button>
				<cl-flex1 />
				<cl-search-key
					field="name"
					v-model="keyword"
					@change="onKeywordChange"
					:field-list="fieldList"
				></cl-search-key>
				<cl-adv-btn />
			</el-row>

			<el-row>
				<cl-table
					ref="table"
					:border="false"
					:columns="columns"
					:default-sort="{ prop: 'price', order: 'descending' }"
					row-key="id"
					@selection-change="onSelectionChange"
				>
					<template #column-name="{scope}"> ` {{ scope.row.name }} ` </template>

					<template #slot-btn>
						<el-button type="text" size="mini" @click="onClickTest">测试按钮</el-button>
					</template>

					<template #append>
						<p style="text-align: center;margin: 10px">Append</p>
					</template>

					<template #empty>
						自定义空态
					</template>
				</cl-table>
			</el-row>

			<el-row>
				<cl-pagination></cl-pagination>
			</el-row>

			<cl-upsert
				ref="upsert"
				:items="upsert.items"
				:on-upsert-close="onBeforeClose"
				:on-upsert-open="onBeforeOpen"
				:props="{
					'custom-class': 'xxx'
				}"
				@open="onOpen"
				@close="onClose"
			>
				<template #slot-test>
					<test></test>
				</template>

				<template #slot-crud>
					<cl-crud @load="onLoad2">
						<el-row>
							<cl-add-btn></cl-add-btn>
						</el-row>

						<cl-table :columns="columns" :props="{ height: '300px' }"></cl-table>

						<cl-upsert :items="upsert.items"></cl-upsert>
					</cl-crud>
				</template>
			</cl-upsert>
			<cl-adv-search ref="advSearch" :items="adv.items"></cl-adv-search>
		</cl-crud>

		<!-- 自定义表单 -->
		<cl-form ref="form">
			<template #slot-input="{ scope }">
				<el-input v-model="scope.t2" placeholder="slot-*"></el-input>
			</template>
		</cl-form>

		<!-- 自定义对话框 -->
		<cl-dialog
			v-model="dialog.visible"
			:props="{
				'append-to-body': true,
				fullscreen: false,
				'before-close': onBeforeClose
			}"
			@open="onOpen"
			@opened="onOpened"
			@close="onClose"
			@closed="onClosed"
		>
			Hello!
		</cl-dialog>
	</div>
</template>

<script>
import { reactive } from "vue";

const userList = [
	{
		id: 1,
		name: "刘一",
		process: 42.2,
		createTime: "2019年09月02日",
		price: 75.99,
		salesRate: 52.2,
		status: 1,
		images: ["https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg"],
		children: [
			{
				id: 6,
				name: "刘二",
				process: 42.2,
				createTime: "2019年09月02日",
				price: 232.49,
				salesRate: 52.2,
				status: 1,
				images: [
					"https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/1.jpg"
				]
			}
		]
	},
	{
		id: 2,
		name: "陈二",
		process: 35.2,
		createTime: "2019年09月05日",
		price: 242.1,
		salesRate: 72.1,
		status: 1,
		images: ["https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/2.jpg"]
	},
	{
		id: 3,
		name: "张三",
		process: 10.2,
		createTime: "2019年09月12日",
		price: 74.11,
		salesRate: 23.9,
		status: 0,
		images: ["https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/3.jpg"]
	},
	{
		id: 4,
		name: "李四",
		process: 75.5,
		createTime: "2019年09月13日",
		price: 276.64,
		salesRate: 47.2,
		status: 0,
		images: ["https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/4.jpg"]
	},
	{
		id: 5,
		name: "王五",
		process: 25.4,
		createTime: "2019年09月18日",
		price: 160.23,
		salesRate: 28.3,
		status: 1,
		images: ["https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/avatar/5.jpg"]
	}
];

const testService = {
	page: p => {
		console.log("GET[page]", p);
		return Promise.resolve({
			list: userList.slice((p.page - 1) * p.size, p.page * p.size),
			pagination: {
				page: p.page,
				size: p.size,
				total: 5
			}
		});
	},
	info: d => {
		console.log("GET[info]", d);
		return new Promise(resolve => {
			resolve({
				id: 1,
				name: "icssoa",
				price: 100,
				ids: "0,3,2"
			});
		});
	},
	add: d => {
		console.log("POST[add]", d);
		return Promise.resolve();
	},
	delete: d => {
		console.log("POST[delete]", d);
		return Promise.resolve();
	},
	update: d => {
		console.log("POST[update]", d);
		return Promise.resolve();
	}
};

export default {
	components: {
		test: {
			inject: ["form"],
			methods: {
				update() {
					this.form.name = "icssoa update";
				}
			},
			render() {
				return <el-button onclick={this.update}>更新name</el-button>;
			}
		}
	},

	setup() {
		const state = reactive({
			keyword: "",
			query: [
				{
					label: "男",
					value: 1
				},
				{
					label: "女",
					value: 2
				}
			],
			fieldList: [
				{
					label: "姓名",
					value: "name"
				},
				{
					label: "性别",
					value: "sex"
				}
			],
			columns: [
				{ type: "selection", align: "center", width: 60 },
				{
					label: "#",
					type: "index",
					align: "center"
				},
				{
					label: "多级表头",
					children: [
						{
							label: "姓名",
							prop: "name"
						}
					]
				},
				{
					label: "收入",
					prop: "price",
					align: "center",
					sortable: "custom"
				},
				{
					type: "op",
					align: "center",
					layout: ["edit", "delete", "slot-btn"]
				}
			],
			selects: {
				filter: true
			},
			dialog: {
				visible: false
			},
			upsert: {
				props: {
					props: {
						"custom-class": "dialog-nopadding"
					}
				},
				items: [
					{
						label: "姓名",
						prop: "name",
						component: {
							name: "el-input"
						},
						rules: {
							required: true,
							message: "姓名不能为空"
						}
					},
					{
						label: "下拉",
						prop: "sel",
						value: [1],
						component: {
							name: "el-select",
							multiple: true,
							options: []
						}
					},
					{
						label: "测试",
						prop: "test",
						component: {
							name: "slot-test"
						}
					},
					{
						label: "内嵌crud",
						prop: "crud",
						component: {
							name: "slot-crud"
						}
					},
					{
						label: "是否显示存款",
						prop: "isPrice",
						flex: false,
						component: {
							name: "el-switch"
						}
					},
					{
						label: "存款",
						prop: "price",
						hidden: "@isPrice",
						component: {
							name: "el-input-number"
						},
						rules: {
							required: true,
							message: "存款不能为空"
						}
					}
				]
			},
			adv: {
				items: [
					{
						label: "输入框",
						prop: "v1",
						value: "v1",
						component: {
							name: "el-input"
						}
					},
					{
						label: "下拉框",
						prop: "v2",
						value: [1],
						component: {
							name: "el-select",
							options: [
								{
									label: "选项1",
									value: 1
								},
								{
									label: "选项2",
									value: 2
								}
							]
						}
					}
				]
			}
		});

		return state;
	},

	methods: {
		onLoad({ ctx, app }) {
			ctx.service(testService).done();
			app.refresh({});
		},

		onLoad2({ ctx, app }) {
			ctx.service({
				page() {
					return Promise.resolve({
						list: [userList[0]],
						pagination: {}
					});
				}
			}).done();
			app.refresh({});
		},

		onQueryChange(value) {
			console.log("query change", value);
		},

		onKeywordChange(value) {
			console.log("keyword change", value);
		},

		onSelectionChange(selection) {
			console.log(selection);
		},

		onTest(d) {
			console.log(d);
		},

		onClickTest() {
			this.$refs["table"].clearSort();
		},

		openForm() {
			this.$refs["form"].open({
				props: {
					title: "自定义表单"
				},
				items: [
					{
						label: "状态",
						prop: "a",
						value: 1,
						component: {
							name: "el-radio-group",
							options: [
								{
									label: "开启",
									value: 1
								},
								{
									label: "关闭",
									value: 0
								}
							]
						}
					},
					{
						label: "标签名渲染",
						prop: "t1",
						component: {
							name: "el-input",
							placeholder: "el-input、el-date-picker、el-select..."
						},
						rules: {
							required: true,
							message: "姓名不能为空"
						}
					},
					{
						label: "插槽渲染",
						prop: "t2",
						component: {
							name: "slot-input"
						}
					}
				],
				on: {
					open() {
						console.log("cl-form open");
					},

					close(done) {
						console.log("cl-form close");
						done();
					},

					submit(data, { close }) {
						console.log(data);
						close();
					}
				}
			});
		},

		openDialog() {
			this.dialog.visible = !this.dialog.visible;
		},

		onOpen() {
			console.log("open");
		},

		onOpened() {
			console.log("opened");
		},

		onClose() {
			console.log("close");
		},

		onClosed() {
			console.log("closed");
		},

		onBeforeClose(done) {
			console.log("close before");
			done();
		},

		onBeforeOpen(isEdit, data, { done, close }) {
			console.log("open before");

			setTimeout(() => {
				this.$refs["upsert"].setOptions("sel", [
					{
						label: "a",
						value: 1
					}
				]);
			}, 500);
		}
	}
};
</script>

<style lang="scss">
html,
body,
#app,
.demo {
	height: 100%;
	overflow: hidden;
}

* {
	padding: 0;
	margin: 0;
}
</style>
