<template>
	<div class="user">
		<div class="tree">
			<treeList
				:data="treeListData"
				v-model="sourceList.pagination.tenantId"
				node-key="id"
				@change="treeChange"
			>
			</treeList>
		</div>
		<div class="content">
			<byTable
				:source="sourceList.data"
				:pagination="sourceList.pagination"
				:config="config"
				:loading="loading"
				highlight-current-row
				:selectConfig="selectConfig"
				:table-events="{
					//element talbe事件都能传
					select: select,
				}"
				:action-list="[
					{
						text: '添加字典',
						action: () => openModal('add'),
						disabled: !sourceList.pagination.tenantId,
					},
				]"
				@get-list="getList"
			>
				<template #slotName="{ item }">
					{{ item.createTime }}
				</template>
			</byTable>
		</div>
		<el-dialog
			:title="modalType == 'add' ? '新增' : '编辑'"
			v-model="dialogVisible"
			width="500"
			v-loading="loading"
		>
			<byForm
				:formConfig="formConfig"
				:formOption="formOption"
				v-model="formData.data"
				:rules="rules"
				ref="byform"
			>
				<template #account>
					<el-input
						style="width: 150px; margin-right: 10px"
						v-model="formData.data.userName"
						placeholder="请输入用户名"
					></el-input>
					<el-input
						style="width: 150px; margin-right: 10px"
						v-model="formData.data.password"
						placeholder="密码"
					></el-input>
					<span
						style="color: #409eff; cursor: pointer"
						@click="newPassword"
						>随机生成</span
					>
				</template>
			</byForm>
			<template #footer>
				<el-button @click="dialogVisible = false" size="large"
					>取 消</el-button
				>
				<el-button
					type="primary"
					@click="submitForm('byform')"
					size="large"
					:loading="submitLoading"
				>
					确 定
				</el-button>
			</template>
		</el-dialog>
		<el-dialog
			title="字典维护"
			v-model="dictCommonModal"
			width="1000"
            class="dictCommonModal"
			v-loading="loading"
		>
			<dictTenantDtl :data="formData"></dictTenantDtl>
			<template #footer>
				<el-button @click="dictCommonModal = false" size="large"
					>关闭</el-button
				>
				
			</template>
        </el-dialog>
	</div>
</template>
    
  <script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from 'element-plus'
import byTable from '@/components/byTable/index'
import byForm from '@/components/byForm/index'
import dictTenantDtl from './dictTenantDtl.vue'
import treeList from '@/components/treeList/index'
import { computed, defineComponent, ref } from 'vue'
const dictCommonModal = ref(false)
const loading = ref(false)
const submitLoading = ref(false)
const sourceList = ref({
	data: [],
	pagination: {
		total: 3,
		pageNum: 1,
		pageSize: 10,
	},
})
let dialogVisible = ref(false)
let modalType = ref('add')
let rules = ref({
	code: [{ required: true, message: '请输入字典编码', trigger: 'blur' }],
	name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
	status: [{ required: true, message: '请选择字典状态', trigger: 'blur' }],
})
const { proxy } = getCurrentInstance()
const selectConfig = computed(() => {
	return [
		{
			label: '字典来源',
			prop: 'type',
			data: [
				{
					label: '业务字典',
					value: '1',
				},
				{
					label: '自定义字典',
					value: '2',
				},
			],
		},
		{
			label: '状态',
			prop: 'status',
			data: [
				{
					label: '禁用',
					value: '0',
				},
				{
					label: '启用',
					value: '1',
				},
			],
		},
	]
})
const config = computed(() => {
	return [
		{
			attrs: {
				label: '字典类型',
				prop: 'type',
			},
			render(type) {
				//1审核中 2审核通过 3审核不通过
				return type == 2 ? '自定义字典' : '业务字典'
			},
		},
		{
			attrs: {
				label: '字典编码',
			},
			renderHTML(row) {
				return [
					{
						attrs: {
							label: row.code,
							type: 'primary',
							text: true,
						},
						el: 'button',
						click() {
							openDtlModal(row)
						},
					},
				]
			},
		},
		{
			attrs: {
				label: '字典名称',
				prop: 'name',
			},
		},

		{
			attrs: {
				label: '状态',
				width: 100,
				prop: 'status',
			},
			render(status) {
				//1审核中 2审核通过 3审核不通过
				return status == 0 ? '禁用' : '启用'
			},
		},
		{
			attrs: {
				label: '备注',
				prop: 'remark',
			},
		},

		{
			attrs: {
				label: '操作',
				width: '200',
				align: 'right',
			},
			// 渲染 el-button，一般用在最后一列。
			renderHTML(row) {
				if (row.type == 2) {
					return [
						{
							attrs: {
								label: '修改',
								type: 'primary',
								text: true,
							},
							el: 'button',
							click() {
								getDtl(row)
							},
						},
						{
							attrs: {
								label: '删除',
								type: 'primary',
								text: true,
							},
							el: 'button',
							click() {
								// 弹窗提示是否删除
								ElMessageBox.confirm(
									'此操作将删除该数据, 是否继续?',
									'提示',
									{
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning',
									}
								).then(() => {
									// 删除
									proxy
										.post(
											'/dictTenantType/delete',
											{
												id: row.id,
											},

										)
										.then((res) => {
											ElMessage({
												message: '删除成功',
												type: 'success',
											})
											getList()
										})
								})
							},
						},
					]
				}
			},
		},
	]
})

let formData = reactive({
	data: {},
})
const formOption = reactive({
	inline: true,
	labelWidth: 100,
	itemWidth: 100,
	rules: [],
})
const byform = ref(null)
const treeListData = ref([])
const formConfig = computed(() => {
	return [
		{
			type: 'input',
			prop: 'code',
			label: '字典编码',
			required: true,
		},
		{
			type: 'input',
			prop: 'name',
			label: '字典名称',
		},
		{
			label: '启用状态',
			prop: 'status',
			type: 'select',
			data: [
				{
					label: '禁用',
					value: '0',
				},
				{
					label: '启用',
					value: '1',
				},
			],
		},
		{
			type: 'input',
			prop: 'remark',
			label: '备注',
			border: true,
		},
	]
})
const newPassword = () => {
	formData.data.password = generatePassword()
}
const generatePassword = () => {
	var length = 12,
		charset =
			'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
		password = ''
	for (var i = 0, n = charset.length; i < length; ++i) {
		password += charset.charAt(Math.floor(Math.random() * n))
	}
	return password
}

const openDtlModal = (row) => {
    formData.data = {...row,tenantId:sourceList.value.pagination.tenantId}
    dictCommonModal.value = true
}

const getTreeList = () => {
	proxy.post('/tenantInfo/list').then((message) => {
		message.map((item) => {
			item.label = item.enterpriseName
			item.id = item.tenantId
			item.children = []
		})
        treeChange(message[0])
		treeListData.value = message
		console.log(treeListData.value)
	})
}
const getList = async (req) => {
	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
	loading.value = true
	proxy
		.post('/dictTenantType/page', sourceList.value.pagination)
		.then((message) => {
			sourceList.value.data = message.rows
			sourceList.value.pagination.total = message.total
			setTimeout(() => {
				loading.value = false
			}, 200)
		})
}

const treeChange = (e) => {
	console.log(e)
	sourceList.value.pagination.tenantId = e.id
	getList({ tenantId: e.id })
}

const openModal = () => {
	dialogVisible.value = true
	modalType.value = 'add'
	formData.data = {
		userType: 1,
	}
}
const TreetenantId = ref('')
const selection = ref({
	data: [],
})
const select = (_selection, row) => {
	selection.value.data = _selection
	console.log(_selection.length)
}

const tree = ref(null)
const submitForm = () => {
	byform.value.handleSubmit((valid) => {
		
		proxy
			.post(
				'/dictTenantType/' +
					(modalType.value == 'add' ? 'add' : 'edit'),
				{
					...formData.data,
					tenantId: sourceList.value.pagination.tenantId,
				},
			)
			.then((res) => {
				ElMessage({
					message: modalType.value == 'add' ? '添加成功' : '编辑成功',
					type: 'success',
				})
				dialogVisible.value = false
				getList()
			})
	})
}

const getDept = () => {
	proxy.get('/system/user/deptTree').then((res) => {
		formConfig.value[0].data = res.data
	})
}

const getDtl = (row) => {
	formData.data = { ...row }
	modalType.value = 'edit'
	console.log(modalType.value)
	dialogVisible.value = true
}
getTreeList()
getDept()
</script>
    
  <style lang="scss" scoped>
  .dictCommonModal .el-dialog__body{
    background: #eee;
  }
.user {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	.tree {
		width: 300px;
	}
	.content {
		width: calc(100% - 320px);
	}
}
</style>