import React, { Component } from "react";
import { View, Text, Dimensions, StyleSheet, ImageBackground, Slider } from "react-native";
import { colors } from "../assets/styles/colors-theme";
import { Fonts } from '../assets/styles/fonts-theme'
export default class SliderWidget extends Component {
    constructor(props) {
        super(props);
        this.state = {
            initSliderValue: this.props.value ? this.props.value : 1,       // 初始化值
            maxValue: this.props.maxValue ? this.props.maxValue : 10,      // 滑块最大值
            minValue: this.props.minValue ? this.props.minValue : 1,        // 滑块最小值
            step: this.props.step ? this.props.step : 0,                    // 步调
            width: this.props.width ? this.props.width : Dimensions.get("window").width - 20,   // 设备宽度
            showFloat: false,   // 拖动的时候上面显示值
            minColor: this.props.minColor ? this.props.minColor : "#c53c2c", // 左边的轨迹颜色
            maxColor: this.props.maxColor ? this.props.maxColor : "#dddddd", // 右边的轨迹颜色
            sliderBgImg: this.props.bgImage                                  // 轨迹北京图片
        }
    }
    componentWillMount() {

    }
    render() {
        return (
            <View>
                <ImageBackground
                    resizeMethod={'scale'}
                    style={[styles.imageStyle, { width: this.state.width }]}
                    source={this.state.sliderBgImg}
                    imageStyle={{ borderRadius: 2 }}
                >

                    <View style={[styles.floatValue, { left: this.state.initSliderValue / this.state.maxValue * this.state.width - (this.state.initSliderValue * this.state.maxValue / this.state.width) }]}><Text style = {styles.textStyle}>{this.state.initSliderValue}</Text></View>


                    <Slider
                        style={[styles.silder, { width: this.state.width }]}
                        maximumValue={10}
                        minimumValue={1}
                        step={1}
                        value={this.state.initSliderValue}
                        onValueChange={this.onValueChangeFun}
                        onSlidingComplete={this.onSlidingCompleteFun}
                        minimumTrackTintColor={this.state.minColor}
                        maximumTrackTintColor={this.state.maxColor}
                        // thumbImage={this.state.sliderBgImg}
                        thumbTintColor={colors.mainColor}
                        thumbStyle={{ width: 30, height: 30, overflow: "hidden", borderRadius: 30, shadowColor: "#aaaaaa", shadowOffset: { width: 4, height: 4 }, shadowOpacity: 0.8, shadowRadius: 4, elevation: 4, opacity: 1 }}
                    >
                    </Slider>
                </ImageBackground>
            </View>
        );
    }
    componentDidMount() {

    }
    componentWillUnmount() {

    }
    // 拖动事件
    onValueChangeFun = (event) => {
        console.log(event, "改变事件");
        this.setState({
            initSliderValue: event*10,
            showFloat: true
        });
    }
    // 拖动完成事件
    onSlidingCompleteFun = (event) => {
        this.setState({
            showFloat: false
        });
        this.props.getSliderValue(event);
    }
}
const styles = StyleSheet.create({
    silder: {
        position: "absolute",
        top: -18,
        left: 0
    },
    imageStyle: {
        height: 4,
        marginTop: 35,
        marginBottom: 15,
        borderRadius: 2,
        position: "relative"
    },
    floatValue: {
        width: 30,
        height: 20,
        backgroundColor: "#fff",
        position: "absolute",
        top: -35,
        left: -10,
        alignItems: "center",
        justifyContent: "center"
    },
    textStyle:{
        fontSize:16,
        color:colors.mainColor,
        fontFamily:Fonts.ubuntu,
        
    }
})