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

<script>
	export default {
		behaviors: ['uni://form-field-group'],
		emits: ['change', 'update:modelValue'],
		props: {
			name: {
				type: String
			},
			modelValue: {
				type: [String, Number],
				default: 0
			},
			value: {
				type: [String, Number],
				default: 0
			},
			initevent: {
				type: Boolean,
				default: false
			},
			ciystyle: {
				type: [String, Object]
			},
			min: {
				type: [String, Number],
				default: 0
			},
			max: {
				type: [String, Number],
				default: 100
			},
			step: {
				type: [String, Number],
				default: 1
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {};
		},
		watch: {
		},
		computed: {
			txtvalue() {
				if (typeof(this.modelValue) == 'number')
					return this.modelValue;
				if (typeof(this.value) == 'number')
					return this.value;
				if (this.modelValue)
					return this.modelValue;
				if (this.value)
					return this.value;
				return this.min;
			}
		},
		mounted() {
			if (this.initevent) {
				this.$emit('change', {
					name: this.name,
					from: 'init',
					value: this.txtvalue
				});
			}
		},
		methods: {
			textchanging(e) {
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				this.$emit('update:modelValue', txt);
				this.$emit('change', {
					name: this.name,
					from: 'changing',
					value: txt
				});
			},
			textchange(e) {
				var txt = e.detail.value;
				if (txt === undefined)
					txt = e.data;
				this.$emit('update:modelValue', txt);
				this.$emit('change', {
					name: this.name,
					from: 'changed',
					value: txt
				});
			}
		}
	}
</script>

<style scoped>
</style>