<template>
	<div class="inputs">
		<el-tooltip
			:placement="tooltipplacement || $tooltipplacement"
			:disabled="inputWriteable && !errors.has('custom-form.' + inputName)"
		>
			<div slot="content">{{ errors.first('custom-form.' + inputName) }}</div>
			<div
				v-if="inputWriteable"
				style="width: 100%;"
				class="el-select"
				@click="showDialog"
			>
				<div
					class="el-select__tags"
					ref="tagSpans"
					style="width: calc(100% - 25px);"
				>
					<span>
						<span
							class="el-tag el-tag--info el-tag--small"
							@click.stop
							v-for="(item, index) in inputVal"
							:key="item.value"
						>
							<span class="el-select__tags-text">{{ item.value }}</span>
							<i
								class="el-tag__close el-icon-close"
								@click="removeSelectOrg(index)"
							></i>
						</span>
					</span>
				</div>
				<div class="el-input el-input--suffix">
					<input
						type="text"
						readonly="readonly"
						v-validate="inputValidate"
						v-model="inputVal"
						:name="inputName"
						autocomplete="off"
						class="el-input__inner"
						:placeholder="getPlaceholder"
						:style="{ height: inputSuffixHeight + 'px' }"
					/>
					<span class="el-input__suffix">
						<span class="el-input__suffix-inner">
							<i
								:class="
									this.custdialog.icon
										? 'el-input__icon ' + this.custdialog.icon
										: 'el-input__icon icon-department'
								"
								:style="{
									fontSize: '17px',
									lineHeight: inputSuffixHeight + 'px',
								}"
							></i>
						</span>
					</span>
				</div>
			</div>
		</el-tooltip>
		<span v-if="!inputWriteable">
			<span
				class="el-tag el-tag--info el-tag--small"
				style="margin-right: 8px;"
				@click.stop
				v-for="item in inputVal"
				:key="item.value"
			>
				<span class="el-select__tags-text">{{ item.value }}</span>
			</span>
		</span>
		<el-dialog
			:visible.sync="customDialogShowList"
			:title="this.customDialog.name"
			:close-on-click-modal="false"
			:before-close="dialogCancel"
			append-to-body
			:width="this.customDialog.width + 'px'"
		>
			<el-container :style="this.style" style="overflow: auto;">
				<el-container>
					<el-header class="middle-header" v-if="querysShow">
						<el-input
							size="small"
							style="width: 380px; padding: 10px 0;"
							clearable
							:placeholder="this.comment"
							prefix-icon="el-icon-search"
							v-model="queryParam"
							@keyup.enter.native="searchEnterFun"
						></el-input>
						<el-button
							style="margin-left: 20px;"
							size="small"
							type="primary"
							icon="el-icon-search"
							@click="search()"
							>查询</el-button
						>
						<el-button size="small" icon="el-icon-refresh" @click="reset"
							>重置</el-button
						>
					</el-header>
					<el-main style="padding: 0;">
						<el-table
							:data="dialogData"
							ref="orgTable"
							stripe
							border
							height="485"
							@row-click="orgRowClick"
							@selection-change="orgTableSelection"
							@select="onTableSelect"
							class="org-table"
							size="medium"
							style="width: 100%;"
						>
							<el-table-column
								type="selection"
								align="center"
								width="45"
								v-if="this.customDialog.selectNum != 1"
							></el-table-column>
							<el-table-column
								align="center"
								width="50"
								v-if="this.customDialog.selectNum === 1"
							>
								<template slot-scope="scope">
									<!-- class="textRadio" -->
									<el-radio
										@selection-change="orgTableSelection"
										:label="scope.$index"
										v-model="undefineda"
										class="textRadio"
										>&nbsp;
									</el-radio>
								</template>
							</el-table-column>
							<el-table-column
								type="index"
								width="50"
								align="center"
								label="序号"
							></el-table-column>
							<el-table-column
								v-for="field in displayfield"
								:key="field.field"
								:prop="field.field"
								:label="field.comment"
								style="width: 100%;"
							></el-table-column>
						</el-table>
					</el-main>
					<el-footer>
						<el-row
							type="flex"
							justify="end"
							style="padding-top: 15px;"
							v-if="this.customDialog.needPage"
						>
							<el-pagination
								small
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="pagination.page"
								:page-sizes="[10, 20, 50, 100]"
								:page-size="pagination.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
							></el-pagination>
						</el-row>
					</el-footer>
				</el-container>
			</el-container>
			<span slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button size="small" type="primary" @click="dialogConfirm"
					>确认</el-button
				>
				<el-button size="small" @click="dialogCancel">取 消</el-button>
			</span>
		</el-dialog>

		<el-dialog
			:visible.sync="customDialogShowTree"
			:title="this.customDialog.name"
			:close-on-click-modal="false"
			:before-close="dialogCancelTree"
			append-to-body
			:width="this.customDialog.width + 'px'"
		>
			<el-container :style="this.style" style="overflow: auto;">
				<el-tree
					ref="tree"
					:data="props1"
					:props="defaultProps"
					:node-key="nodeKey"
					highlight-current
					:default-expand-all="false"
					@node-click="treeClick"
					@check-change="getChecked"
					:show-checkbox="this.customDialog.selectNum !== 1"
					:check-on-click-node="true"
					:check-strictly="this.customDialog.selectNum === -2"
					:load="loadTree"
					lazy
				></el-tree>
			</el-container>
			<span slot="footer" class="dialog-footer" style="text-align: center;">
				<el-button size="small" type="primary" @click="dialogTreeConfirm"
					>确认</el-button
				>
				<el-button size="small" @click="dialogCancelTree">取 消</el-button>
			</span>
		</el-dialog>
		<span style="display: none;" v-validate>
			<slot name="labeldesc">{{ inputName }}</slot>
		</span>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import utils from '@/utils.js';
import { Message } from 'element-ui';

export default {
	name: 'ht-dialog',
	props: [
		'validate',
		'value',
		'name',
		'permission',
		'atter',
		'single',
		'selectorconfig',
		'custdialog',
		'tooltipplacement',
		'placeholder',
		'isFromList',
	],
	data() {
		return {
			nodeKey: 'ID_', //树形数据父Id
			customDialogShowList: false,
			customDialogShowTree: false,
			selectOrgProps: {
				label: 'name',
			},
			style: '', //对话框宽高
			selectOrgs: null,
			inputSuffixHeight: 30,
			config: null,
			updating: false,
			displayfield: [], //显示字段
			customDialog: {}, //
			comment: '',
			queryParam: '',
			props1: [],
			showData: [],
			checkBoxDataAll: [], //选中对象的集合
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			propsData: [],
			searchForm: {},
			querysShow: false, //是否显示搜索框
			undefineda: '',
			isCurrentChange: false, //是否不执行 orgTableSelection方法
		};
	},
	watch: {
		props1: function (newVal, oldVal) {
			//树形
			if (this.showData != undefined && this.showData.length > 0) {
				const this_ = this;
				let data = [];
				for (let i = 0; i < this.showData.length; i++) {
					data.push(this.showData[i]);
				}
				setTimeout(() => {
					for (let i = 0; i < data.length; i++) {
						this_.$refs.tree.setChecked(data[i], true);
					}
				}, 200);
			}
		},
	},
	computed: mapState({
		pagination: state => state.dialog.pagination,
		total: state => state.dialog.total,
		dialogData: state => {
			return state.dialog.rows;
		},
		inputVal: function () {
			if (!this.value || this.value == '||[]') {
				this.checkBoxDataAll = [];
				// this.showData = [];
				return null;
			} else {
				let nameAry = this.value.split(',');
				if (!nameAry[nameAry.length - 1]) {
					nameAry.splice(nameAry.length - 1, 1);
				}
				if (this.value.indexOf('||') >= 0) {
					nameAry = this.value.split('||')[0].split(',');
					// this.showData=JSON.parse(this.value.split("||")[1]);
				}
				//  this.showData =this.selectOrgs;
				// let idAry = null;
				// let accountAry = null;
				let result = [];
				nameAry.forEach((m, i) => {
					let n = { value: m };
					result.push(n);
				});
				return result;
			}
		},
		inputWriteable: function () {
			return utils.getWriteable(this.permission);
		},
		inputValidate: function () {
			var validateObj = this.$store.state.index.validate;
			return utils.addRequiredOrNot(
				this.permission,
				this.validate,
				validateObj,
				this
			);
		},
		inputName: function () {
			let labeldesc = '';
			if (
				this.$slots &&
				this.$slots.labeldesc &&
				this.$slots.labeldesc[0].children &&
				this.$slots.labeldesc[0].children[0].text
			) {
				labeldesc = this.$slots.labeldesc[0].children[0].text;
				return this.name ? this.name : utils.getName() + '-' + labeldesc;
			} else {
				return this.name ? this.name : utils.getName();
			}
		},
		// 是否有回填设置
		bindSet: function () {
			return this.selectorconfig ? this.selectorconfig.bind : null;
		},
		getPlaceholder: function () {
			if (this.placeholder) {
				return this.placeholder;
			}
			return this.custdialog.name;
		},
	}),
	created() {
		this.$validator = this.$root.$validator;
	},
	methods: {
		//回车查询
		searchEnterFun: function (e) {
			var keyCode = window.event ? e.keyCode : e.which;
			if (keyCode == 13) {
				this.search();
			}
		},
		handleSizeChange: function (size) {
			this.isCurrentChange = true;
			//每页下拉显示数据
			this.$store.dispatch('dialog/setPaginationSize', size).then(() => {
				this.search();
			});
		},
		handleCurrentChange: function (currentPage) {
			const this_ = this;
			if (this.selectOrgs != undefined && this.selectOrgs.length > 0) {
				this.selectOrgs.forEach(row => {
					let res = this_.indexArray(this_.checkBoxDataAll, row);
					if (res == -1) {
						this_.checkBoxDataAll.push(row);
					}
				});
			}
			this.isCurrentChange = true;
			//点击第几页
			this.$store
				.dispatch('dialog/setPaginationPageNum', currentPage)
				.then(() => {
					this.search();
				});
		},
		checkList() {
			const this_ = this;
			setTimeout(() => {
				//列表
				if (
					this_.checkBoxDataAll != undefined &&
					this_.checkBoxDataAll.length > 0
				) {
					this_.checkBoxDataAll.forEach(row => {
						let res = this_.indexArray(this_.dialogData, row);
						this_.undefineda = res;
						if (res != -1) {
							this_.isCurrentChange = true;
							this_.toggleRowSelection(res, true);
						}
					});
				}
			}, 300);
		},
		toggleRowSelection(res, val) {
			this.$refs.orgTable.toggleRowSelection(this.dialogData[res], val);
		},
		showDialog(item) {
			const this_ = this;
			var alias = this.custdialog.custDialog.alias;
			this.$store.dispatch('form/getByAlias', alias).then(customDialog => {
				if (!customDialog || !customDialog.alias) {
					Message.error('对话框别名【' + alias + '】不存在！');
					return;
				}
				if (customDialog.style == 1) {
					var displaylist = JSON.parse(customDialog.displayfield);
					this_.nodeKey = displaylist.id;
				}
				var list = JSON.parse(customDialog.conditionfield);
				var param = {};
				list.forEach(ele => {
					if (ele.defaultType == '4') {
						param[ele.field] = ele.comment;
					}
				});
				this.style = 'height:' + customDialog.height + 'px';

				if (JSON.stringify(param) == '{}') {
					//没有动态传入的字段
					if (customDialog.style == 0) {
						this.customDialogShow({ alias: alias, customDialog: customDialog });
					} else {
						this.customDialogTreeShow({
							alias: alias,
							customDialog: customDialog,
						});
					}
				}
			});
		},
		//判断数据是否包含某个对象，并返回数据包含对象的下标
		indexArray(array, item) {
			if (array.length == 0) {
				return -1;
			}
			for (let i = 0; i < array.length; i++) {
				if (JSON.stringify(array[i]) == JSON.stringify(item)) {
					return i;
				}
			}
			return -1;
		},
		//点击列表某一个复选框时触发
		onTableSelect(rows, row) {
			this.isCurrentChange = false;
			//判断点击列表数据时复选框是否勾选  selected：true不勾选，false勾选
			let selected =
				this.selectOrgs &&
				this.selectOrgs.length > 0 &&
				this.indexArray(this.selectOrgs, row) !== -1;
			if (selected) {
				this.isCurrentChange = true;
				let res = this.indexArray(this.selectOrgs, row);
				this.selectOrgs.splice(res, 1);
			}
		},
		//点击列表某一条数据时触发
		orgRowClick(row, column, event) {
			if (this.customDialog.selectNum === 1) {
				$(event.currentTarget.children[0].children[0].children[0]).trigger(
					'click'
				);
				this.selectOrgs = [];
				this.selectOrgs.push(row);
			} else if (this.customDialog.selectNum != 1) {
				this.isCurrentChange = false;
				//判断点击列表数据时复选框是否勾选  selected：true不勾选，false勾选
				let selected =
					this.selectOrgs &&
					this.selectOrgs.length > 0 &&
					this.indexArray(this.selectOrgs, row) !== -1;
				if (selected) {
					this.isCurrentChange = true;
					let res = this.indexArray(this.selectOrgs, row);
					this.selectOrgs.splice(res, 1);
				}
				this.$refs.orgTable.toggleRowSelection(row);
			}
		},
		//列表复选框有改变时触发
		orgTableSelection(selection) {
			//多选
			if (this.customDialog.selectNum != 1 && !this.isCurrentChange) {
				if (selection && selection.length > 0) {
					if (
						selection.length == 1 &&
						(!this.selectOrgs || this.selectOrgs.length == 0)
					) {
						this.selectOrgs = selection;
					} else if (
						(!this.selectOrgs || this.selectOrgs.length == 0) &&
						selection.length > 1
					) {
						if (!this.selectOrgs) {
							this.selectOrgs = [];
						}
						for (let i = selection.length - 1; i >= 0; i--) {
							this.selectOrgs.push(selection[i]);
						}
					} else {
						for (let i = selection.length - 1; i >= 0; i--) {
							this.selectOrgs.push(selection[i]);
							if (i >= 0) break;
						}
					}
				}
			}
		},
		dialogConfirm() {
			this.customDialogShowList = false;
			this.calacInputSuffixHeight();
			this.syncInputValue();
			// this.$store.dispatch("dialog/setDialogData", []);
		},
		//重置
		reset() {
			this.queryParam = '';
			this.search();
		},
		//查询
		search() {
			let querys = []; //查询条件
			let queryFilter = {};
			if (JSON.stringify(this.pagination) == '{}') {
				this.pagination = { page: '1', pageSize: '10', showTotal: 'true' };
			}
			let pageBean = { pageBean: this.pagination };
			if (this.queryParam != '') {
				var conditionfield = JSON.parse(this.customDialog.conditionfield);
				conditionfield.forEach(item => {
					querys.push({
						property: item.field,
						value: this.queryParam,
						group: 'main',
						operation: 'LIKE',
						relation: 'OR',
					});
				});
			}

			//对话框按表单字段查询（参数传入的）
			let bindList = this.custdialog.custDialog.conditions;
			if (bindList.length > 0) {
				const pInst = utils.getInstanceByTag(
					this,
					'ht-dataview-runtime-template'
				);
				bindList.forEach(ele => {
					//绑定表单字段
					if (ele.defaultType == '3' && ele.bind && pInst.searchForm) {
						let value = '';
						for (let item in pInst.searchForm) {
							if (ele.bind.toLowerCase() == item.toLowerCase()) {
								value = pInst.searchForm[item];
							}
						}
						if (value) {
							querys.push({
								property: ele.field,
								value: value,
								group: 'main',
								operation: 'LIKE',
								relation: 'AND',
							});
						}
					}
				});
			}

			if (querys.length > 0) {
				queryFilter = { pageBean: this.pagination, querys };
				this.customDialog.pageBean = queryFilter;
				this.$store
					.dispatch('dialog/getlistJson', this.customDialog)
					.then(() => {
						this.checkList();
					});
			} else {
				this.customDialog.pageBean = pageBean;
				this.$store
					.dispatch('dialog/getlistJson', this.customDialog)
					.then(() => {
						this.checkList();
					});
			}
		},
		//树形查询
		searchTree(requestParams) {
			// if (this.props1.length < 1) {
			this.$store.dispatch('dialog/getTreeData', requestParams).then(res => {
				if (this.customDialog.displayfield && this.customDialog.resultfield) {
					var displayfield = JSON.parse(this.customDialog.displayfield);
					this.displayfield = displayfield;
					this.defaultProps.label = displayfield.displayName;
					var resultfield = JSON.parse(this.customDialog.resultfield);
					this.treeData = res;
					this.props1 = this.toTreeData(
						res,
						displayfield.id,
						displayfield.pid,
						displayfield.displayName,
						displayfield.pvalue ? displayfield.pvalue : '0',
						resultfield
					);
				}
			});
			// }
		},
		// 同步选择结果
		syncInputValue() {
			let subIndex = null;
			if (this.$el) {
				subIndex = utils.getSomeAttributeFromParentElement(
					this.$el,
					'data-index'
				);
			}
			var returnStr = JSON.parse(this.customDialog.resultfield);
			//拿到返回的字段
			var field = new Array([returnStr.length]);
			var comment = new Array([returnStr.length]);
			var str = [];
			for (var i = 0; i < returnStr.length; i++) {
				field[i] =
					this.customDialog.dsType == 'dataSource'
						? returnStr[i].field.toLowerCase()
						: returnStr[i].field;
				comment[i] =
					this.customDialog.dsType == 'dataSource'
						? returnStr[i].comment.toLowerCase()
						: returnStr[i].comment;
			}
			// const this_ = this;
			var s = this.selectOrgs;
			this.showData = [...this.selectOrgs];
			this.checkBoxDataAll = [...this.selectOrgs];
			if (this.customDialog.selectNum === 1) {
				s = this.selectOrgs;
			}
			if (this.customDialog.selectNum === 1) {
				var temp = '';
				for (var i2 = 0; i2 < comment.length; i2++) {
					temp += '"' + comment[i2] + '":"' + s[0][field[i2]] + '",';
				}
				if (temp != '') {
					temp = '{' + temp.substring(0, temp.length - 1) + '}';
				}
				str.push(JSON.parse(temp));
			} else {
				for (var i1 = 0; i1 < s.length; i1++) {
					var temp1 = '';
					for (var j = 0; j < comment.length; j++) {
						temp1 += '"' + comment[j] + '":"' + s[i1][field[j]] + '",';
					}
					if (temp1 != '') {
						temp1 = '{' + temp1.substring(0, temp1.length - 1) + '}';
					}
					str.push(JSON.parse(temp1));
				}
			}

			// const pInst = utils.getOnlineFormInstance(this);
			const pInst = utils.getInstanceByTag(this, [
				'ht-dataview-runtime-template',
				'ht-runtime-template',
			]);
			const _this = this;
			this.custdialog.custDialog.mappingConf.forEach(con => {
				var val = '';
				var from = '';
				if (_this.customDialog.dsType == 'restful') {
					from = con.from;
				} else {
					from = con.from.toLowerCase();
				}
				str.forEach(item => {
					val += item[from] + ',';
				});
				if (val != '') {
					val = val.substring(0, val.length - 1);
				}
				this.$emit('input', val);
				if (this.atter == 'data.' + con['target'][0]) {
					utils.setValueByPath(
						pInst,
						'data.' + con['target'][0],
						val,
						subIndex
					);
				} else if (this.atter.indexOf('searchForm') != -1) {
					if (this.isFromList) {
						pInst.$set(pInst.searchForm, con['target'][0], val);
					} else {
						utils.setValueByPath(
							_this,
							'searchForm.' + con['target'][0],
							val.substring(0, val.length - 1),
							subIndex
						);
					}
				} else {
					utils.setValueByPath(
						pInst,
						'data.' + con['target'][0],
						val.substring(0, val.length - 1),
						subIndex
					);
				}
			});
		},
		//取消按钮
		dialogCancel() {
			const this_ = this;
			this_.$store.dispatch('dialog/setDialogData', []).then(() => {
				this_.customDialogShowList = false;
				//判断是否是点击了确认再点击取消的  inputVal没有值则表示直接点击的取消
				if (!this_.inputVal) {
					this_.selectOrgs = [];
				} else {
					this_.selectOrgs = [...this_.showData];
					this.checkBoxDataAll = [...this_.selectOrgs];
				}
			});
		},
		dialogTreeConfirm() {
			this.calacInputSuffixHeight();
			let subIndex = null;
			if (this.$el) {
				subIndex = utils.getSomeAttributeFromParentElement(
					this.$el,
					'data-index'
				);
			}
			this.$store.dispatch('dialog/setDialogData', []);
			var returnStr = JSON.parse(this.customDialog.resultfield);
			var field = new Array([returnStr.length]);
			var comment = new Array([returnStr.length]);
			var str = [];
			for (var i = 0; i < returnStr.length; i++) {
				field[i] = returnStr[i].field;
				comment[i] = returnStr[i].comment;
			}
			if (this.customDialog.selectNum === 1) {
				var nodes = this.propsData[0];
				var temp = '';
				for (var i3 = 0; i3 < comment.length; i3++) {
					temp += '"' + comment[i3] + '":"' + nodes[field[i3]] + '",';
				}
				if (temp != '') {
					temp = '{' + temp.substring(0, temp.length - 1) + '}';
				}
				str.push(JSON.parse(temp));
			} else {
				var nodes1 = this.propsData;
				nodes1.forEach((item, k) => {
					var temp = '';
					for (var i = 0; i < comment.length; i++) {
						temp += '"' + comment[i] + '":"' + nodes1[field[i]] + '",';
						temp += '"' + comment[i] + '":"' + nodes1[k][field[i]] + '",';
					}
					if (temp != '') {
						temp = '{' + temp.substring(0, temp.length - 1) + '}';
					}
					str.push(JSON.parse(temp));
				});
			}
			// const pInst = utils.getOnlineFormInstance(this);
			const pInst = utils.getInstanceByTag(this, [
				'ht-dataview-runtime-template',
				'ht-runtime-template',
			]);
			this.custdialog.custDialog.mappingConf.forEach(con => {
				var val = '';
				str.forEach(item => {
					val += item[con.from] + ',';
				});
				// if (this.atter == 'data.' + con['target'][0]) {
				// 	utils.setValueByPath(
				// 		pInst,
				// 		'data.' + con['target'][0],
				// 		val.substring(0, val.length - 1),
				// 		subIndex
				// 	);
				// } else
				if (this.atter == 'searchForm.' + con['target'][0]) {
					utils.setValueByPath(
						pInst,
						'searchForm.' + con['target'][0],
						val.substring(0, val.length - 1),
						subIndex
					);
				} else {
					utils.setValueByPath(
						pInst,
						'data.' + con['target'][0],
						val.substring(0, val.length - 1),
						subIndex
					);
				}
			});
			//this.$emit("input", JSON.stringify(str));
			this.showData = [...this.propsData]; //回显的值
			this.customDialogShowTree = false;
		},
		dialogCancelTree() {
			this.$store.dispatch('dialog/setDialogData', []);
			this.customDialogShowTree = false;
		},
		getChecked(data, checked, indeterminate) {
			if (this.customDialog.selectNum === 1) {
				this.propsData = [];
				this.propsData.push(data);
			} else {
				this.propsData = this.$refs.tree.getCheckedNodes();
			}
		},
		treeClick(data, n, i) {
			if (this.customDialog.selectNum === 1) {
				this.propsData = [];
				this.propsData.push(data);
			}
		},
		clearAllSelectOrgs() {
			this.selectOrgs = null;
			this.$refs.orgTable.clearSelection();
		},
		removeSelectOrg(item) {
			if (this.customDialog.selectNum === 1) {
				this.$emit('input', '');
				this.selectOrgs.splice(item, 1);
				this.showData.splice(item, 1);
			} else {
				this.inputVal.splice(item, 1);
				// let removeId = this.showData[item];
				//树形
				if (this.propsData.length > 0) {
					this.propsData.splice(item, 1);
				}
				//列表
				if (this.selectOrgs != null) {
					this.selectOrgs.splice(item, 1);
					this.checkBoxDataAll.splice(item, 1);
					this.selectOrgs.forEach(row => {
						// if(item.id ==removeId ){
						this.isCurrentChange = true;
						this.toggleRowSelection(row, false);
						// }
					});
				}
				this.calacInputSuffixHeight();
				let value = '';
				this.inputVal.forEach(val => {
					value += val.value + ',';
				});
				if (value.length > 0) {
					value = value.substring(0, value.length - 1);
				}
				/*if(value!=""){
            value=value+"||"+JSON.stringify(this.showData);
          }*/
				this.$emit('input', value);
			}
		},
		calacInputSuffixHeight() {
			setTimeout(() => {
				if (!this.$refs.tagSpans) return;
				if (this.$refs.tagSpans.offsetHeight) {
					this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5;
				} else {
					this.inputSuffixHeight = 30;
				}
				// 触发验证
				this.$validator.validate();
			}, 0);
		},
		customDialogShow(pageParam) {
			this.customDialogShowList = true;
			this.customDialog = pageParam.customDialog;
			this.customDialog.queryUrl =
				this.customDialog.dsType == 'dataSource'
					? '${form}/form/customDialog/v1/getListData?alias=' +
					  this.customDialog.alias +
					  '&mapParam=' +
					  (this.customDialog.mapParam ? this.customDialog.mapParam : '')
					: this.customDialog.url;

			var conditionfield = JSON.parse(this.customDialog.conditionfield);
			if (!this.comment && conditionfield.length > 0) {
				conditionfield.forEach(item => {
					if (
						item.controllerType == 1 &&
						item.defaultType == 1 &&
						item.dbType == 'varchar'
					) {
						this.comment += item.comment + ',';
					}
				});
				if (this.comment) {
					this.querysShow = true;
					this.comment =
						'通过' +
						this.comment.substring(0, this.comment.length - 1) +
						'查询';
				}
			}
			if (this.dialogData.length < 1) {
				this.search();
				this.displayfield = JSON.parse(pageParam.customDialog.displayfield);
				if (this.customDialog.dsType == 'dataSource') {
					for (var i = 0; i < this.displayfield.length; i++) {
						this.displayfield[i].field = this.displayfield[
							i
						].field.toLowerCase();
					}
				}
			} else if (this.dialogData.length > 1) {
				this.search();
			}
			if (this.dialogData.length > 0 && this.displayfield.length == 0) {
				this.search();
				this.displayfield = JSON.parse(pageParam.customDialog.displayfield);
				if (this.customDialog.dsType == 'dataSource') {
					for (var i3 = 0; i3 < this.displayfield.length; i3++) {
						this.displayfield[i3].field = this.displayfield[
							i3
						].field.toLowerCase();
					}
				}
			}
		},
		customDialogTreeShow(pageParam) {
			this.customDialog = pageParam.customDialog;
			var customDialog = this.customDialog;
			var mapParam = '';
			if (pageParam.param != undefined) {
				mapParam = JSON.stringify(pageParam.param);
				mapParam = mapParam.substring(1, mapParam.length - 1);
			}
			var requestType =
				customDialog.dsType == 'dataSource'
					? 'GET'
					: customDialog.requestType
					? customDialog.requestType
					: 'POST';
			var url =
				'${form}/form/customDialog/v1/getTreeData?alias=' +
				pageParam.alias +
				'&mapParam=' +
				mapParam;
			var paramsObj = {};
			if (customDialog.dsType != 'dataSource') {
				url = customDialog.url;
				var templatePa = customDialog.dataParam;
				if (customDialog.conditionfield) {
					var conditions = JSON.parse(customDialog.conditionfield);
					for (var i = 0; i < conditions.length; i++) {
						var con = conditions[i];
						if (requestType == 'POST') {
							if (templatePa) {
								templatePa = templatePa.replace(
									new RegExp('\\{' + con.field + '\\}', 'g'),
									con.defaultValue
								);
							} else {
								paramsObj[con.field] = con.defaultValue;
							}
						} else {
							var ljChar = url.indexOf('?') == -1 ? '?' : '&';
							url = url + ljChar + con.field + '=' + con.defaultValue;
						}
					}
					if (templatePa) {
						paramsObj = JSON.parse(templatePa);
					}
				}
			}
			var requestParams = {};
			requestParams.requestType = requestType;
			requestParams.url = url;
			requestParams.paramsObj = paramsObj;
			this.searchTree(requestParams);
			this.customDialogShowTree = true;
		},
		toTreeData(data, id, pid, name, pvalue, returnStr) {
			// 建立个树形结构,需要定义个最顶层的父节点，pvalue是0
			let parents = data.filter(
				value =>
					value[id] == value[pid] || value[pid] == null || value[pid] == pvalue
			);
			if (!parents) {
				parents = data.filter(
					value =>
						value[pid] !== 'undefined' &&
						value[pid] != null &&
						value[id] != value[pid]
				);
			}
			return parents;
		},
		loadTree(node, resolve) {
			if (node && !Array.isArray(node.data)) {
				let _this = this;
				resolve(
					this.treeData.filter(
						value =>
							value[_this.displayfield.pid] === node.data[_this.displayfield.id]
					)
				);
			} else {
				resolve([]);
			}
		},
	},
};
</script>
<style lang="stylus" scoped>
.el-input__inner[aria-invalid='true'] {
  border-color: #f56c6c;
}

.el-select__tags {
  background: #fff;
  margin-left: 1px;
}

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

.org-tree {
  height: 440px;
  margin-top: 10px;
}

.middle-header {
  height: 52px !important;
}

.org-table {
  width: 100%;
}

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

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

.select-header {
  border-bottom: 1px solid #eee;
  height: 52px !important;
}

.select-header > span {
  padding: 10px 0;
  line-height: 53px;
}

.select-tree-div {
  height: 500px;
  overflow-y: auto;
}

>>> .el-dialog {
  margin-top: 8vh !important;
}

>>> .el-dialog__body {
  padding: 0;
}

>>> .el-card__header {
  padding: 10px;
}

>>> .el-card__body {
  padding: 10px;
}

.org-find-card >>> .el-card__header {
  background: #F5F7FA;
}

>>> .el-main {
  padding: 0 20px !important;
}

.button-group {
  width: 70px;
  height: 170px;
  margin: 0px auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.button-group > button {
  display: block;
  margin: 8px 0;
}
</style>
