<template>
	<div class="full-page bg wrap-page">
		<div class="page-left" style="padding: 20px">
			<!-- 树形控件 -->
			<tree :data="treeData" @node-click="handleNodeClick" @loadTree="loadDataTree" />
		</div>
		<div class="page-right">
			<div class="search-container">
				<el-form ref="form" :model="form" label-width="68px">
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item :label="$t('international.name')">
								<el-input v-model="searchName"
									:placeholder="this.$t('common.input')+$t('international.name')+'/'+$t('international.nameEn')"
									clearable>
									<el-button slot="append" icon="el-icon-search" @click="getData(1)"></el-button>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item :label="$t('international.type')" :label-width="
				                        $i18n.locale === 'zh-CN' ? '80px' : '120px'
				                    ">
								<el-select v-model="typeValue"
									:placeholder="this.$t('common.select')+$t('international.type')" multiple @change="getData(1)"
									collapse-tags clearable>
									<el-option v-for="item in jbList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="2">
							<el-button icon="el-icon-search" type="primary" class="btn btn-plus" @click="getData(1)">
								{{ $t('common.search') }}
							</el-button>
						</el-col> -->
					</el-row>
				</el-form>
			</div>
			<div class="page-container" ref="contentPanel" style="padding: 20px">
				<div style="margin-bottom: 10px" ref="btnPanel">
					<el-button icon="el-icon-plus" type="primary" class="btn btn-plus" @click="handleAdd">
						{{ $t('common.add') }}
					</el-button>
					<el-button slot="reference" :disabled="!multipleSelection.length" icon="el-icon-delete"
						@click="handleDelete" type="danger">
						{{ $t('common.delete') }}
					</el-button>
					<el-button icon="el-icon-sort" @click="savePropertyf" type="success">
						{{ $t('common.savesort') }}
					</el-button>
					<el-button icon="el-icon-setting" @click="editTree" type="warning">
						{{ $t('international.move') }}
					</el-button>
				</div>
				<div :style="{width: '100%', height: `${tableMaxHeight}` + 'px'}">
					<el-table stripe size="mini" v-loading="loading" ref="multipleSelection" :data="tableData"
						:max-height="tableMaxHeight" :style="{width: '100%'}"
						:header-cell-style="{'text-align': 'center'}" :cell-style="{ textAlign: 'center' }"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="code" show-overflow-tooltip width="100"
							:label="$t('international.code')">
						</el-table-column>
						<el-table-column prop="name" show-overflow-tooltip min-width="200"
							:label="$t('international.name')">
						</el-table-column>
						<el-table-column prop="nameEn" show-overflow-tooltip min-width="290"
							:label="$t('international.nameEn')">
						</el-table-column>
						<el-table-column prop="unit" show-overflow-tooltip width="120"
							:label="$t('international.unit')">
							<template v-slot="{row}">
								{{ getDictName('sjdw', row.unit) }}
							</template>
						</el-table-column>
						<el-table-column prop="typeName" show-overflow-tooltip min-width="180"
							:label="$t('international.type')">
						</el-table-column>
						<el-table-column prop="sn" show-overflow-tooltip width="120"
							:label="$t('international.sortnumber')">
							<template slot-scope="scope">
								<el-input-number controls-position="right" size="small" @input="insort(scope.row)"
									v-model="scope.row.sn" style="width: 100px">
								</el-input-number>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip width="100" align="center" fixed="right"
							:label="$t('common.operation')">
							<template slot-scope="scope">
								<el-link icon="el-icon-edit" type="primary" :underline="false" class="cloumn-btn"
									@click="handleDbClick(scope.row)">
									{{ $t('common.edit') }}
								</el-link>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<pagination ref="paginationPanel" style="margin-top: 5px" :pageResult="queryParam.pageBean"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>


		<!-- <el-row :gutter="10" class="main-table-container flex">
			<el-col :span="19" class="table-container" ref="contentPanel" style="padding: 20px">
				<div style="margin-bottom: 10px" ref="btnPanel">
					<el-button icon="el-icon-plus" type="primary" class="btn btn-plus" @click="handleAdd">
						{{ $t('common.add') }}
					</el-button>
					<el-button slot="reference" :disabled="!multipleSelection.length" icon="el-icon-delete"
						@click="handleDelete" type="danger">
						{{ $t('common.delete') }}
					</el-button>
					<el-button icon="el-icon-sort" @click="savePropertyf" type="success">
						{{ $t('common.savesort') }}
					</el-button>
					<el-button icon="el-icon-setting" @click="editTree" type="warning">
						{{ $t('international.move') }}
					</el-button>
				</div>
				<div :style="{width: '100%', height: `${tableMaxHeight}` + 'px'}">
					<el-table stripe size="mini" v-loading="loading" ref="multipleSelection" :data="tableData"
						:max-height="tableMaxHeight" :style="{width: '100%'}"
						:header-cell-style="{'text-align': 'center'}" :cell-style="{ textAlign: 'center' }"
						@selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="code" show-overflow-tooltip width="100"
							:label="$t('international.code')">
						</el-table-column>
						<el-table-column prop="name" show-overflow-tooltip min-width="200"
							:label="$t('international.name')">
						</el-table-column>
						<el-table-column prop="nameEn" show-overflow-tooltip min-width="290"
							:label="$t('international.nameEn')">
						</el-table-column>
						<el-table-column prop="unit" show-overflow-tooltip width="120"
							:label="$t('international.unit')">
						</el-table-column>
						<el-table-column prop="typeName" show-overflow-tooltip min-width="180"
							:label="$t('international.type')">
						</el-table-column>
						<el-table-column prop="sn" show-overflow-tooltip width="120"
							:label="$t('international.sortnumber')">
							<template slot-scope="scope">
								<el-input-number controls-position="right" size="small" @input="insort(scope.row)"
									v-model="scope.row.sn" style="width: 100px">
								</el-input-number>
							</template>
						</el-table-column>
						<el-table-column show-overflow-tooltip width="100" align="center" fixed="right"
							:label="$t('common.operation')">
							<template slot-scope="scope">
								<el-link icon="el-icon-edit" type="primary" :underline="false" class="cloumn-btn"
									@click="handleDbClick(scope.row)">
									{{ $t('common.edit') }}
								</el-link>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<pagination ref="paginationPanel" style="margin-top: 10px" :pageResult="queryParam.pageBean"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</el-col>
		</el-row> -->
		<internationDialog ref="internationDialog" @getData="callData">></internationDialog>
		<internationTree ref="internationTree" @getData="callData" class="move-tree">></internationTree>
	</div>
</template>

<script>
	import tree from '@/components/tree'
	import pagination from '@/components/pagination'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import utils from '@/utils.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import internationalSubject from '@/api/basicInfo/internationalSubject.js'
	import internationDialog from './components/internationDialog.vue'
	import internationTree from './components/internationTree.vue'
	export default {
		name: 'InternationalSubject',
		components: {
			tree,
			pagination,
			internationDialog,
			internationTree,
		},
		mixins: [TableMixin],
		data() {
			return {
				tableMaxHeight: 400,
				form: {
					keyWord: '',
					qualification: '',
				},
				defaultProps: {
					children: 'children',
					label: 'name',
				},
				currentKey: null,
				filterText: '',
				expandAll: false,
				treeData: [{
					id: '0',
					name: this.$t('international.tree'),
					children: [],
				}, ],
				loading: false,
				tableData: [],
				multipleSelection: [],
				searchName: '',
				querys: [{
						group: 'main',
						operation: 'LIKE',
						parentGroup: '',
						property: 'code',
						relation: 'AND',
						value: '',
					},
					{
						group: 'quick',
						operation: 'LIKE',
						parentGroup: '',
						property: 'name',
						relation: 'OR',
						value: '',
					},
					{
						group: 'main',
						operation: 'EQUAL',
						parentGroup: '',
						property: 'parentId',
						relation: 'AND',
						value: '',
					},
					{
						group: 'quick',
						operation: 'LIKE',
						parentGroup: '',
						property: 'nameEn',
						relation: 'OR',
						value: '',
					},
					{
						group: 'main',
						operation: 'IN',
						parentGroup: '',
						property: 'type',
						relation: 'AND',
						value: '',
					},
				],
				typeValue: [],
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: 20,
						total: 0,
					},
					sorter: [{
						direction: 'ASC',
						property: 'sn',
					}, ],
				},
				total: 0,
				jbList: [],
				parentId: 0,
				sortList: {},
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val)
			},
		},

		created() {
			this.jbList = dictUtils.getDictItemsFromCache('subjec_type')
			// if (this.$i18n.locale === 'zh-CN') {
			// 	this.jbList = dictUtils.getDictItemsFromCache('subjec_type')
			// } else {
			// 	this.jbList = dictUtils.getDictItemsFromCache('subjec_type_en')
			// }
			this.loadDataTree()
			this.getData()
		},
		mounted() {},
		methods: {
			getDictName(code, value) {
				return utils.getDictName(code, value)
			},
			//获取数据
			getData(page) {
				console.log(this.typeValue)
				if (page) {
					this.queryParam.pageBean.page = page
				}
				this.loading = true
				this.tableData = []
				this.queryParam.querys = []
				if (this.searchName) {
					this.querys[1].value = this.searchName
					this.querys[3].value = this.searchName
				} else {
					this.querys[1].value = ''
					this.querys[3].value = ''
				}
				if (this.typeValue.length > 0) {
					this.querys[4].value = this.typeValue.join(',')
				}
				if (this.querys[0].value) {
					this.queryParam.querys.push(this.querys[0])
				}
				if (this.querys[1].value) {
					this.queryParam.querys.push(this.querys[1])
				}
				if (this.querys[2].value) {
					this.queryParam.querys.push(this.querys[2])
				}
				if (this.querys[3].value) {
					this.queryParam.querys.push(this.querys[3])
				}
				if (this.querys[4].value) {
					this.queryParam.querys.push(this.querys[4])
				}
				internationalSubject.pageQuery(this.queryParam, (res) => {
					if (res.rows) {
						this.tableData = res.rows
						this.tableData.forEach((e) => {
							this.jbList.forEach((j) => {
								let typeName = ''
								e.type.split(',').forEach((t) => {
									if (t == j.value) {
										typeName += j.name + ','
										console.log(j.name)
									}
								})
								if (typeName.length > 0) {
									e.typeName = typeName.substr(
										0,
										typeName.length - 1
									)
								}
							})
						})
						this.queryParam.pageBean.total = res.total
						this.$set(this.tableData)
						this.loading = false
					}
				})
			},
			expandHandle() {
				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
			},
			//树选中
			handleNodeClick(data) {
				this.parentId = data.id
				this.querys[2].value = data.id
				this.getData(1)
			},
			//添加
			handleAdd() {
				if (!this.parentId) {
					this.$message.warning(this.$t('common.noParentId'))
					return
				}
				this.$refs.internationDialog.add(this.parentId)
			},
			//删除
			handleDelete() {
				this.$confirm(
						this.$t('common.sureDelete'),
						this.$t('common.tips'), {
							confirmButtonText: this.$t('common.confirm'),
							cancelButtonText: this.$t('common.cancel'),
							type: 'warning',
						}
					)
					.then(() => {
						internationalSubject.delDate(
							this.multipleSelection,
							(res) => {
								if (res.state) {
									this.$notify({
										type: 'success',
										message: '删除成功',
										duration: 2000,
									})
								}
								this.callData()
							}
						)
					})
					.catch(() => {})
			},
			//修改
			handleDbClick(data) {
				this.$refs.internationDialog.edit(data.id)
			},
			// 刷新树数据
			loadDataTree() {
				internationalSubject.treeData({}, (res) => {
					if (res.state) {
						this.treeData[0].children = res.value
						this.parentId = ''
					}
				})
			},
			//表格选中
			handleSelectionChange(val) {
				this.multipleSelection = []
				this.$refs.multipleSelection.selection.forEach((item) => {
					this.multipleSelection.push(item.id)
				})
			},
			//展示数量
			handleSizeChange(val) {
				this.queryParam.pageBean.pageSize = val
				this.getData()
			},
			//表格页数
			handleCurrentChange(val) {
				this.queryParam.pageBean.page = val
				this.getData()
			},
			//排序
			insort(val) {
				let id = val.id
				let value = val.sn
				this.sortList[id] = value
			},
			// 保存排序
			savePropertyf() {
				this.$confirm(this.$t('common.sureSort'), this.$t('common.tips'), {
						confirmButtonText: this.$t('common.confirm'),
						cancelButtonText: this.$t('common.cancel'),
						type: 'warning',
					})
					.then(() => {
						internationalSubject.sortData(this.sortList, (res) => {
							if (res.state) {
								this.$notify({
									type: 'success',
									message: res.message,
									duration: 2000,
								})
								this.getData()
							} else {
								this.$message.warning(res.message)
							}
						})
					})
					.catch(() => {})
			},
			//修改树
			editTree() {
				this.$refs.internationTree.add()
			},
			callData() {
				this.loadDataTree()
				this.getData()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.common-tree-container {
		height: calc(100% - 70PX);
		margin-top: 0.52083vw;
		padding: 1.04167vw 1.04167vw;
		background-color: #fff;
		position: relative;
		box-sizing: border-box;
		overflow-y: auto;
		border-radius: 20px;
		box-shadow: 0px 0px 0.625vw 0 rgba(92, 102, 83, 0.2);
	}

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

		i {
			font-size: 16px;
			margin-left: 5px;
			font-weight: 600;
			cursor: pointer
		}
	}

	// .btn {
	// 	height: 40px;
	// }

	.btn-plus {
		// background-color: #0147eb;
	}

	.move-tree /deep/ .el-tree {
		height: 90%;
		overflow-y: auto;
		border: none;
	}

	// /deep/ .el-tree-node {
	//    white-space: normal;
	//  }

	/deep/ .el-tree-node__content {
		padding: 5px 0;
	}
</style>
