<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('domestic.name')">
								<el-input v-model="searchName"
									:placeholder="this.$t('common.input')+$t('domestic.name')+'/'+$t('domestic.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('domestic.type')" :label-width="
				                    $i18n.locale === 'zh-CN' ? '80px' : '120px'
				                ">
								<el-select v-model="querys[3].value" :placeholder="this.$t('common.select')" multiple @change="getData(1)"
									collapse-tags clearable>
									<el-option v-for="item in kmList" :key="item.value" :label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</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"
						:cell-style="{ textAlign: 'center' }" :max-height="tableMaxHeight" :style="{width: '100%'}"
						:header-cell-style="{'text-align': 'center'}" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column prop="code" show-overflow-tooltip :label="$t('domestic.code')">
						</el-table-column>
						<el-table-column prop="name" show-overflow-tooltip min-width="120" :label="$t('domestic.name')">
						</el-table-column>
						<el-table-column prop="nameEn" show-overflow-tooltip :label="$t('domestic.nameEn')">
						</el-table-column>
						<el-table-column prop="unit" show-overflow-tooltip :label="$t('domestic.unit')">
						</el-table-column>
						<el-table-column prop="typeName" show-overflow-tooltip :label="$t('domestic.type')">
						</el-table-column>
						<el-table-column prop="rateTypeName" :label="$t('domestic.rateType')" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="sn" min-width="120" :label="$t('domestic.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 min-width="180" align="center"
							:label="$t('common.operation')" fixed="right">
							<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>
								<el-link icon="el-icon-paperclip" type="primary" :underline="false"
									@click="openCorrelation(scope.row)">{{ $t('domestic.correlation') }}</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>

		<domesticDialog ref="domesticDialog" @getData="callData"></domesticDialog>
		<domesticTree ref="domesticTree" @getData="callData" class="move-tree"></domesticTree>
		<correlationDialog ref="correlationDialog" @getData="callData"></correlationDialog>
	</div>
</template>

<script>
	import tree from '@/components/tree'
	import pagination from '@/components/pagination'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import domesticSubject from '@/api/basicInfo/domesticSubject.js'
	import domesticDialog from './components/domesticDialog.vue'
	import domesticTree from './components/domesticTree.vue'
	import correlationDialog from './components/correlationDialog.vue'
	export default {
		name: 'domesticSubject',
		components: {
			tree,
			pagination,
			domesticTree,
			domesticDialog,
			correlationDialog,
		},
		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('domestic.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: 'main',
						operation: 'IN',
						parentGroup: '',
						property: 'type',
						relation: 'AND',
						value: '',
					},
					{
						group: 'quick',
						operation: 'LIKE',
						parentGroup: '',
						property: 'nameEn',
						relation: 'OR',
						value: '',
					}
				],
				queryParam: {
					pageBean: {
						page: 1,
						pageSize: 20,
						total: 0,
					},
				},
				total: 0,
				kmList: [],
				hllxList: [],
				sortList: {},
			}
		},
		watch: {
			filterText(val) {
				this.$refs.tree.filter(val)
			},
		},

		created() {
			if (this.$i18n.locale === 'zh-CN') {
				this.kmList = dictUtils.getDictItemsFromCache('subjec_type')
				this.hllxList = dictUtils.getDictItemsFromCache('hllx')
			} else {
				this.kmList = dictUtils.getDictItemsFromCache('subjec_type')
				this.hllxList = dictUtils.getDictItemsFromCache('hllx_en')
			}
			this.loadDataTree()
			this.getData()
		},
		mounted() {},
		methods: {
			//获取数据
			getData(page) {
				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[4].value=this.searchName
				}else{
					this.querys[1].value=''
					this.querys[4].value=''
				}
				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])
				}
				domesticSubject.pageQuery(this.queryParam, (res) => {
					if (res.rows) {
						this.tableData = res.rows
						this.tableData.forEach((e) => {
							this.kmList.forEach((j) => {
								if (e.type) {
									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.hllxList.forEach((h) => {
								if (e.rateType == h.value) {
									e.rateTypeName = h.name
								}
							})
						})
						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) {
				console.log(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.domesticDialog.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(() => {
						domesticSubject.delDate(this.multipleSelection, (res) => {
							if (res.state) {
								this.$notify({
									type: 'success',
									message: '删除成功',
									duration: 2000,
								})
							}
							this.getData()
						})
					})
					.catch(() => {})
			},
			//修改
			handleDbClick(row) {
				this.$refs.domesticDialog.edit(row.id)
			},
			// 刷新树数据
			loadDataTree() {
				domesticSubject.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()
			},
			//打开关联
			openCorrelation(row) {
				this.$refs.correlationDialog.add(row)
			},
			//排序
			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(() => {
						domesticSubject.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.domesticTree.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__content {
		padding: 5px 0;
	}

	.cloumn-btn {
		width: 76px;
		height: 32px;
	}

	/deep/ .el-table__fixed-right {
		box-shadow: none !important;
	}
</style>
