<template>
	<view style="width:100%;position: relative;display:flex;">
		<slider :name="name" :value="valuetxt" :disabled="disabled" :min="min" :max="max" :step="step" :show-value="showValue" @change="textchange" style="width: 100%;margin: 0 1em;" />
	</view>
</template>

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		props: {
			name: {
				type: String
			},
			value: {
				type: [String, Number],
				default: ''
			},
			initevent: {
				type: Boolean,
				default: false
			},
			min: {
				type: [String, Number],
				default: 0
			},
			max: {
				type: [String, Number],
				default: 100
			},
			step: {
				type: [String, Number],
				default: 1
			},
			showValue: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				Gvalue: false,
				valuetxt: 0,
			};
		},
		watch: {
			value(newD, oldD) {
				if (this.Gvalue)
					this.Gvalue = false;
				else
					this.valuetxt = newD;
			}
		},
		mounted() {
			this.valuetxt = c.getint(this.value);
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.valuetxt
				});
			}
		},
		methods: {
			textchange(e) {
				var txt = e.detail.value;
				this.Gvalue = true;
				this.$emit('input', txt);
				this.$emit('change', {
					name: this.name,
					from: 'text-show',
					value: txt
				});
			}
		}
	}
</script>

<style scoped>
</style>