<template>
	<div class="container">
		<!-- <div class="search-area">
			<Form ref="formInline" inline :label-width="120" :model="formInline" :rules="ruleInline">
				<FormItem prop="user" label="充电桩名称：">
					<Input type="text" v-model="formInline.user" placeholder="" />
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
				</FormItem>
			</Form>
		</div> -->
		<div class="action-btn">
			<Button type="primary" @click="add">添加</Button>
			<!-- <Button type="error">删除</Button> -->
		</div>
		<div class="table-container">
			<Table border :columns="columns" stripe :height="tableHeight" :data="data">
				<template #action="{ row, index }">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
					<Button type="error" size="small" @click="remove(index)">删除</Button>
				</template>
			</Table>
			<Page :total="total" show-total show-sizer class="page" />
		</div>


		<!-- 添加、编辑 -->
		<Modal v-model="show_modal" title="添加角色" :mask-closable="false">
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
				<FormItem label="角色名" prop="name">
					<Input v-model="formValidate.name" placeholder="请输入角色名" />
				</FormItem>
				<FormItem label="所属上级" prop="pid">
					<Select v-model="formValidate.pid" style="width:200px">
						<Option :value="0">无</Option>
						<Option v-for="item in roles_data" :value="item.id" :key="item.id">{{ item.name }}</Option>
					</Select>
				</FormItem>
				<FormItem label="权限菜单" prop="roles">
						<Tree :data="menu_data" ref="tree" show-checkbox style="height: 300px;overflow-y: auto;"></Tree>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="text" @click="cancel">取消</Button>
				<Button type="primary" @click="ok">确定</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	import {
		GetRole,
		getMenuList,
	} from '@/api'

	export default {
		name: 'charging_station',
		data() {
			return {
				show_modal: false,
				total: 100,
				tableHeight: 500,
				formInline: {
					user: '',
					password: '',
				},
				ruleInline: {},
				columns: [{
						title: 'ID',
						key: 'id',
					},
					{
						title: '角色名称',
						key: 'name',
					},
					{
						title: '操作',
						slot: 'action',
						width: 150,
						align: 'center',
					},
				],
				data: [],
				formValidate: {
					name: '',
					pid: 0,
					roles: '',
				},
				ruleValidate: {
					name: [{
						required: true,
						message: '请输入角色名',
						trigger: 'blur',
					}],
					roles: [{
						required: true,
						message: '请选择权限菜单',
					}],
				},
				cityList: [{
					value: 'New York',
					label: 'New York',
				}],
				menu_data: [{
					title: 'parent 1',
					expand: false,
					children: [{
							title: 'parent 1-1',
							expand: true,
							children: [{
									title: 'leaf 1-1-1',
									id: 1,
								},
								{
									title: 'leaf 1-1-2',
								},
							],
						},
						{
							title: 'parent 1-2',
							expand: true,
							children: [{
									title: 'leaf 1-2-1',
								},
								{
									title: 'leaf 1-2-1',
								},
							],
						},
					],
				}],
			}
		},
		mounted() {
			this.getList()
			this.calculateTableHeight()
			window.addEventListener('resize', this.calculateTableHeight)
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.calculateTableHeight)
		},
		methods: {
			calculateTableHeight() {
				// 计算表格高度 = 窗口高度 - 搜索区域高度 - 分页高度 - 其他间距
				const searchHeight = document.querySelector('.search-area').offsetHeight
				const actionBtnHeight = document.querySelector('.action-btn').offsetHeight
				const pageHeight = 32 // 分页组件大约高度
				const margins = 40 // 上下边距总和
				this.tableHeight = window.innerHeight - actionBtnHeight - searchHeight - pageHeight - margins - 130
			},
			async getList() {
				await GetRole({
					page: 1,
				}).then((res) => {
					this.total = res.total
					this.data = res.data
					this.page = res.current_page
				})
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$Message.success('Success!')
					} else {
						this.$Message.error('Fail!')
					}
				})
			},
			show(index) {
				this.$Modal.info({
					title: 'User Info',
					content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`,
				})
			},
			remove(index) {
				this.data.splice(index, 1)
			},
			async ok() {
				let menuIds = this.$refs.tree.getCheckedAndIndeterminateNodes()
				this.formValidate.roles = menuIds.map(item => item.id)
				const valid = await new Promise(resolve => this.$refs.formValidate.validate(resolve))
				if (!valid) {
					this.$Message.error('请正确填写表单')
					return
				}
				// if (this.formValidate.id) { } else { }
				this.$Message.info('Clicked ok')
			},
			cancel() {
				this.show_modal = false
				this.$refs.formValidate.resetFields()
			},
			async add() {
				this.show_modal = true
				await this.getMenuList()
			},
			async getMenuList() {
				await getMenuList().then((res) => {
					this.menu_data = res
				})
			},
		},
	}
</script>
<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}

	.action-btn {
		margin: 20px 0;
		background-color: white;
		padding: 20px;
		border: 1px solid #F3F7FD;
		border-radius: 15px;
		display: flex;
		align-items: center;

		button {
			margin-right: 20px;
		}
	}

	.table-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.page {
		margin-top: 10px;
		text-align: right;
	}

	.search-area {
		background-color: white;
		padding-top: 20px;
		border: 1px solid #F3F7FD;
		border-radius: 15px;
	}
</style>