<template>
	<div style="height: 100%;">
		<el-container>
			<el-aside style="width: auto; ">
				<SideMenuBar />
			</el-aside>
			<el-container>
				<el-header>
					<HeaderBar />
				</el-header>
				<el-main>
					<div style="background-color: #F2F6FC; height: 2px; width: 100%;"></div>
					<TabBar />
					<div style="background-color: #F2F6FC; height: 2px; width: 100%;"></div>
					<MainContent />
					<div style="background-color: #F2F6FC; height: 2px; width: 100%;"></div>
				</el-main>
			</el-container>
		</el-container>

		<el-drawer v-model="setting" :direction="direction" size="400" :before-close="handleClose">
			<template #header>
				<h4>系统设置</h4>
			</template>
			<template #default>
				<el-form label-width="80px">
					<el-form-item label="布局">
						<el-radio-group v-model="radioLayout" @change="handleChangeLayout" style="width:300px;">
							<el-radio-button label="1">标准</el-radio-button>
							<el-radio-button label="2">通透</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="导航类型">
						<el-radio-group v-model="radioNav" @change="handleChangeNav" style="width:300px;">
							<el-radio-button label="tag"></el-radio-button>
							<el-radio-button label="tab"></el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="logo显示">
						<el-switch v-model="radioLogoShow" @change="handleChangeLogoShow" style="width:300px">
						</el-switch>
					</el-form-item>
					<el-form-item label="logo位置">
						<el-radio-group v-model="radioLogoPosition" @change="handleChangeLogoPosition"
							style="width:300px">
							<el-radio-button label="left">左侧</el-radio-button>
							<el-radio-button label="right">右侧</el-radio-button>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</template>
			<template #footer>
			</template>
		</el-drawer>


		<el-drawer v-model="customer" :direction="direction" size="500" @open="openCustomer" @close="closeCustomer">
			<template #header>
				<div style="display: flex;flex-direction: column;">
					<div style="display: flex;flex-direction: row;">
						<h4>个性化表格</h4>
					</div>
					<div style="display: flex;flex-direction: row;">
						<el-select v-model="radio" placeholder="请选择" @change="handleChangeTables" style="width: 100px;">
							<el-option v-for="item in tables" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
						<el-button type="primary" @click="handelDefault">恢复默认</el-button>
					</div>
					<div style="display: flex;flex-direction: row;">
						<span style="color:#F56C6C;  ">调整后请刷新界面</span>
					</div>
				</div>
			</template>
			<template #default>
				<el-table :data="tableData" stripe border @cell-dblclick="handleCelldbclick">
					<!-- <el-table-column prop="sort" label="序号" width="60" show-overflow-tooltip header-align="center"
						align="center">
					</el-table-column> -->
					<el-table-column prop="label" label="列名" width="100" show-overflow-tooltip header-align="center"
						align="center">
					</el-table-column>
					<el-table-column prop="showFlag" label="显示" width="60" show-overflow-tooltip header-align="center"
						align="center">
						<template #default="scope">
							<el-checkbox size="small" v-model="scope.row.showFlag" true-label="1" false-label="0"
								@change="checkboxChange(scope.row,'showFlag')"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="align" label="对齐" width="60" show-overflow-tooltip header-align="center"
						align="center">
						<template #default="scope">
							<el-tag size="small" v-if="scope.row.align == 'left'" type="warning">左对齐</el-tag>
							<el-tag size="small" v-else-if="scope.row.align == 'right'" type="info">右对齐</el-tag>
							<el-tag size="small" v-else>居中</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="sortable" label="排序" width="60" show-overflow-tooltip header-align="center"
						align="center">
						<template #default="scope">
							<el-checkbox size="small" v-model="scope.row.sortable" true-label="1" false-label="0"
								@change="checkboxChange(scope.row,'sortable')"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="exportFlag" label="导出" width="60" show-overflow-tooltip header-align="center"
						align="center">
						<template #default="scope">
							<el-checkbox size="small" v-model="scope.row.exportFlag" true-label="1" false-label="0"
								@change="checkboxChange(scope.row,'exportFlag')"></el-checkbox>
						</template>
					</el-table-column>

					<el-table-column label="操作" width="120px" header-align="center" align="center">
						<template #default="scope">
							<el-button type="primary" circle @click="handleMove(scope.row,'up')"><el-icon>
									<Top />
								</el-icon>
							</el-button>
							<el-button type="primary" circle @click="handleMove(scope.row,'down')"><el-icon>
									<Bottom />
								</el-icon>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<template #footer>
			</template>
		</el-drawer>




		<!-- 		<div class="dragIcon" @click="click"
			:style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}">
			个性化
		</div> -->
	</div>
</template>

<script setup>
	import {
		ref,
		onBeforeMount,
		getCurrentInstance,
		computed
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import {
		useSettingsStore
	} from "@/stores/settings"
	const settings = useSettingsStore()


	import HeaderBar from '@/views/frame/HeaderBar.vue'
	import SideMenuBar from '@/views/frame/SideMenuBar.vue'
	import MainContent from '@/views/frame/MainContent.vue'
	import TabBar from '@/views/frame/TabBar.vue'


	const setting = computed(() => settings.setting)
	const customer = computed(() => settings.customer)

	const direction = ref('rtl')
	const radioLayout = computed(() => settings.layout)
	const radioNav = computed(() => settings.navType)
	const radioLogoShow = computed(() => settings.logoShow)
	const radioLogoPosition = computed(() => settings.logoPosition)


	const handleClose = () => {
		settings.setSetting()
	}
	const closeCustomer = () => {
		settings.setCustomer()
	}
	const openCustomer = () => {
		getTables()
	}


	const handleChangeLayout = (value) => {
		var position = ''
		if (value == '1') {
			position = 'left'
		} else if (value == '2') {
			position = 'right'
		}
		settings.setLayout(value)
		settings.setLogoShow(true)
		settings.setLogoPosition(position)

	}
	const handleChangeNav = (value) => {
		settings.setNavType(value)
	}
	const handleChangeLogoShow = (value) => {
		settings.setLogoShow(value)
	}
	const handleChangeLogoPosition = (value) => {
		settings.setLogoPosition(value)
	}


	const radio = ref('')
	const tables = ref([])
	const tableData = ref([])

	const handleChangeTables = (val) => {
		getTableData()
	}

	const getTables = () => {
		var url = 'framework/LowCodePersonal/queryTNameByUserIdMenuId'
		var param = {
			menuId: localStorage.getItem('menuId')
		}
		proxy.$axios.get(url, param).then(response => {
			tables.value = response.data.data
			if (tables.value.length > 0) {
				radio.value = tables.value[0]
				getTableData()
			} else {
				tableData.value = []
			}
		})
	}


	const getTableData = () => {
		var url = 'framework/LowCodePersonal/queryByUserIdMenuId'
		var param = {
			menuId: localStorage.getItem('menuId'),
			tName: radio.value
		}
		proxy.$axios.get(url, param).then(response => {
			tableData.value = response.data.data
		})
	}


	const checkboxChange = (row, type) => {
		console.log('row.sortable:', row.sortable)
		console.log('row.exportFlag:', row.exportFlag)
		var url = 'framework/LowCodePersonal/modify'
		var param = {
			menuId: localStorage.getItem('menuId'),
			row: JSON.stringify(row),
			col: type,
			tName: radio.value
		}
		proxy.$axios.post(url, param).then(response => {
			getTableData()
		})
	}


	const handleCelldbclick = (row, column, cell, event) => {
		// console.log(column)
		if (column.property == 'align') { 
			var url = 'framework/LowCodePersonal/modify'
			var param = {
				menuId: localStorage.getItem('menuId'),
				row: JSON.stringify(row),
				col: column.property,
				tName: radio.value
			}
			proxy.$axios.post(url, param).then(response => {
				getTableData()
			})

		}
	}




	const handleMove = (row, type) => {
		var url = 'framework/LowCodePersonal/move'
		var param = {
			menuId: localStorage.getItem('menuId'),
			row: JSON.stringify(row),
			type: type,
			tName: radio.value
		}
		proxy.$axios.post(url, param).then(response => {
			getTableData()
		})
	}
	const handelDefault = (row, type) => {
		var url = 'framework/LowCodePersonal/restore'
		var param = {
			menuId: localStorage.getItem('menuId'),
			tName: radio.value
		}
		proxy.$axios.post(url, param).then(response => {
			getTableData()
		})
	}
</script>

<style scoped>
	.el-header {
		padding: 0px;
	}

	.el-main {
		padding: 0px;
		display: flex;
		flex-direction: column;
		/* height: 100%; */
		flex: 1;
		background-color: #F2F6FC;
		/* background-color: indianred; */
	}

	/* 	.el-container {

	} */
</style>