<!-- 专业装备 -->
<template>
	<div>
		<el-dialog :title="$t('domestic.correlation')" :visible="visible" :before-close="handleClose" custom-class="bbsl-location-dialog"
			:close-on-click-modal="false" top="5vh" width="75%">
			<el-container>
				<el-aside width="270px" class="left-aside">
					<el-card class="box-card org-find-card" shadow="never">
						<div slot="header" class="clearfix">
							<span>{{$t('international.tree')}}</span>
						</div>
						<div class="common-tree-container">
							<div class="container-head">
								<el-input :placeholder="$t('navigator.searchTip')" v-model="filterText" clearable>
								</el-input>
								<i class="cqlt-icon cqlt-icon-shouqi" @click="expandHandle" v-if="expandAll"></i>
								<i class="cqlt-icon cqlt-icon-zhankai " @click="expandHandle" v-else></i>
								<i class="cqlt-icon cqlt-icon-shuaxin" @click="getTree"></i>
							</div>
							<el-tree ref="tree" highlight-current v-if="treeData.length" :data="treeData"
								:props="defaultProps" @node-click="handleNodeClick" :filter-node-method="filterNode"
								node-key="id" :expand-on-click-node="expandAll" :current-node-key="currentKey">
							</el-tree>
						</div>
					</el-card>
				</el-aside>
				<el-container>
					<el-header class="middle-header">
						<div style="padding: 10px 0">
							<el-input size="small" style="width:380px" clearable :placeholder="$t('navigator.searchTip')"
								prefix-icon="el-icon-search" @keyup.enter.native="searchEnterFun"
								v-model="querys[1].value">
							</el-input>
							<el-button style="margin-left: 20px" size="small" type="primary" icon="el-icon-search"
								@click="searchEnterFun()">	{{$t('common.search')}}</el-button>
							<!-- <el-button size="small" @click="reset()" icon="el-icon-refresh">重置</el-button> -->
						</div>
					</el-header>
					<el-main style="padding:0">
						<el-table size="medium" ref="multipleTable" :data="UserData" stripe border height="400"
							:row-key='binRowKey' @select="manualSelection">
							<el-table-column type="selection" align="center" width="45"></el-table-column>
							<el-table-column prop="name" show-overflow-tooltip>
								<template slot="header" slot-scope="scope">
									{{ $t('international.name')}}
								</template>
							</el-table-column>
							<el-table-column prop="nameEn" show-overflow-tooltip>
								<template slot="header" slot-scope="scope">
									{{ $t('international.nameEn')}}
								</template>
							</el-table-column>
							<el-table-column prop="code" show-overflow-tooltip>
								<template slot="header" slot-scope="scope">
									{{ $t('international.code')}}
								</template>
							</el-table-column>
							<el-table-column prop="unit" show-overflow-tooltip>
								<template slot="header" slot-scope="scope">
									{{ $t('international.unit')}}
								</template>
							</el-table-column>
							<el-table-column prop="type" show-overflow-tooltip>
								<template slot="header" slot-scope="scope">
									{{ $t('international.type')}}
								</template>
							</el-table-column>
							<el-table-column prop="levelName" show-overflow-tooltip>
								<template slot="header" slot-scope="scope">
									{{ $t('international.level')}}
								</template>
							</el-table-column>

						</el-table>
					</el-main>
					<el-pagination align="right" background ref="paginationPanel" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" :current-page="queryParam.pageBean.page"
						:page-sizes="[20, 30, 40, 50]" :page-size="queryParam.pageBean.pageSize"
						layout="prev, pager, next,total, sizes, jumper" :total="total"></el-pagination>
				</el-container>
				<el-aside width="200px" class="select-aside">
					<el-header class="select-header">
						<span>{{ $t('domestic.selected')}}</span>
					</el-header>
					<div class="select-tree-div">
						<el-tree ref="selectTree" node-key="interCode" :props="selectUserProps" :data="selectUser"
							:render-content="renderContent"></el-tree>
					</div>
				</el-aside>
			</el-container>
			<span slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button size="small" type="primary" @click="dialogConfirm">{{$t('domestic.save')}}</el-button>
				<el-button size="small" @click="handleClose">{{$t('domestic.cancel')}}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import internationalSubject from '@/api/basicInfo/internationalSubject.js'
	import domesticSubject from '@/api/basicInfo/domesticSubject.js'
	export default {
		mixins: [TableMixin],
		name: 'SelectOrganize',
		props: ["userTypeId"],
		data() {
			return {
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: 20
					}
				},
				total: 0,
				querys: [{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'parentId',
						relation: 'AND',
						value: ''
					},
					{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'name',
						relation: 'AND',
						value: ''
					},
					{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'level',
						relation: 'AND',
						value: ''
					},
					// {
					// 	group: 'main',
					// 	operation: 'RIGHT_LIKE',
					// 	parentGroup: '',
					// 	property: 'name',
					// 	relation: 'AND',
					// 	value: ''
					// },

				],
				jbList:[],
				superiorData:{},
				
				
				
				
				newParam: {
					pageBean: {
						pageSize: 20,
						page: 1
					},
					querys: [{
						group: 'main',
						operation: 'RIGHT_LIKE',
						parentGroup: '',
						property: 'name',
						relation: 'AND',
						value: ''
					}, ],

				},
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'name',
				},
				visible: false,
				UserData: [],
				selectUser: [],
				selectUserProps: {
					label: "internationalName"
				},
				multipleSelection: null,
				userlength: null,
				userInfoVos: [],
				currentKey: null,
				trainTypeListL: [],
				filterText: '',
				expandAll: false
			}
		},
		created() {
			if (this.$i18n.locale === 'zh-CN') {
				this.jbList = dictUtils.getDictItemsFromCache('jb')
			} else {
				this.jbList = dictUtils.getDictItemsFromCache('jb_en')
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val);
			},
			currentKey: {
				handler(value) {
					if (value) {
						this.$nextTick(
							() => {
								this.$refs.tree.setCurrentKey(this.currentKey);
							});
					}
				},
				immediate: true,
				valType: false
			},
		},
		mounted() {},
		methods: {
			expandHandle() {
				console.log(this.$refs.tree.store);
				this.expandAll = !this.expandAll;
				this.expandNodes(this.$refs.tree.store.root);
			},
			// 遍历树形数据，设置每一项的expanded属性，实现展开收起
			expandNodes(node) {
				node.expanded = this.expandAll;
				for (let i = 0; i < node.childNodes.length; i++) {
					node.childNodes[i].expanded = this.expandAll;
					if (node.childNodes[i].childNodes.length > 0) {
						this.expandNodes(node.childNodes[i]);
					}
				}
			},
			filterNode(value, data) {
				if (!value) return true;
				return data.name.indexOf(value) !== -1;
			},
			add(val) {
				console.log(val);
				// this.superiorData=val
				this.selectUser = []
				this.visible = true
				domesticSubject.detailId(val.id,res=>{
					if(res){
						this.superiorData=res
						this.selectUser=res.list
						this.$set(this.selectUser)
						console.log(this.selectUser);
					}
				})
				// if(val){
				// 	this.userInfoVos = val
				// 	this.selectUser = JSON.parse(JSON.stringify(val))
				// 	this.userlength=val.length
				// }
				// console.log(this.selectUser);
				this.multipleSelection = null
				this.getTree()
			},
			// 获取列表
			loadData(page) {
				if (page) {
					this.queryParam.pageBean.page = page
				}
				this.UserData = []
				this.queryParam.querys = []
				if (this.querys[0].value) {
					this.queryParam.querys.push(this.querys[0])
				}
				if (this.querys[1].value) {
					this.queryParam.querys.push(this.querys[1])
				}
				internationalSubject.pageQuery(this.queryParam, res => {
					this.UserData = res.rows
					this.UserData.forEach(e=>{
						this.jbList.forEach(j=>{
							if(e.level==j.value){
								e.levelName=j.name
							}
						})
					})
					this.$nextTick(()=>{
						this.selectUser.forEach(s=>{
							this.UserData.forEach(u=>{
								if(s.interCode==u.code){
									console.log(2);
										this.$refs.multipleTable.toggleRowSelection(u)
								}
							})
						})
					})
					this.total = res.total
					this.$set(this.UserData)
				})
			},
			// 获取树
			getTree() {
				internationalSubject.treeData({}, res => {
					if(res.value.length>0){
						this.treeData = res.value
						this.currentKey=this.treeData[0].id
						this.querys[0].value = this.currentKey
						this.loadData(1)
					}
				})
			},
			// 关闭新增人员窗口
			handleClose() {
				this.visible = false
				this.treeData = []
				this.UserData = []
				this.selectUser = []
				this.superiorData={}
			},
			// 树
			handleNodeClick(item) {
				this.querys[0].value = item.id
				this.loadData(1)
			},
			// 中间列表
			searchEnterFun() {
				this.loadData(1)
			},
			dialogConfirm() {
				console.log(this.selectUser);
				this.superiorData.list=this.selectUser
				domesticSubject.correlation(this.superiorData,res=>{
					if(res.state){
						this.$notify({
							type: 'success',
							message: this.$t('domestic.success'),
							duration: 2000
						})
						this.handleClose()
						this.$emit('getData')
					}
				})
			},
			binRowKey(row) {
				return row.id
			},
			selectable(row) {
				let type = true
				this.userInfoVos.forEach((u, ui) => {
					if (ui <= this.userlength) {
						if (row.id == u.id) {
							type = false
						}
					}
				})
				return type
			},
			manualSelection(selection, row) {
					//先判断当前操作flag
					//true勾选还是false取消
					let flag = selection.some((item) => {
						if (row.id == item.id) return true;
					})
					if (flag) {
						this.selectUser.push({
							internationalName:row.name,
							// nameEn:row.nameEn,
							interCode:row.code,
							interId:row.id,
							expression:'',
							subCode:this.superiorData.code,
							subId:this.superiorData.id
						})
					} else {
						this.selectUser.forEach((s, si) => {
							if (s.interCode == row.code) {
								this.selectUser.splice(si, 1)

							}
						})
					}
					console.log(this.selectUser);
			},
			handleSelectionChange(val) {
				this.selectUser = val
			},
			renderContent(h, {
				node,
				data,
				store
			}) {
				return (
				    <span
				        class="custom-tree-node"
				        on-mouseover={() => {
				            this.show = true
				        }}
				        on-mouseout={() => {
				            this.show = false
				        }}
				    >
				        <span>{data.internationalName}</span>
				        <span>
				                <el-button

				                    style="width:100%;border:0;margin:0;"
				                    size="mini"
				                    // icon="el-icon-delete"
				                    type="text"
				                    on-click={() => this.remove(data)}
				                >
				                    删除
				                </el-button>
				        </span>
			     </span>
				)
			},
			remove(val) {
				console.log(val);
				this.selectUser.forEach((u, ui) => {
					if (u.id == val.id) {
						this.selectUser.splice(ui, 1)
					}
				})
				this.userInfoVos = JSON.parse(JSON.stringify(this.selectUser))
				this.userlength = this.selectUser.length
				this.loadData(1)
			},
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize=val
				this.loadData()
			},
			handleCurrentChange(val) {
				this.queryParam.pageBean.page=val
				this.loadData()

			}

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.el-dialog__body {
		height: 100% !important;
		max-height: 80%
	}

	.left-aside {
		border-right: 1px solid #eee;
		padding: 10px;
	}

	.select-aside {
		border-left: 1px solid #eee;
	}

	.el-card {
		height: 96% !important;
	}

	.el-tree {
		max-height: 400px;
		overflow-y: auto;
		border: none;
	}

	.select-header {
		border-bottom: 1px solid #EBEEF5;
		line-height: 60px;
	}

	/deep/.el-table__header-wrapper .el-checkbox {
		//找到表头那一行，然后把里面的复选框隐藏掉
		display: none
	}

	.container-head {
		display: flex;
		align-items: center;

		i {
			font-size: 16px;
			margin-left: 5px;
			font-weight: 600;
			cursor: pointer
		}
	}
	.select-tree-div{
		height: calc(100% - 100PX);
	}
</style>
