import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
SafeAreaView,
TouchableOpacity,
ScrollView,
FlatList,
Image
} from 'react-native';
import {connect} from 'react-redux';
import HeadBackItem from '../../common/HeadBackItem';
import {
home_background_color,
foundation_color,
promary_color,
second_text_color,
third_text_color,
first_text_color,
second_text_size,
Width,
pxSize,
safe_view,
font_family_semibold,
font_family_light
} from '../../../base/BaseStyle';
import {
FooterBtnStyle
} from '../../common/CellTextStyle';
import StatusBarView from '../../common/StatusBarView';
class EditStencilPage extends Component {
constructor(props) {
super(props);
this.state = {
topProcOptionList: [
{
title: '编辑产品'
},
{
title: '螺钉盒'
},
{
title: '器械包'
},
{
title: '工具'
}
],
topActiveIndex: 0,
contOptionData: [ // 底部产品内容
{
"id": "0",
title: '规格：JS-CGO PE 10',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 20,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "1",
title: '规格：JS-CGO PE 10 11',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "2",
title: '规格：JS-CGO PE 10 22',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "3",
title: '规格：JS-CGO PE 10 33',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "4",
title: '规格：JS-CGO PE 10 44',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "5",
title: '规格：JS-CGO PE 10 55',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "6",
title: '规格：JS-CGO PE 10 55',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "7",
title: '规格：JS-CGO PE 10 55',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
},
{
"id": "8",
title: '规格：JS-CGO PE 10 888',
tip1: '型号：10',
tip2: '物料代码：JUST00000104',
value: 0,
imgIcon: require('../../../images/model_test.png'),
select: false
}
]
}
}
/**
* 点击当前产品加减
* @param {object} item 当前小类数据
* @param {number} index 当前角标
* @param {boolean} isPlus 默认减法 false，加法 true,
*/
handelCalculationList(item, index, isPlus) {
let { contOptionData } = this.state
let { value } = contOptionData[index]
if(isPlus) {
contOptionData[index].value += 1
} else if(!isPlus && value > 0) {
contOptionData[index].value -= 1
}
this.setState({
contOptionData
})
}
// 点击顶部菜单
handleTopNav(item, index) {
this.setState({
topActiveIndex: index
})
}
// 返回顶部编辑选项
renderTopProItem() {
let { topProcOptionList, topActiveIndex } = this.state
return (
<View style={styles.top_box}>
<ScrollView
style={styles.top_scroll_cont}
horizontal={true}
showsHorizontalScrollIndicator={false}
>
{
topProcOptionList.map((item, index) =>
<TouchableOpacity
activeOpacity={.8}
style={styles.top_touch_cont}
onPress={() => this.handleTopNav(item, index)}
>
<View style={[
styles.top_inner,
(index == 1 || index == 2) ? styles.se_thr_width : '',
index == 3 ? styles.four_width : '',
index == topActiveIndex ? styles.top_inner_act : ''
]}>
<Text style={[styles.top_tit, index == topActiveIndex ? styles.top_tit_act : '']}>
{item.title}
</Text>
</View>
</TouchableOpacity>
)
}
</ScrollView>
</View>
)
}
// 返回底部主要元素
renderContItem() {
return(
<View style={styles.edit_cont}>
<ScrollView
style={styles.edit_scroll_cont}
showsVerticalScrollIndicator={false}
>
<FlatList
style={styles.edit_list}
keyExtractor={item => item.id}
data={this.state.contOptionData}
extraData={this.state}
renderItem={ ({item, index}) => this.renderContColumnItem(item, index) }
/>
</ScrollView>
</View>
)
}
// 返回每一列元素
renderContColumnItem(item, index) {
return (
<SafeAreaView style={styles.column_container}>
<View style={styles.ri_inner}>
<View style={styles.oth_img_box}>
<Image style={styles.oth_img} source={item.imgIcon}/>
</View>
<View style={styles.ri_text_box}>
<Text style={styles.ri_te_tit}>
{ item.title }
</Text>
<Text style={[styles.ri_te_ot, styles.thr_ot]}>{item.tip1}</Text>
<Text style={styles.ri_te_ot}>{item.tip2}</Text>
</View>
<View style={styles.ri_num_box}>
<TouchableOpacity
activeOpacity={.9}
style={styles.btn_inner}
onPress={() => this.handelCalculationList(item, index)}
>
<View style={[styles.thr_num_btn, styles.thr_btn_left]}>
<Image source={require('../../../images/less_icon.png')} style={styles.thr_num_icon}></Image>
</View>
</TouchableOpacity>
<Text style={styles.thr_num}>{ item.value }</Text>
<TouchableOpacity
activeOpacity={.9}
style={styles.btn_inner}
onPress={() => this.handelCalculationList(item, index, true)}
>
<View style={[styles.thr_num_btn, styles.thr_btn_right]}>
<Image source={require('../../../images/plur_icon.png')} style={styles.thr_num_icon}></Image>
</View>
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
)
}
render() {
let {navigation} = this.props
let {title} = navigation.state.params
return (
<View style={styles.edit_container}>
<StatusBarView
isReactStackNavigator={true}
backgroundColor={promary_color}
barStyle = 'light-content'
/>
<SafeAreaView style={safe_view}>
<HeadBackItem title={title} navigation={navigation} />
<View style={styles.edit_main}>
{this.renderTopProItem()}
{this.renderContItem()}
</View>
<FooterBtnStyle
style={styles.sub_btn_pro}
activeOpacity={.8}
title={'编辑完成'}
textStyle= {styles.sub_btn}
onPress={() => console.warn('编辑完成')}
/>
</SafeAreaView>
</View>
);
}
}
const styles = StyleSheet.create({
edit_container: {
flex: 1,
backgroundColor: home_background_color,
padding: 0,
margin: 0
},
edit_main: {
flex: 1
},
top_box: {
width: Width(),
paddingHorizontal: 20,
paddingTop: 12,
// backgroundColor: foundation_color,
// borderBottomColor: '#F4F4F4',
// borderBottomWidth: 1
},
top_scroll_cont: {},
top_touch_cont: {},
top_inner: {
justifyContent: 'center',
alignItems: 'center',
marginRight: 14,
borderBottomWidth: 2,
borderBottomColor: home_background_color,
minWidth: 50,
},
se_thr_width: {
minWidth: 42
},
four_width: {
minWidth: 28
},
top_inner_act: {
borderBottomWidth: 2,
borderBottomColor: promary_color
},
top_tit: {
paddingTop: 10,
paddingBottom: 12,
color: second_text_color,
// fontSize: third_text_size
fontSize: 14
},
top_tit_act: {
color: first_text_color,
fontWeight: 'bold'
},
edit_cont: {
marginTop: 14,
flex: 1
// height: Height() - 187
},
edit_list: {},
column_container: {
paddingHorizontal: 20
},
ri_inner: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 14,
paddingHorizontal: 8,
backgroundColor: foundation_color,
marginBottom: 14
},
oth_img_box: {
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 50,
width: pxSize(50),
height: pxSize(50),
justifyContent: 'center',
alignItems: 'center'
},
oth_img: {
width: '90%',
height: '90%'
},
ri_text_box: {},
ri_te_tit: {
fontSize: second_text_size,
color: first_text_color,
// fontWeight: 'bold',
fontFamily: font_family_semibold
},
thr_ot: {
// fontWeight: 'normal',
// color: first_text_color
},
ri_te_ot: {
fontSize: 14,
color: third_text_color,
fontFamily: font_family_light
},
ri_num_box: {
flexDirection: 'row',
alignItems: 'center'
},
thr_num_btn: {
width: pxSize(24),
height: pxSize(24)
},
thr_btn_left: {
marginRight: 4
},
thr_btn_right: {
marginLeft: 4
},
thr_num_icon: {
width: '100%',
height: '100%'
},
btn_inner: {},
thr_num: {
minWidth: pxSize(20),
textAlign: 'center'
},
sub_btn_pro: {
backgroundColor: promary_color
},
})
export default EditStencilPage;