customer / shanghai-railway-rnapp

/**
 * Created by mac on 2017/5/10.
 */
import React, { Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
} from 'react-native';
import {width} from '../../utils/getSize';
import {observer} from 'mobx-react/native'
import PropTypes from 'prop-types';
const select = require('../../img/datiSelect.png');
const shangyiti = require("../../img/shangyiti-02.png")
const xiayiti = require('../../img/xiayiti-02.png')

const dati_xuanze = require('../../img/dati-xuanze-02.png')
const dati_xuanze_red = require("../../img/dati-xuanze-01.png")
const correct = require('../../img/zhengqudaan.png');
@observer
export default class SubItem extends Component {

    constructor(props) {
        super(props);

    }
    select = (id) => {
        const {data} = this.props;
        data.setValue(id);
        // if (data.isCorrect) {
        //   alert("true");
        // } else {
        //   alert("false");
        // }
    }
    option = (v, i) => {//v是当前题目的其中一个选项的对象，i是索引
        const {data} = this.props;
        if (this.props.type == 'allLoad' || this.props.type == 'resultModal') {
            if (data.selectId === 0) {//什么都没选的情况
                if (v.is_correct) {
                    return (
                        <TouchableOpacity style={[styles.optionBlock, {backgroundColor: 'rgb(234,247,240)'}]} key={i}>
                          <Image
                              source={correct}
                              resizeMode="contain"
                              style={styles.circle}
                          />
                          <Text style={styles.fontText}>{v.value}</Text>
                        </TouchableOpacity>
                    )
                }
            }
            if (data.isCorrect) {//选择了，并且选择正确的情况
                if (v.is_correct) {
                    return (
                        <TouchableOpacity style={[styles.optionBlock, {backgroundColor: 'rgb(234,247,240)'}]} key={i}>
                          <Image
                              source={correct}
                              resizeMode="contain"
                              style={styles.circle}
                          />
                          <Text style={styles.fontText}>{v.value}</Text>
                        </TouchableOpacity>
                    )
                }
            }
            if (data.selectId !== 0) {
                if (data.selectId === v.id) {
                    return (
                        <TouchableOpacity style={[styles.optionBlock]} key={i}>
                          <Image
                              source={dati_xuanze_red}
                              resizeMode="contain"
                              style={styles.circle}
                          />
                          <Text style={styles.fontText}>{v.value}</Text>
                        </TouchableOpacity>
                    )
                }
                if (v.is_correct) {
                    return (
                        <TouchableOpacity style={[styles.optionBlock, {backgroundColor: 'rgb(234,247,240)'}]} key={i}>
                          <Image
                              source={correct}
                              resizeMode="contain"
                              style={styles.circle}
                          />
                          <Text style={styles.fontText}>{v.value}</Text>
                        </TouchableOpacity>
                    )
                }
            }
            return (
                <TouchableOpacity style={styles.optionBlock} key={i}>
                  <Image
                      source={dati_xuanze}
                      resizeMode="contain"
                      style={styles.circle}
                  />
                  <Text style={styles.fontText}>{v.value}</Text>
                </TouchableOpacity>
            )
        }
        else {
            if(v.select==true)
            {
                console.log("------select-------")
                return (
                    <TouchableOpacity style={styles.optionBlock} key={i} onPress={() => this.select(v.id)}>
                      <Image
                          source={dati_xuanze_red}
                          resizeMode="contain"
                          style={styles.circle}
                      />
                      <Text style={styles.fontText}>{v.value}</Text>
                    </TouchableOpacity>
                )
            }
            else{
                console.log("------NOselect-------")
                return (
                    <TouchableOpacity style={styles.optionBlock} key={i} onPress={() => this.select(v.id)}>
                      <Image
                          source={dati_xuanze}
                          resizeMode="contain"
                          style={styles.circle}
                      />
                      <Text style={styles.fontText}>{v.value}</Text>
                    </TouchableOpacity>
                )
            }
        }
    }
componentWillMount()
{
    this.state = {textHeight:85};
}
    render() {
        const {data} = this.props;
        console.log(data);
        return (
            <View style={styles.content}>
              <View style={styles.exceBlock}>
                <View style={styles.titleBlock}>
                  <Text style={[styles.fontTitleBar,{height:this.state.textHeight}]}>{data.titleId}</Text>
                  <Text style={styles.fontTitleCon} onLayout={
                      v=>{this.setState({textHeight:v.nativeEvent.layout.height+40})}
                  } >{data.title + " ("+ data.point +"分)"}</Text>
                </View>

                <View style={styles.option}>
                    {
                        data.optionArr.map((v, i) => this.option(v, i))
                    }
                </View>
              </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    fontTitle: {
        fontSize: 16,
        fontWeight: 'bold'
    },
    container: {
        flex: 1,
        backgroundColor: 'rgb(241,242,243)',
        alignItems: 'center',
    },
    navShadow: {
        shadowColor: '#999999',
        shadowOffset: {height: 0, width: 2},
        shadowRadius: 3,
        shadowOpacity: 0.6,
    },
    content: {
        marginLeft: 30,
        marginRight: 30,
        paddingTop: 20,
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10
    },
    exceBlock: {
        width: width - 60,
        borderRadius: 15,
        overflow: 'hidden',
        shadowColor: '#999999',
        shadowOffset: {height: 0, width: 2},
        shadowRadius: 3,
        shadowOpacity: 1,
    },
    titleBlock: {
        width: width - 60,
        backgroundColor: "rgb(225,49,72)",
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10

    },
    fontTitleBar: {
        marginTop:5,
        marginLeft:20,
        color: "rgba(255,255,255,0.2)",
        fontSize: 60,
        backgroundColor: 'transparent',

    },
    fontTitleCon: {
        position: 'absolute',
        top:0,
        left:0,
        marginTop: 25,
        marginLeft: 25,
        marginRight: 15,
        fontSize: 15,
        fontWeight: 'bold',
        color: '#fff',
        backgroundColor: 'transparent',

    },
    option: {
        backgroundColor: '#ffffff',
        paddingTop: 15,
        paddingBottom: 10,
        paddingLeft: 5,
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
    },
    optionBlock: {
        width: width - 70,
        paddingLeft: 25,
        flexDirection: 'row',
        marginRight: 5
    },
    fontText: {
        fontSize: 14,
        color: "#333333",
        marginTop: 15,
        marginBottom: 10,
    },
    circle: {
        width: 16,
        height: 16,
        marginTop: 15,
        marginBottom: 20,
        marginRight: 10
    },
    infoTime: {
        width: width - 60,
        marginTop: 20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 15,
        paddingRight: 15
    },
    btnSelect: {
        flexDirection: 'row'
    },
    icon: {
        width: 14,
        height: 14,

    },
    fontYiti: {
        fontSize: 14,
        color: "#bbbbbb"
    }
});