<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>
			<el-checkbox-group
				v-if="inputWriteable"
				v-validate="inputValidate"
				:name="inputName"
				v-model="inputVal"
				:style="this.styles"
			>
				<span v-for="item in this.options" :key="item.key">
					<el-checkbox :key="item.key" :label="item.key">{{
						item.value
					}}</el-checkbox
					><br v-if="isVertical" />
				</span>
			</el-checkbox-group>
		</el-tooltip>
		<span v-if="!inputWriteable">{{
			!inputWriteable ? inputValnew : inputVal
		}}</span>
		<span style="display: none;" v-validate>
			<slot name="labeldesc">{{ inputName }}</slot>
		</span>
	</div>
</template>
<script>
import utils from '@/utils.js';

export default {
	name: 'ht-checkbox',
	props: [
		'validate',
		'value',
		'name',
		'permission',
		'cklist',
		'linkage',
		'ganged',
		'styles',
		'isVertical',
		'tooltipplacement',
	],
	data() {
		return {
			inputVal: [],
			inputValnew: '',
			options: [],
			config: {},
		};
	},
	watch: {
		inputVal: function (newVal, oldVal) {
			this.$emit('input', newVal);
		},
	},
	computed: {
		inputWriteable: function () {
			var getWriteable = utils.getWriteable(this.permission);
			if (
				!utils.getWriteable(this.permission) &&
				this.inputVal.length > 0 &&
				this.inputValnew == ''
			) {
				var inputValArr = [];
				for (var i = 0; i < this.inputVal.length; i++) {
					for (var a = 0; a < this.options.length; a++) {
						if (this.options[a].key == this.inputVal[i]) {
							inputValArr.push(this.options[a].value);
							break;
						}
					}
				}
				this.inputValnew = inputValArr.join(',');
			}
			return getWriteable;
		},
		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();
			}
		},
	},
	mounted() {
		const _me = this;
		const exp = this.linkage;
		if (
			exp &&
			exp.length > 0 &&
			(this.$parent.isView || this.$parent.$parent.$parent.isView)
		) {
			const pInst = utils.getOnlineFormInstance(_me);
			_me.traces = {};

			exp.forEach(m => {
				m.effect.forEach(m => {
					const path = `permission.fields.${m.target}`;
					const oldVal = utils.getValueByPath(pInst, path);
					_me.traces[path] = oldVal;
				});

				_me.$watch(
					'inputVal',
					function (newVal, oldVal) {
						if (newVal !== oldVal) {
							// m.effect.forEach(ef => {
							//     const p = `permission.fields.${ef.target}`;
							//     let val = _me.traces[p];
							//     _me.$store.dispatch("index/delValidate",ef);
							//     utils.setValueByPath(pInst, p, val);
							//   });
							newVal.forEach(newValue => {
								if (newValue === m.value) {
									m.effect.forEach(ef => {
										const p = `permission.fields.${ef.target}`;
										// let val = _me.traces[p];
										_me.$store.dispatch('index/linkageValidate', ef);
										utils.setValueByPath(pInst, p, ef.type);
									});
								}
							});
						}
					},
					{ immediate: true }
				);
			});
		}
	},
	created() {
		this.options = this.cklist ? JSON.parse(this.cklist) : [];
		if (this.ganged && this.ganged.alias && this.options.length < 1) {
			this.$store.dispatch('form/getByAliasCq', this.ganged.alias).then(res => {
				this.config = res;
				this.search();
			});
		}
		if (this.value && this.value.indexOf('[') != -1) {
			var checkboxval = this.value.substr(0, this.value.length - 1);
			checkboxval = checkboxval.substr(1);
			var checkboxval2 = checkboxval.split(',');
			var checkvalnew = [];
			for (var i = 0; i < checkboxval2.length; i++) {
				checkvalnew.push(checkboxval2[i].trim());
			}
			this.inputVal = checkvalnew;
		} else if (this.value) {
			this.inputVal = [...this.value];
		}
		this.$validator = this.$root.$validator;
	},
	methods: {
		search(currentPage, param) {
			if (!this.config) return;
			var str = this.config;
			const _this = this;
			var ganged = this.ganged;
			this.pageSize = str.pageSize;
			// if(str.needPage === 1){
			var pageBean = {
				pageBean: {
					page: currentPage ? currentPage : 1,
					pageSize: str.pageSize,
					showTotal: 'true',
				},
			};
			if (param) {
				if (str.dsType == 'dataSource') {
					let Base64 = require('js-base64').Base64;
					str.currentPage = currentPage ? currentPage : 1;
					if (JSON.stringify(ganged.bind) === '{}') {
						str.queryData = Base64.encode(
							JSON.stringify([{ key: ganged.valueBind, value: param }])
						);
					} else {
						var queryData = [];
						for (var key in ganged.bind) {
							if (ganged.bind[key]) {
								const pInst = utils.getOnlineFormInstance(_this);
								const val = utils.getValueByPath(pInst, ganged.bind[key]);
								if (val) {
									queryData.push({ key: key, value: val });
								} else {
									queryData.push({ key: key, value: param });
								}
							}
						}
						str.queryData = Base64.encode(JSON.stringify(queryData));
					}
				} else {
					var templatePa = this.config.dataParam;
					if (this.config.requestType == 'POST' && templatePa) {
						var conditionfield = JSON.parse(str.conditionfield);
						conditionfield.forEach(ele => {
							const pInst = utils.getOnlineFormInstance(_this);
							const val = utils.getValueByPath(pInst, ganged.bind[ele.field]);
							if (val) {
								templatePa = templatePa.replace(
									new RegExp('\\{' + ele.field + '\\}', 'g'),
									val
								);
							} else {
								templatePa = templatePa.replace(
									new RegExp('\\{' + ele.field + '\\}', 'g'),
									param
								);
							}
						});
					}
					str.pageBean = utils.parseToJson(templatePa);
				}
			} else {
				str.pageBean = pageBean;
				str.currentPage = currentPage ? currentPage : 1;
				str.queryData = '';
			}
			//}
			this.$store.dispatch('form/selectQuery', str).then(res => {
				_this.total = res.total;
				_this.options = [];
				res.rows.forEach(m => {
					var option = {};
					if (_this.ganged.valueBind) {
						option.value = m[ganged.valueBind];
					}
					if (_this.ganged.labelBind) {
						option.key = m[ganged.labelBind];
					}
					_this.options.push(option);
				});
			});
		},
	},
};
</script>
<style lang="stylus" scoped>
label.el-checkbox {
  margin: 1px 30px 0 0;
}

div.el-checkbox-group[aria-invalid='true'] {
  border: 1px solid #f56c6c;
  padding: 0 0 10px 10px;
}
</style>
