import {createElement, Component} from 'weex-rx';
import { View, Text,ScrollView,TouchableHighlight} from 'nuke-components';
import {Icon,Button} from 'nuke';
import {MultiRow} from 'nuke-grid';
import {mount} from 'nuke-mounter';
let gridData=[];
for (var i = 1; i < 13; i++) {
let s=i.toString();
if(i<10){
s='0'+i.toString();
}
gridData.push({'icon':'https://g.alicdn.com/DingTalkWeb/web/2.20.1/app/img/face/default/emotion_0'+s+'.png','name':'表情'+s,'num':''})
}
let App = class NukeDemoIndex extends Component {
constructor() {
super();
this.state={
gridData:gridData
}
}
renderGridCellCom=(item,index)=>{
let self=this;
return <TouchableHighlight style={customStyle.gridcell}>
<Icon size="large" src={item.icon}/>
<Text style={customStyle.funTitle}>{item.name}</Text>
<Text style={customStyle.sub}>{index}</Text>
{self.renderMark(item,index)}
</TouchableHighlight>
}
newText(e){
var self=this;
setTimeout(function(){
gridData[gridData.length-1].name='天气不错';
gridData[gridData.length-1].num='9';
self.setState({gridData:gridData});
},1000)
}
renderMark(item,index) {
return (item.num!==''?
<View style={customStyle.tagOuter}>
<View style={customStyle.tag}>
<Text style={customStyle.tagText}>{index}</Text>
</View>
</View>
:null
);
}
render() {
var self=this;
return (
<ScrollView>
<MultiRow dataSource={self.state.gridData} rows={4} renderRow={this.renderGridCellCom} />
<View style={customStyle.gridWrap}>
<Button type="primary" onPress={this.newText.bind(this)}>修改</Button>
</View>
</ScrollView>
)
}
}
const customStyle={
gridWrap:{
height:'280rem'
},
gridcell:{
height:'200rem',
'justifyContent':'center',
'alignItems':'center',
'border':'1rem',
'borderStyle':'solid',
'borderColor':'#e8e8e8',
'marginTop':'-1rem',
'marginLeft':'-1rem'
},
funTitle:{
},
tagOuter:{
width:'46rem',
height:'46rem',
borderRadius:'23rem',
'borderWidth':'2rem',
'borderStyle':'solid',
'borderColor':'#ffffff',
position:'absolute',
right:'40rem',
top:'40rem',
'backgroundColor':'#ff0000'
},
tag:{
'flex':1,
justifyContent:'center',
alignItems:'center'
},
tagInner:{
},
tagText:{
color:'#ffffff'
},
sub:{
color:'#999'
}
}
mount(<App/>, mountNode);
