<!--
	@name: 报表权限弹层页面
	@description: 报表范围列表数据
	@ author: @liulin
	@update: 2023年2月21日
-->
<template>
	<el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" width="70%"
		:close-on-click-modal="false" v-if="visible">
		<div class="innerDialog">
			<div class="left">
				<div class="innerDialog-tabs">
					<div class="tabs-left">
						<!-- 树形控件 -->
						<tree :data="treeData" @node-click="handleNodeClick" @loadTree="loadDataTree" />
					</div>
					<div class="tabs-right">
						<div class="dialog-header">
							<el-form ref="form" :model="searchForm" label-width="70px">
								<el-form-item :label="$t('overseasEnterpriseInfo.name')">
									<el-input v-model="searchForm.name" clearable
										:placeholder="this.$t('navigator.searchTip')">
									</el-input>
								</el-form-item>
							</el-form>
							<el-divider direction="vertical" class="line"></el-divider>
							<div>
								<el-button icon="el-icon-search" type="primary" class="btn btn-plus"
									@click="handleSearch">
									{{ this.$t('common.search') }}
								</el-button>
							</div>
						</div>

						<el-table :data="tableData" ref="table" top="5vh" :max-height="450" style="width: 100%"
							:header-cell-style="{'text-align': 'center'}" @select="handleSelectionChange">
							<el-table-column type="selection" width="55" align="center"></el-table-column>
							<el-table-column show-overflow-tooltip prop="code" width="200" align="center">
								<template slot="header">
									{{ $t('overseasEnterpriseInfo.code') }}
								</template>
							</el-table-column>
							<el-table-column v-if="$i18n.locale === 'zh-CN'" show-overflow-tooltip prop="name"
								min-width="150" align="center">
								<template slot="header">
									{{ $t('overseasEnterpriseInfo.name') }}
								</template>
							</el-table-column>
							<el-table-column v-else show-overflow-tooltip prop="nameEn" min-width="150" align="center">
								<template slot="header">
									{{ $t('overseasEnterpriseInfo.name') }}
								</template>
							</el-table-column>
						</el-table>
						<pagination :pageResult="pageResult" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
			<div class="right">
				<div class="text">{{ $t('reportManagement.selected') }}</div>
				<template v-if="checkeds.length !== 0">
					<div class="main">
						<div class="item" v-for="item in checkeds" :key="item.name">
							<span class="item-span">{{ item.name }}</span>
							<el-link icon="el-icon-delete" :underline="false" type="danger"
								@click="handleRightDelete(item)">
								{{ $t('common.delete') }}
							</el-link>
						</div>
					</div>
				</template>
				<span style="padding: 10px;display:inline-block" v-else>
					{{ $t('common.empty') }}
				</span>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- 	<el-button type="primary" @click="submit">
				{{ $t('common.save') }}
			</el-button> -->
			<el-button @click="handleClose">
				{{ $t('common.cancel') }}
			</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import tree from '@/components/tree'
	import pagination from '@/components/pagination'
	import req from '@/request.js'
	import org from '@/api/org.js'
	import uc from '@/api/uc.js'
	const portal = window.context.portal
	export default {
		name: 'authDailog',
		components: {
			pagination,
			tree
		},
		data() {
			return {
				reportId: '',
				treeData: [],
				title: '',
				visible: false,
				searchForm: {},
				tableData: [],
				pageResult: {
					page: 1,
					pageSize: 20,
					total: 0
				},
				params: {
					pageBean: {
						page: 1,
						pageSize: 20
					}
				},
				checkeds: [],
				activeName: 'org',
				tabKey: ''
			}
		},
		created() {
			this.loadDataTree()
			this.loadData(this.params)
		},
		methods: {
			open(reportId) {
				this.reportId = reportId
				this.title = this.$t('reportManagement.rang')
				this.visible = true
				this.checkeds = []
				this.getcheckeds()
				this.loadDataTree()
			},
			getcheckeds() {
				req.get(
					portal +
					`/qfReportRange/v1/getList?pageNum=1&pageSize=-1&reportId=${this.reportId}`
				).then((res) => {
					if (res) {
						this.checkeds = res.data.value.rows
					}
					this.loadData(this.params)
				})
			},
			loadData(params) {
				req.post(portal + '/qfEnterpriseInfo/v1/getList', params).then(res => {
					this.tableData =
						(res && res.data && res.data.value && res.data.value.rows) || []
					this.$nextTick(() => {
						this.checkeds.forEach(s => {
							this.tableData.forEach(u => {
								if (s.enterpriseId == u.id) {
									this.$refs.table.toggleRowSelection(
										u, true)
								}
							})
						})
					})
					this.pageResult = {
						page: (res && res.data && res.data.value && res.data.value.page) || 1,
						pageSize: (res && res.data && res.data.value && res.data.value.pageSize) ||
							20,
						total: (res && res.data && res.data.value && res.data.value.total) || 0
					}
				})
			},
			handleClose() {
				this.visible = false
			},
			loadDataTree() {
				req.post(portal + '/qfEnterpriseInfo/v1/getTree').then(res => {
					this.treeData = (res && res.data && res.data.value) || []
				})
			},
			handleNodeClick(data) {
				this.searchForm.parentId = data.id
				this.handleSearch()
			},
			handleSearch() {
				let obj = this.searchForm
				let querys = []
				for (let i in obj) {
					if (obj[i]) {
						querys.push({
							group: 'main',
							operation: 'LIKE',
							parentGroup: '',
							property: i,
							relation: 'AND',
							value: obj[i]
						})
					}
				}
				this.params.querys = querys
				this.loadData(this.params)
			},
			handleSelectionChange(selection, row) {
				let flag = selection.some((item) => {
					if (row.id == item.id) return true;
				})
				let userFlag = true
				this.checkeds.forEach((s, si) => {
					if (s.enterpriseId == row.id) {
						userFlag = false
					}
				})
				if (flag && userFlag) {
					let params = {
						enterpriseCode: row.code,
						enterpriseId: row.id,
						name: row.name,
						nameEn: row.nameEn,
						reportId: this.reportId
					}
					// this.selectUser.push(params)
					req
						.post(portal + '/qfReportRange/v1/insertInfo', [params])
						.then(res => {
							this.getcheckeds()
						})
				} else if (flag && !userFlag) {

				} else {
					// this.selectUser.forEach((s, si) => {
					// 	if (s.objectId == row.id) {
					// 		this.handleRightDelete(row)

					// 	}
					// })
				}
			},
			// 去重
			uniqueFunc(arr, uniId) {
				const res = new Map()
				return arr.filter(
					item => !res.has(item[uniId]) && res.set(item[uniId], 1)
				)
			},
			handleSizeChange(pageSize) {
				this.params.pageBean = {
					...this.params.pageBean,
					pageSize
				}
				this.loadData(this.params)
			},
			handleCurrentChange(page) {
				this.params.pageBean = {
					...this.params.pageBean,
					page
				}
				this.loadData(this.params)
			},
			handleRightDelete(val) {
				req.get(portal + '/qfReportRange/v1/deleteByIds' + '?ids=' + val.id).then(
					(res) => {
						this.getcheckeds()
					}
				)
				// let rows = this.checkeds
				// rows = rows.filter(item => item.id == id)
				// if (rows.length !== 0) {
				// 	rows.forEach(row => {
				// 		this.$refs.table.toggleRowSelection(row)
				// 	})
				// } else {
				// 	this.$refs.table.clearSelection()
				// }
			},
			submit() {
				let data = this.checkeds
				let params = []
				data.forEach(item => {
					params.push({
						enterpriseCode: item.code,
						enterpriseId: item.id,
						name: item.name,
						nameEn: item.nameEn,
						reportId: this.reportId
					})
				})
				req.post(portal + '/qfReportRange/v1/insertInfo', params).then(res => {
					this.visible = false
					this.$emit('upDataRang')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.innerDialog {
		display: flex;
		max-height: 650px;

		.left {
			flex: 8;
		}

		.right {
			width: 180px;
			border: 1px solid #eee;
			margin-left: 10px;
			margin-top: 60px;

			.main {
				height: 450px;
				overflow: auto;
				padding: 10px;
				box-sizing: border-box;
			}

			/deep/ .el-checkbox__label {
				max-width: 120px;
				text-overflow: ellipsis;
				/*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
				white-space: nowrap;
				/*让文字不换行*/
				overflow: hidden;
				/*超出要隐藏*/
			}

			.item-span {
				max-width: 80px;
				text-overflow: ellipsis;
				/*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
				white-space: nowrap;
				/*让文字不换行*/
				overflow: hidden;
				/*超出要隐藏*/
			}

			.text {
				height: 50px;
				line-height: 50px;
				padding-left: 20px;
				font-size: 14px;
				border-bottom: 1px solid #eee;
			}

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;

				&:nth-child(n + 1) {
					padding-bottom: 0;
				}

				&:nth-child(1) {
					padding-top: 0;
				}
			}

			.grop {
				padding-left: 20px;
				padding-top: 10px;
				display: flex;
				flex-direction: column;
				border: 1px solid #eee;
				padding-right: 10px;
			}

			/deep/ .el-checkbox {
				margin-right: 0;
				height: 24px;
				display: flex;
				align-items: center;
			}
		}

		/deep/ .el-tabs__nav {
			padding-top: 0;
		}

		/deep/ .el-tabs,
		/deep/ .el-tabs__header,
		/deep/ .el-tabs__nav-wrap,
		/deep/ .el-tabs__nav-scroll,
		/deep/ .el-tabs__nav {
			height: inherit;
		}

		.innerDialog-tabs {
			display: flex;

			.tabs-left {
				flex: 1;
				width: 200px;
				height: 540px;
				border: 1px solid #eee;
				padding: 10px;
				margin-right: 10px;
				overflow: auto;
			}

			.tabs-right {
				flex: 3;
			}
		}
	}

	.dialog-header {
		display: flex;
		height: 50px;
		align-items: center;
		margin-bottom: 10px;

		.line {
			margin: 0 30px;
		}

		.btn-plus {
			margin-right: 10px;
		}

		/deep/ .el-form-item--small.el-form-item {
			margin-bottom: 0;
		}

		/deep/ .el-form {
			height: 40px;
		}
	}
</style>
<style lang="scss" scoped>
	.el-dialog__wrapper {
		/deep/ .el-dialog {
			height: 750px;

			.el-dialog__body {
				height: 610px;
			}
		}
	}
