<template>
	<textarea class="_textarea" :class="{_bb:bb,_disabled:disabled}" :name="name" :value="txtvalue" :placeholder="placeholder" :cursor="cursor" :cursor-spacing="120" :disabled="disabled" :maxlength="maxlength" :auto-height="!ciystyle.height" :fixed="fixed" @input="textinput" :style="ciystyle" @focus="textfocus" @blur="textblur" @linechange="textline"></textarea>
	<view v-if="showtotal" class="txt-right txt1 txt-smmm" style="line-height:1em;margin:-0.5em 0.4em 0.6em 0;">{{totaltxt}}<text v-if="maxlength>-1">/{{maxlength}}</text>字</view>
</template>

<script>
	export default {
		options: {
			virtualHost: true
		},
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue', 'focus', 'blur', 'linechange'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			initevent: {
				type: Boolean,
				default: false
			},
			ciystyle: {
				type: [String, Object],
				default: {}
			},
			placeholder: {
				type: String,
				default: ''
			},
			bb: { //传统文本框效果
				type: Boolean,
				default: false
			},
			showtotal: {
				type: Boolean,
				default: false
			},
			maxlength: {
				type: Number,
				default: -1
			},
			fixed: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				totaltxt: '0字',
				cursor:0
			};
		},
		watch: {},
		computed: {
			txtvalue() {
				var val = '';
				if (this.modelValue)
					val = this.modelValue;
				else if (this.value)
					val = this.value;
				this.total(val);
				return val;
			}
		},
		mounted() {
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.txtvalue
				});
			}
		},
		methods: {
			textfocus(e) {
				this.$emit('focus', e);
			},
			textblur(e) {
				this._cursor = e.detail.cursor;
				this.$emit('blur', e);
			},
			textline(e) {
				this.$emit('linechange', e);
			},
			textinput(e) {
				this._cursor = e.detail.cursor;
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				this.total(txt);
				this.$emit('update:modelValue', txt);
				this.$emit('change', {
					name: this.name,
					from: 'input',
					value: txt
				});
			},
			total(val) {
				if (!val) {
					this.totaltxt = '0';
					return;
				}
				var linelen = val.split('\n').length;
				this.totaltxt = linelen + '行，' + val.length;
			},
			Getcursor() {
				return this._cursor;
			}
		}
	}
</script>

<style scoped>
	._textarea {
		text-align: left;
		display: block;
		padding: 1rem 0.5rem;
		box-sizing: border-box;
		line-height: 1.6em;
		font-size: 1em;
		min-height: 3em;
		overflow: auto;
		width: 100%;
		z-index: 0;
		max-height:80vh;
		/* 解决微信覆盖bug */
	}

	._textarea._bb {
		border: 1px solid var(--bg4);
		border-radius: 0.2em;
		padding: 0.5rem;
		margin: 0.5em 0;
		background: var(--bg1);
	}

	._textarea._disabled {
		color: var(--txt1);
		background: var(--bg4);
	}
</style>