<template>
	<div>
		<el-row style="margin: 10px auto;">
			<!-- <el-button>Default</el-button> -->
			<el-button type="primary" @click="add()">添加一级</el-button>
			<!-- <el-button type="danger">删除</el-button> -->
		</el-row>
		<el-table :data="tableData" style="width: 100%" row-key="id">
			<el-table-column prop="id" label="Id" width="100" />
			<el-table-column prop="name" label="名称" />
			<el-table-column prop="icon" label="Icon">
				<template #default="scope">
					<component style="width: 20px; " :is="scope.row.icon"></component>
					<el-icon @click="iconSelect(scope.row)" class="selectIcon">
						<ArrowDown />
					</el-icon>
				</template>
			</el-table-column>
			<el-table-column prop="url" label="Url" />
			<el-table-column prop="created_at" label="创建时间" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button v-if="scope.row.pid==null || scope.row.pid==''" round type="primary" size="small" plain
						@click="add(scope.row.id)">添加子菜单</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="dialogVisible" title="菜单" width="30%">
			<el-form :model="MenuInfo" label-width="50px" v-loading="loading">
				<el-form-item v-if="MenuInfo.pid" label="父级">
					<el-select v-model="MenuInfo.pid" placeholder="请选择父级">
						<el-option v-for="(item,index) in FatherList" :key="index" :label="item.name"
							:value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="名称">
					<el-input v-model="MenuInfo.name" />
				</el-form-item>
				<el-form-item v-if="MenuInfo.pid" label="Url">
					<el-input v-model="MenuInfo.url" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="save">
						确定
					</el-button>
				</span>
			</template>
		</el-dialog>
		<el-drawer v-model="drawerShow" size="365" title="选择图标">

			<div class="demo-drawer__footer">
				<IconList @changeMenu="changeMenu"></IconList>
				<!-- <el-button @click="drawer=false">取消</el-button>
		 		<el-button type="primary" :loading="loading" @click="submitAuth">{{
		   loading ? '提交中 ...' : '提交'
		 }}</el-button> -->
			</div>
		</el-drawer>
	</div>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		GetAdminMenuList,
		GetFatherMenuList,
		AddMenu,
		EditMenu
	} from '@/api/api.js'
	import {
		ElMessage
	} from 'element-plus'
	import IconList from '@/components/IconList.vue'
	let loading = ref(false)
	let tableData = ref([])
	let dialogVisible = ref(false)
	let drawerShow = ref(false)
	let MenuInfo = ref({
		id: null,
		pid: null,
		name: '',
		url: '',
		icon: ''
	})
	const GetList = () => {
		GetAdminMenuList().then(res => {
			tableData.value = res.list
		})
	}
	//一级菜单
	let FatherList = ref([])
	const GetFatherList = () => { //获取一级菜单
		GetFatherMenuList().then(res => {
			FatherList.value = res.list
		})
	}
	const add = (pid = null) => {
		MenuInfo.value.name = ''
		MenuInfo.value.url = ''
		GetFatherList()
		dialogVisible.value = true
		MenuInfo.value.pid = pid
	}
	const save = () => {
		loading.value = true
		AddMenu({
			menuInfo: MenuInfo.value
		}).then(res => {
			loading.value = false
			console.log(res)
			if (res.status == 'ok') {
				dialogVisible.value = false
				GetList()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const editMenu=()=>{
		EditMenu({menuInfo:MenuInfo.value}).then(res=>{
			if(res.status=='ok'){
				drawerShow.value = false
				ElMessage({
					message: '修改成功',
					type: 'success',
				})
			}else{
				ElMessage.error(res.msg)
			}
		})
	}
	const iconSelect = (row) => {
		drawerShow.value = true
		MenuInfo.value=row
		
	}
	const changeMenu=(e)=>{
		 MenuInfo.value.icon=e
		 editMenu()
		 
	}
	onMounted(() => {
		GetList()

	})
</script>

<style scoped>
	.selectIcon{
		width: 20px;
		height: 20px;
		border: 1px solid var(--color-border1);
		margin-left: 10px;
		cursor:pointer
	}
</style>