<template>
	<div>
		<w-app-container>
			<el-button size="mini" type="primary" @click="dialogVisible=true">dialog</el-button>
			<el-button size="mini" type="primary">test-btn</el-button>
			<el-button size="mini" type="primary">test-btn</el-button>
			<el-button size="mini" type="primary">test-btn</el-button>
		</w-app-container>
		<w-app-container direction="row">
			<el-button size="mini" type="primary">test-btn</el-button>
			<el-button size="mini" type="primary">test-btn</el-button>
			<el-button size="mini" type="primary">test-btn</el-button>
			<el-button size="mini" type="primary">test-btn</el-button>
		</w-app-container>
		<w-barcode :sourceCode="barcode"></w-barcode>
		<w-collapse v-model="collapseVisible" title="附加信息">
			1111
		</w-collapse>
		<div ref="contentMenuRef">ContentMenu ContentMenu ContentMenu ContentMenu ContentMenu </div>
		<w-image></w-image>
		<w-dialog></w-dialog>
		<w-dialog v-model="dialogVisible" :title="dialogTitle" width="450px">
			内容
		</w-dialog>
		<!-- <w-index-list
			:listData="indexListData"
			class="index-list"
		></w-index-list> -->
		<w-select
			v-model="value"
			:optionRender="optionRender"
			:optionlist="optionlist"
			class="select-input"
		>
		</w-select>
		<div class="tree">
			<w-tree-virtual
				ref="organTree"
				:data="currentTreeData"
				:expand-on-click-node="false"
				:auto-expand-parent="false"
				node-key="id"
				highlight-current
			>
			</w-tree-virtual>
		</div>
		<w-upload
			ref="upload"
			:fileList="fileList"
			@on-file-click="onFileClick"
			@on-change="onFileChange"
		></w-upload>
		<w-password-input
			v-model="barcode"
			class="password-input"
		></w-password-input>
	</div>
</template>
<script>
export default {
	data () {
		const currentTreeData = []
		for (let i = 0; i < 20; i++) {
			const children = []
			for (let k = 0; k < 5; k++) {
				const _children = []
				for (let j = 0; j < 3; j++) {
					_children.push({
						id: `${i}-${k + 1}-${j + 1}`,
						name: `${i}-${k + 1}-${j + 1}`
					})
				}
				children.push({
					id: `${i}-${k + 1}`,
					name: `${i}-${k + 1}`,
					children: _children
				})
			}
			currentTreeData.push({
				id: i + 1,
				name: i + 1,
				children
			})
		}
		return {
			barcode: '123123123',
			collapseVisible: true,
			dialogVisible: false,
			dialogTitle: '标题',
			indexListData: [],
			value: '',
			optionlist: [{
				id: 1,
				name: '选项一'
			}],
			currentTreeData,
			fileList: ['https://pic.imgdb.cn/item/63919df3b1fccdcd36c4ff26.jpg']
		}
	},
	mounted () {
		this.initContentMenu()
	},
	methods: {
		initContentMenu () {
			this.$fxContextMenu.init(this.$refs.contentMenuRef, {
				menuList: [{
					label: '关闭',
					click: (contextEvent) => {
						console.log('close')
						this.$fxConfirm('确定关闭？').then(() => {
							console.log('close')
						})
					}
				}, {
					label: '关闭右侧',
					click: (contextEvent) => {
						console.log('close')
					}
				}]
			})
		},
		optionRender (h, { item }) {
			h = this.$createElement
			return <div>
				<span>fx-</span>
				<span>{ item.name }</span>
			</div>
		},
		onFileClick () {
			debugger
			console.log(arguments)
		},
		onFileChange () {
			debugger
			console.log(arguments)
		}
	}
}
</script>
<style lang="stylus" scoped>
.tree {
	height: 400px
	width: 150px
	border: 1px solid #eee
}
.password-input {
	width: 200px
}
</style>
