import { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import { modifyZoom } from '../../actions/brand'
import './index.scss';

@connect(({ brand }) => ({
    brand
}), (dispatch) => ({
    modifyZoom (curData) {
        dispatch(modifyZoom(curData))
    }
}))

export default class SideIndex extends Component {
    constructor(props) {
        super(props)

        this.state = {
            curZoomName: ''
        }
    }
  
    componentWillMount () {}
  
    componentDidMount () {}
  
    componentDidShow () {}
  
    componentDidHide () {}

    clickZoomName(zoom) {
        let {modifyZoom} = this.props;

        modifyZoom(zoom === '0' ? 'zero' : zoom);

        this.setState({
            curZoomName: zoom
        });
    }
  
    render () {
        let {indexList} = this.props;

        return (
        <View className="side-index">
            <View className="side-idx">
                {
                    indexList.map(item => {
                        return (
                            <View key={item.name} data-idx={item.name} className='letter' onClick={this.clickZoomName.bind(this, item.name)}>
                                <Text className={this.state.curZoomName === item.name ? 'idx-item no-intercept zoom' : 'idx-item no-intercept'}>
                                    {item.name}
                                </Text>

                                <View className={this.state.curZoomName === item.name ? 'zoom-in zoom-show' : 'zoom-in zoom-hide'}>
                                    {item.name}
                                </View>
                            </View>
                        )
                    })
                }   
            </View> 
        </View>
      )
    }
  }