/** 
 * @param: 
 *      itemWidth: 每一个图片宽度
 *      itemHeight: 每一个图片高度
 *      data:  数据 Arrary
 *      nav: 路由方法
 */

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    TouchableOpacity,
    Image
} from "react-native";
import BasePage from '../BasePage'
import Dimensions from '../utils/dimensions'
import courseDetails from '../services/courseDetails'

export default class ScrollRow extends Component {


    render() {
        return (
            <FlatList
                data={this.props.data}
                horizontal={true}
                renderItem={({ item, separators }) => this.renderItem(item, separators)}
                keyExtractor={(item, index) => index.toString()}
                showsHorizontalScrollIndicator = {false}
            />
        )
    }

    renderItem(item, separators) {
        const courseId = item.course ? item.course.id : item.operationContent;
        return (
            <TouchableOpacity
                style={{
                    // flex: 1,
                    height: this.props.itemHeight,
                    width: this.props.itemWidth,

                    flexDirection: 'row',
                    alignItems: 'center',
                    marginLeft: 9,
                }}
                onPress={() => this.playOrGoback(courseId, item.playUrl, item)}
                activeOpacity={1}
            >
                <View style={{
                    height: this.props.itemHeight,
                    width: this.props.itemWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    position: 'relative'
                    // flex: 1,
                }}>
                    <Image
                        source={{
                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.iconImg ? item.iconImg : item.boothContent
                            // uri: item.icon
                        }}
                        style={{
                            borderRadius: 10,
                            width: this.props.itemWidth,
                            height: this.props.itemHeight,
                            marginBottom: 6,
                        }}
                    />
                    {item.summary
                        ?
                        <Text style={styles.itemSummary}>
                            {item.summary}
                        </Text>
                        :
                        item.title
                        ?
                        <Text style={styles.itemSummary}>
                            {item.title}
                        </Text>
                        :
                        null
                    }
                    {
                        item.price ?
                        <Image
                        // source={ require('../images/courseDetails/nobuy.png')}
                        style={{
                            position: 'absolute',
                            width: 30,
                            height: 30
                        }}
                        />
                        :
                        null

                    }

                </View>

            </TouchableOpacity>
        )
    }
    playOrGoback(courseId, playUrl, item) {
        if (this.props.type) {
            this.props.changeUri(playUrl)
            courseDetails.playLog({
                "title": item.title,
                "url": item.playUrl,
                courseId,
                "courseWareId": item.id,
                "playStopTime": "",
                "type": "LIBRARY",
                "platFormType": "MOBILE"
            }).then( res => console.log('添加播放记录', res))
            .catch( error => console.log(error))
        } else {
            this.props.nav('CourseDetails', {courseId})
        }
    }
}

const styles = StyleSheet.create({
    wrapper: {

    },
    itemSummary: {
        // flex:1,
        width: '100%',
        height: 20,
        alignItems: 'center',
        justifyContent: "flex-start",
        color: '#151515',
        fontSize: 13,
    }
})