<!--
	@name: 报表权限弹层页面
	@description: 报表范围列表数据
	@ author: @liulin
	@update: 2023年2月21日
-->
<template>
	<el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" width="70%" top="5vh"
		:close-on-click-modal="false" v-if="visible">
		<div class="innerDialog">
			<div class="left">
				<p> * 只能选择一种科目信息</p>
				<el-tabs @tab-click="handleTabClick" v-model="activeName" type="card">
					<!-- 	<el-tab-pane :label="tabsList[0].name" :name="tabsList[0].value" :disabled="this.iType">
						<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="60px">
										<el-form-item :label="$t('reportManagement.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="multipleTable" :max-height="450" height="450px"
									style="width: 100%" @select="manualSelection"
									:header-cell-style="{'text-align': 'center'}">
									<el-table-column type="selection" width="55" align="center"></el-table-column>
									<el-table-column prop="code" align="center" width="200" show-overflow-tooltip>
										<template slot="header">{{ $t('international.code') }}</template>
									</el-table-column>
									<el-table-column prop="name" v-if="$i18n.locale === 'zh-CN'" show-overflow-tooltip
										align="center">
										<template slot="header">{{ $t('international.name') }}</template>
									</el-table-column>
									<el-table-column prop="nameEn" align="center" v-else show-overflow-tooltip>
										<template slot="header">{{ $t('international.nameEn') }}</template>
									</el-table-column>
								</el-table>
								<pagination :pageResult="pageResult" @size-change="handleSizeChange"
									@current-change="handleCurrentChange" />
							</div>
						</div>
					</el-tab-pane> -->
					<el-tab-pane :label="tabsList[1].name" :name="tabsList[1].value" :disabled="this.dType">
						<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="60px">
										<el-form-item :label="$t('reportManagement.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="multipleTable1" :max-height="450" style="width: 100%"
									@select="manualSelection">
									<el-table-column type="selection" width="55" align="center"></el-table-column>
									<el-table-column prop="code" width="200" align="center" show-overflow-tooltip>
										<template slot="header">{{ $t('international.code') }}</template>
									</el-table-column>
									<el-table-column prop="name" align="center" v-if="$i18n.locale === 'zh-CN'"
										show-overflow-tooltip>
										<template slot="header">{{ $t('international.name') }}</template>
									</el-table-column>
									<el-table-column prop="nameEn" align="center" v-else show-overflow-tooltip>
										<template slot="header">{{ $t('international.nameEn') }}</template>
									</el-table-column>
									<!-- 	<el-table-column prop="levelName" align="center" show-overflow-tooltip>
										<template slot="header">{{ $t('international.level') }}</template>
									</el-table-column> -->
								</el-table>
								<pagination :pageResult="pageResult" @size-change="handleSizeChange"
									@current-change="handleCurrentChange" />
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</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 pagination from '@/components/pagination'
	import tree from '@/components/tree'
	import req from '@/request.js'
	import org from '@/api/org.js'
	import uc from '@/api/uc.js'
	const portal = window.context.portal
	import internationalSubject from '@/api/basicInfo/internationalSubject.js'
	import domesticSubject from '@/api/basicInfo/domesticSubject.js'
	export default {
		name: 'authDailog',
		components: {
			pagination,
			tree
		},

		data() {
			return {
				activeName: 'domestic',
				reportId: '',
				treeData: [],
				tabsList: [{
						value: 'international',
						name: this.$t('reportManagement.international')
					},
					{
						value: 'domestic',
						name: this.$t('reportManagement.domestic')
					}
				],
				title: '',
				visible: false,
				searchForm: {},
				tableData: [],
				pageResult: {
					page: 1,
					pageSize: 20,
					total: 0
				},
				params: {
					pageBean: {
						page: 1,
						pageSize: 20
					}
				},
				treeParams: {},
				checkeds: [],
				treeKey: 'domestic',
				iType: false,
				dType: false
			}
		},
		watch: {
			checkeds: {
				handler(newValue, oldValue) {
					if (this.activeName == 'international' && this.checkeds.length > 0) {
						this.dType = true
						this.iType = false
					} else if (this.activeName == 'domestic' && this.checkeds.length > 0) {
						this.iType = true
						this.dType = false
					} else {
						this.dType = false
						this.iType = false
					}
				}
			}
		},
		methods: {
			handleNodeClick(item) {
				this.searchForm.parentId = item.id
				this.handleSearch(this.searchForm)
			},
			loadDataTree(key) {
				if (key == 'international') {
					internationalSubject.treeData({}, res => {
						if (res.state) {
							this.treeData = [{
								id: '0',
								name: this.$t('international.tree'),
								children: []
							}]
							this.treeData[0].children = res.value
						}
					})
				} else {
					domesticSubject.treeData({}, res => {
						if (res.state) {
							this.treeData = [{
								id: '0',
								name: this.$t('domestic.tree'),
								children: []
							}]
							this.treeData[0].children = res.value
						}
					})
				}
			},
			handleTabClick(tab) {
				console.log(this.activeName);
				this.checkedArrs = []
				this.checkeds = []
				this.treeKey = tab.name
				this.params = {
					pageBean: {
						page: 1,
						pageSize: 20
					}
				}
				this.loadData(this.params, tab.name)
				this.loadDataTree(tab.name)
			},
			open(reportId) {
				this.reportId = reportId
				this.title = this.$t('reportManagement.subject')
				this.visible = true
				this.checkeds = []
				this.getSubjectData()
				this.loadDataTree('domestic')
			},
			getSubjectData() {
				let params = {
					pageBean: {
						page: 1,
						pageSize: -1,
					},
				}
				req.post(portal + '/qfReportSubject/v1/getList', params).then(
					(res) => {
						this.checkeds =
							(res &&
								res.data &&
								res.data.value &&
								res.data.value.rows) || []
						this.checkeds = res.data.value.rows.map((item) => {
							return {
								code: item.subjectCode,
								name: item.subjectName,
								nameEn: item.subjectNameEn,
								...item,
							}
						})
						this.loadData(this.params, 'domestic')
					}
				)
			},
			loadData(params, key) {
				let api
				if (key == 'international') {
					api = '/qf/subject/international/info/query'
				} else {
					api = '/qf/subject/info/query'
				}
				req.post(portal + api, params).then(res => {
					this.tableData = (res && res.data && res.data.rows) || []
					this.pageResult = {
						page: (res && res.data && res.data.page) || 1,
						pageSize: (res && res.data && res.data.pageSize) || 20,
						total: (res && res.data && res.data.total) || 0
					}
					this.$nextTick(() => {
						this.checkeds.forEach(s => {
							this.tableData.forEach(u => {
								if (s.code == u.code) {
									if (this.treeKey == 'international') {
										this.$refs.multipleTable.toggleRowSelection(u)
									} else {
										this.$refs.multipleTable1.toggleRowSelection(u)
									}
								}
							})
						})
					})
					this.$set(this.tableData)
				})
			},
			handleClose() {
				this.visible = false
			},
			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, this.treeKey)
			},
			handleSelectionChange(rows) {
				console.log(rows);
				this.checkeds = rows
				console.log(this.checkeds);
			},
			manualSelection(selection, row) {
				let flag = selection.some((item) => {
					if (row.id == item.id) return true;
				})
				let userFlag = true
				this.checkeds.forEach((s, si) => {
					if (s.id == row.id) {
						userFlag = false
					}
				})
				if (flag && userFlag) {
					let params = {
						subjectCode: row.code,
						subjectName: row.name,
						subjectNameEn: row.nameEn,
						reportId: this.reportId
					}
					req
						.post(portal + '/qfReportSubject/v1/insertInfo', [params])
						.then(res => {
							this.getSubjectData()
						})
				} else if (flag && !userFlag) {

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

					// 	}
					// })
				}
				//先判断当前操作flag
				//true勾选还是false取消
				// let flag = selection.some((item) => {
				// 	if (row.id == item.id) return true;
				// })
				// if (flag) {
				// 	console.log(row);
				// 	row.reportId = this.reportId
				// 	this.checkeds.push(row)
				// } else {
				// 	this.checkeds.forEach((s, si) => {
				// 		if (s.id == row.id) {
				// 			this.checkeds.splice(si, 1)

				// 		}
				// 	})
				// }
				// console.log(this.checkeds);
			},
			// // 去重
			// 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, this.treeKey)
			},
			handleCurrentChange(page) {
				this.params.pageBean = {
					...this.params.pageBean,
					page
				}
				this.loadData(this.params, this.treeKey)
			},
			handleRightDelete(val) {
				req.get(portal + '/qfReportSubject/v1/deleteByIds' + '?ids=' + val.id).then(
					(res) => {
						this.getSubjectData()
					}
				)
			},
			submit() {
				let param = {}
				let codes = []
				this.checkeds.forEach(item => {
					codes.push({
						subjectCode: item.code,
						subjectName: item.name,
						subjectNameEn: item.nameEn,
						reportId: this.reportId
					})
				})
				param = codes
				req.post(portal + '/qfReportSubject/v1/insertInfo', param).then(res => {
					this.visible = false
					this.$emit('upDataSubject')
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.innerDialog {
		display: flex;
		max-height: 650px;

		.left {
			width: 80%;

			p {
				color: red;
			}
		}

		.right {
			padding: 10px;
			width: 20%;
			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 {
				width: 20%;
				height: 540px;
				border: 1px solid #eee;
				padding: 10px;
				margin-right: 10px;
				overflow: auto;
			}

			.tabs-right {
				width: 80%;
			}
		}
	}

	.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;
			}
		}
	}
