export default class SelectCityTabBar extends Component {
//属性声名
static propTypes = {
goToPage: PropTypes.func,activeTab: PropTypes.number,tabs: PropTypes.array,backgroundColor: PropTypes.string,activeTextColor: PropTypes.string,inactiveTextColor: PropTypes.string,textStyle: Text.propTypes.style,tabStyle: ViewPropTypes.style,renderTab: PropTypes.func,underlineStyle: ViewPropTypes.style,};
//默认属性
static defaultProps = {
activeTextColor: '#FA3D4F',inactiveTextColor: 'black',backgroundColor: null,}

renderTab(name,page,isTabActive,onPressHandler) {
const { activeTextColor,inactiveTextColor,textStyle,} = this.props;
const textColor = isTabActive ? activeTextColor : inactiveTextColor;
const fontWeight = isTabActive ? 'bold' : 'normal';
const viewStyle = isTabActive ? [styles.tab,{ borderBottomWidth: Constant.sizeDividerLarge,borderColor: Constant.colorPrimary }] : styles.tab;

if (Platform.OS !== 'ios') {
return <TouchableNativeFeedback
delayPressIn={0}
background={TouchableNativeFeedback.SelectableBackground()}
key={name + page}
accessible={true}
accessibilityLabel={name}
accessibilityTraits='button'
onPress={() => onPressHandler(page)}

{name} }

return <TouchableOpacity
key={name + page}
accessible={true}
accessibilityLabel={name}
accessibilityTraits='button'
onPress={() => onPressHandler(page)}

{name} ; }

render() {
return (
<View style={{ flexDirection: 'row',borderBottomWidth: Constant.sizeDividerNormal,borderColor: Constant.colorDivider }}>
{this.props.tabs.map((name,page) => {
const isTabActive = this.props.activeTab === page;
const renderTab = this.props.renderTab || this.renderTab;
return this.renderTab(name,this.props.goToPage);
})}

const styles = StyleSheet.create({
tab: {
alignItems: 'center',justifyContent: 'center',paddingBottom: 10,marginLeft: 10,tabs: {
height: 50,flexDirection: 'row',justifyContent: 'space-around',borderWidth: 1,borderTopWidth: 0,borderLeftWidth: 0,borderRightWidth: 0,borderColor: '#ccc',});

static defaultProps = {
commitFun: function (value) {
console.log(value);
},dissmissFun: function () {

},lastAddress: null,};

constructor(props) {
super(props);
if (Platform.OS === 'android') {
UIManager.setLayoutAnimationEnabledExperimental(true)
}
const { lastAddress } = props;
let selectAddress = this.initAddress(lastAddress);
this.state = {
selectAddress
}
}

initAddress(lastAddress) {
let selectAddress = [
{
value: null,label: null,children: AREA_JSON,{
value: null,children: null,}];
let array = null;

function fun(array,value) {
for (let item of array) {
if (item.value + '' === value + '') {
return item;
}
}
}
try {
selectAddress = selectAddress.map((item,index) => {
let result = fun(array ? array : AREA_JSON,lastAddress[index].value);
if (result.children) {
array = result.children;
}
return result;
});
} catch (e) {
console.log('-----e-',e);
}
return selectAddress
}

/**

• 列表行
• @param item
• @param i
• @returns {XML}
  */
  renderListItem(item,i) {
  let itemStyle = styles.itemStyle;
  let textStyle = styles.itemText;
  let { selectAddress } = this.state;
  if (item.label === selectAddress[i].label) {
  itemStyle = [itemStyle];
  textStyle = [textStyle,{ color: 'red' }]
  }
  return (
  <TouchableOpacity
  style={itemStyle}
  key={i + item.label}
  onPress={() => {
  this.pressItem(item,i)
  }}

  {item.label} ) }

/**

• 点击列表事件
• @param item 选中数据
• @param i 选中行数
  */
  pressItem(item,i) {
  let { selectAddress } = this.state;
  const initObj = {
  value: null,}
  let tempIndex = 0;
  if (i === 0) {
  selectAddress[0] = item;
  selectAddress[1] = initObj;
  selectAddress[2] = initObj;
  tempIndex = 1
  } else if (i === 1) {
  selectAddress[1] = item;
  selectAddress[2] = initObj;
  tempIndex = 2
  } else {
  selectAddress[2].value = item.value;
  selectAddress[2].label = item.label;
  tempIndex = 2
  let address = [
  {
  label: selectAddress[0].label,value: selectAddress[0].value
  },{
  label: selectAddress[1].label,value: selectAddress[1].value
  },{
  label: selectAddress[2].label,value: selectAddress[2].value
  }
  ]
  this.props.commitFun && this.props.commitFun(address);
  this.props.dissmissFun && this.props.dissmissFun();
  return null;

}
this.setState({ selectAddress });
InteractionManager.runAfterInteractions(() => {
this.tabView.goToPage(tempIndex)
})

}

render() {
const { selectAddress } = this.state;
return (

const styles = StyleSheet.create({
container: {
height: height * 0.6,backgroundColor: '#F5FCFF',scrollStyleList: {
width: width,marginBottom: Constant.sizeMarginDefault,marginTop: Constant.sizeMarginDefault,itemStyle: {
marginTop: 5,width: width,height: 35,marginLeft: Constant.sizeMarginDefault,justifyContent: 'center'
},itemText: {
fontSize: 15,color: '#333333'
},

export default class extends React.Component {

render() {
return (
<TouchableOpacity style={{flex:1,justifyContent:'center',alignItems:'center'}} onPress={() => this.openAddressSelect()}>

}

openAddressSelect() {

Widget.Popup.show( // 这边使用自己封装的modal嵌套地址选择器
<AddressSelect
commitFun={(area) => this.onSelectArea(area)}
dissmissFun={() => Widget.Popup.hide()}
/>,{
animationType: 'slide-up',backgroundColor: '#00000000',onMaskClose: () => {
Widget.Popup.hide()
}
})
}

onSelectArea = (area) => {
Log(area)
}
};