<template>
	<div class="tpledit-cmp" style="min-height: 162px">
		<div class="tpl-item" v-for="(t,index) in tplList" :key="index"
			 :style="{marginLeft:(index === 0 ? spsignFmt*14 +'px' :'auto')}">
			<div v-if="t.type === 'dyn'">
				<div class="el-input">
					<input type="text"
						   :id="'tplInputDiv'+index"
						   :placeholder="t.key"
						   :maxlength="t.maxlength"
						   :style="{width: (t.maxlength * 16 + 50) + 'px'}"
						   style="max-width: 370px"
						   @focus="handleFocus(index)"
						   @keyup="handleInput"
						   :value="inputsVal[index]"
						   class="el-input__inner"
					/>
				</div>

			</div>
			<span v-else>{{t.text}}</span>
		</div>
	</div>
</template>


<script type="text/javascript">
	import Vue from 'vue'
	import {Input} from 'element-ui'

	Vue.use(Input)
	export default {
		props: {
			tpldata: {
				type: Object,
				required: true
			},
			spsign: {
				type: String,
				required: true
			},
			insertDyn: {
				type: Object,
				required: false
			},
			ignoreWhiteSpace: {
				type: Boolean
			}
		},
		data: function () {
			return {
				selectIndex: 0,
				inputsVal: {},//输入框的input值仅仅展示使用
				tplList: [],//模板解析后list
				valList: []//模板input框中真实的值
			}
		},
		methods: {
			handleInput: function (e) {
				var val = e.target.value
				this.changeInputs(val);
			},
			changeInputs: function (val) {
				this.valList[this.selectIndex] = this.ignoreWhiteSpaceFmt ? val.replace(/\s/g, '') : val
				this.inputsVal[this.selectIndex] = this.ignoreWhiteSpaceFmt ? val.replace(/\s/g, '') : val
				let $input = document.querySelector('#tplInputDiv' + this.selectIndex)
				$input.value = this.valList[this.selectIndex]
				this.$emit('tplchange', {valList: this.valList, textTemplateId: this.tpldata.id})
			},
			handleFocus: function (index) {
				this.selectIndex = index
			},
			insertDynVal: function () {
				var input = document.getElementById('tplInputDiv' + this.selectIndex);
				if (input.value) {
//					this.$alert('模版内容只能包含动态变量', '提示', {
//						confirmButtonText: '确定'
//					});
					return;
				}
				if (input) {
					var maxlen = input.getAttribute('maxlength')
					if (this.insertDynCpu.maxVal.length > maxlen) {
						this.$alert('添加内容超过模板规定长度', '提示', {
							confirmButtonText: '确定'
						});
						return;
					}
					var start = input.selectionStart
					var end = input.selectionEnd
					var val = this.inputsVal[this.selectIndex] || '';
					var newVal = val.substring(0, start) + this.insertDynCpu.title + val.substring(end)
					this.valList.slice(this.selectIndex, 1, newVal)
					this.inputsVal = Object.assign({}, this.inputsVal, {[this.selectIndex]: newVal})

					//手动触发change时间
					this.changeInputs(newVal)
				}
			},
			parseTpls: function () {
				var text = this.tpldata.text || ''
				var arr = [];
				var re = /\{([\u4e00-\u9fa5a-zA-Z0-9]+),(\d+)\}/g;
				var start = 0;
				var groups = re.exec(text);
				while (groups != null) {
					var tplObj = {};
					tplObj.text = groups[0];
					tplObj.key = groups[1];
					tplObj.maxlength = groups[2] - 0;
					tplObj.type = 'dyn';

					var lstindex = re.lastIndex;
					var end = lstindex - tplObj.text.length;
					end = end < 0 ? 0 : end;
					var fixText = text.substring(start, end);

					if (fixText) {
						arr.push({text: fixText, type: 'fix'});
						arr.push(tplObj);
					} else {
						arr.push(tplObj);
					}
					start = lstindex;
					groups = re.exec(text);
				}
				if (start < text.length) {
					var fixText1 = text.substring(start);
					arr.push({text: fixText1, type: 'fix'});
				}
				return arr;
			},
			setTpls: function () {
				if (Object.keys(this.tpldata).length > 0) {
					this.tplList = this.parseTpls()
					var vals = [];
					for (var i = 0; i < this.tplList.length; i++) {
						var t = this.tplList[i]
						if (t.type === 'fix') {
							vals.push(t.text)
						} else {
							vals.push('')
						}
					}
					this.valList = vals;
					this.$emit('tplchange', {valList: this.valList, templateId: this.tpldata.id})
				}

			}
		},
		created: function () {
			this.setTpls()
		},
		computed: {
			ignoreWhiteSpaceFmt() {
				return this.ignoreWhiteSpace
			},
			spsignFmt() {
				return this.spsign.length
			},
			insertDynCpu() {
				return this.insertDyn
			}
		},
		watch: {
			tpldata: function () {
				if (Object.keys(this.tpldata).length > 0) {
					this.setTpls()
				}
			},
			insertDynCpu: {
				handler: function (v) {
					if (Object.keys(this.tpldata).length > 0) {
						this.insertDynVal()
					}
				},
				deep: true
			}
		}

	}
</script>

<style type="text/css" scoped>
	.tpl-item {
		display: inline-block;
		margin-right: 3px;
		margin-bottom: 10px;
	}
</style>
