constructor(props) {
super(props)
let translateValue= new Animated.ValueXY({x: 0,y: 0})
translateValue.addListener(({x,y})=>{
// Log('value',x,y)
})
this.state = {
translateValue: translateValue,// 滚屏高度
scrollHeight: this.props.scrollHeight || 32,// 滚屏内容
kb_content: [],// Animated.View 滚动到的 y轴坐标
kb_tempValue: 0,// 最大偏移量
kb_contentOffsetY: 0,// 每一次滚动切换之前延迟的时间
delay: this.props.delay || 500,// 每一次滚动切换的持续时间
duration: this.props.duration || 500,enableAnimation: true,}
}

render() {
return (
<View style={[styles.kbContainer,{height: this.state.scrollHeight},this.props.kbContainer]}>
{
this.state.kb_content.length !== 0 ?
<Animated.View
style={[
{flexDirection: 'column'},{
transform: [
{translateY: this.state.translateValue.y}
]
}
]}>
{this.state.kb_content.map(this._createKbItem.bind(this))}

componentWillReceiveProps(nextProps) {
Log('componentWillReceiveProps',nextProps)
this.setState({
enableAnimation: nextProps.enableAnimation?true:false
},() => {
this.startAnimation();
}
)
}

componentDidMount() {
Log('componentDidMount')
let content = this.props.data || []
if (content.length !== 0) {
let h = (content.length + 1) * this.state.scrollHeight
this.setState({
kb_content: content.concat(content[0]),kb_contentOffsetY: h
})

  // 开始动画
  // this._startAnimation()
  this.startAnimation();
}

}

_createKbItem(kbItem,index) {
return (
<View key={index}
style={[{justifyContent: 'center',height: this.state.scrollHeight},this.props.scrollStyle]}>

startAnimation = () => {
if (this.state.enableAnimation) {
if(!this.animation){
this.animation = setTimeout(() => {
this.animation=null;
this._startAnimation();
},this.state.delay);
}

}

}

componentWillUnmount() {
if (this.animation) {
clearTimeout(this.animation);
}
if(this.state.translateValue){
this.state.translateValue.removeAllListeners();
}
}

_startAnimation = () => {
this.state.kb_tempValue -= this.state.scrollHeight;
if (this.props.onChange) {
let index = Math.abs(this.state.kb_tempValue) / (this.state.scrollHeight);
this.props.onChange(index<this.state.kb_content.length-1?index:0);
}
Animated.sequence([

  // Animated.delay(this.state.delay),Animated.timing(
    this.state.translateValue,{
      isInteraction: false,toValue: {x: 0,y: this.state.kb_tempValue},duration: this.state.duration,// 动画持续的时间（单位是毫秒），默认为500
      easing: Easing.linear
    }
  ),])
  .start(() => {
    // 无缝切换
    // Log('end')
    if (this.state.kb_tempValue - this.state.scrollHeight === -this.state.kb_contentOffsetY) {
      // <a href="https://www.jb51.cc/tag/kuaisu/" target="_blank" class="keywords">快速</a>拉回到初始状态
      this.state.translateValue.setValue({x: 0,y: 0});
      this.state.kb_tempValue = 0;
    }
    this.startAnimation();



  })

}
}

const styles = StyleSheet.create({
kbContainer: {
// 必须要有一个背景或者一个border，否则本身高度将不起作用
backgroundColor: 'transparent',overflow: 'hidden'
},kb_text_c: {
fontSize: 18,color: '#181818',}

const dataArray = [
{
title: '降价了',},{
title: '全场五折',{
title: '打到骨折',}
]
export default class extends React.Component {

render() {
let array = [{ content: '' }];
if (dataArray && dataArray.length > 0) {
array = [];
for (let item of dataArray) {
array.push({ content: item.title});
}
}
return (
<View style={{ padding: Constant.sizeMarginDefault,paddingBottom: 0,backgroundColor: '#FFFFFF' }}>
<TouchableOpacity onPress={() => {
if (dataArray && dataArray.length > 0) {
Log(dataArray[this.index].title)
}
}} style={{ flexDirection: 'row',backgroundColor: "#FFFFFF",alignItems: 'center',borderRadius: 8,paddingLeft: 5,paddingRight: 5 }}>
<Text style={{ fontSize: Constant.scaleFontSize(14) }} fontWeight={'bold'}>公告
<View style={{ marginLeft: 5,marginRight: 8,backgroundColor: '#b01638',width: 22,}}>
<Text style={{ color: 'white',fontSize: Constant.fontSizeSmall }}>新

}
};