customer / shanghai-railway-rnapp

/**
 
 
    这个控制器已经废弃了 !  !  !
 
 
 */


import React, {Component} from "react";
import {FlatList, Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {width, zoomH, zoomW} from "../../utils/getSize";
import {dateToMsgTime, xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
import StashHead from "../../widget/StashHead";

const tpPic = require("../../img/tp.png");

export default class AtlasList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentWillMount() {
    this.getList();
  }

  // 获取图集列表
  getList() {
    let length = 0;
    length = this.state.data.length;
    let params = {
      threadType: 1,
      pageNumber: length / 10 + 1,
      keyword: this.props.triData,
      pageSize: 20,
      isForward: false,
      searchType: "HAS_PUBLISH",
        sourceFrom:'APP',
      isActive: true
    };
    AppService.queryList(params)
      .then(data => {
        this.dataHandle(data);
      })
      .catch(error => {
        this.setState({
          loading: false
        });
        xnToast(error);
      });
  }

  /**
   * 接口返回数据处理
   * @param {*} data
   */
  dataHandle(data) {
    console.log("-----DATA");
    console.log(data);

    if (!!!data) {
      // xnToast("暂无数据!!!");
      return;
    }
    let resultStr = data.result;
    let dataList = [];
    for (let i = 0; i < resultStr.length; i++) {
      let attachmentList = [];
      let singleItem = {
        name: "",
        date: "",
        creatName: "",
        picCount: "",
        attachment: [],
        commentNum: 0,
        postID: 0,
        isBoardTop: false
      };
      singleItem.isBoardTop = data.isBoardTop ? data.isBoardTop : false;
      if (resultStr[i].attachmentList) {
        for (let j = 0; j < resultStr[i].attachmentList.length; j++) {
          if (j > 2) {
            break;
          }
          let urls = {
            url: ""
          };
          urls.url = resultStr[i].attachmentList[j].filePath;
          attachmentList.push(urls);
        }
      }
      singleItem.name = resultStr[i].title;
      singleItem.creatName = resultStr[i].threadUserName;
      let time = dateToMsgTime(resultStr[i].creationTime);
      singleItem.date = time;
      singleItem.attachment = attachmentList;
      singleItem.picCount = resultStr[i].attachmentCount;
      singleItem.picCount = singleItem.picCount ? singleItem.picCount : "0";
      singleItem.postID = resultStr[i].id;
      singleItem.commentNum = resultStr[i].threadStatistics.commentNum;
      dataList.push(singleItem);
    }
    this.setState({
      data: dataList
    });
  }

  _detailClick = item => {
    //详情
    this.props.navigation.navigate("AtlasDetails", { postID: item.postID });
  };

  //渲染item
  keyExtractor = (item, index) => index;
  renderItem({ item, index }) {
    return (
      <TouchableOpacity
        style={styles.itemBackground}
        activeOpacity={0.8}
        onPress={() => {
          this._detailClick(item);
        }}
      >
        <View>
          {/*文字*/}
          <Text
            style={{
              width: "100%",
              fontSize: 18,
              color: "#000",
              fontWeight: "bold"
            }}
            numberOfLines={2}
          >
            {item.name}
          </Text>

          {/*图片*/}
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "wrap",
              marginTop: 14
            }}
          >
            {item.attachment
              ? item.attachment.map((v, i) => this.renderImageItem(v, i, index))
              : null}
          </View>
        </View>
        <TouchableOpacity
          activeOpacity={0.8}
          style={styles.starItem}
          onPress={this._forwardingClick}
        >
          <View
            style={{
              backgroundColor: "black",
              borderRadius: 10,
              opacity: 0.65,
              height: 20,
              width: 55,
              marginTop: -26,
              right: -285,
              alignItems: "center",
              flexDirection: "row"
            }}
          >
            <Image style={{ marginLeft: 8 }} source={tpPic} />
            <Text style={{ color: "white", fontSize: 12 }}>
              {" "}
              {item.picCount}图{" "}
            </Text>
          </View>
          <View
            style={{ flexDirection: "row", marginLeft: -50, marginTop: 10 }}
          >
            {this.state.data.isBoardTop ? <StashHead /> : null}
            <Text
              style={{
                fontSize: 12,
                color: "#000000",
                opacity: 0.45
              }}
            >
              {item.creatName} 评论{item.commentNum} {item.date}
            </Text>
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    );
  }
  //渲染图片列表item
  renderImageItem(item, i, index) {
    return (
      <View
        key={i}
        style={[
          i < 2 ? { marginRight: 10 } : null,
          {
            width: (width - 48) * 0.33,
            height: 74,
            backgroundColor: "#FFFFFF"
          }
        ]}
      >
        <Image
          style={{ width: "100%", height: "100%" }}
          source={{
            uri: item.url,
            cache: "force-cache"
          }}
          resizeMode="cover"
        />
      </View>
    );
  }

  _separator = () => {
    return <View style={{ height: 5, backgroundColor: "#eeeeee" }} />;
  };
  render() {
    return (
      <View style={styles.background}>
        {this.state.data && (
          <FlatList
            style={{ flex: 1 }}
            refreshing={false}
            keyExtractor={this.keyExtractor}
            data={this.state.data}
            ItemSeparatorComponent={this._separator}
            renderItem={this.renderItem.bind(this)}
            showsVerticalScrollIndicator={false}
                             onRefresh={() => {
                             this.setState(
                                           {
                                           data: [],
                                           },
                                           function() {
                                           this.getList();
                                           }
                                           );
                             }}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: "#ececf1",
    display: "flex"
  },

  itemBackground: {
    backgroundColor: "#FFFFFF",
    padding: 14
  },

  topSearchView: {
    flex: 1,
    width: "100%",
    height: 40 / zoomH,
    backgroundColor: "#FFFFFF",
    borderRadius: 2,
    display: "flex",
    marginLeft: 15 / zoomW,
    marginRight: 15 / zoomW
  },
  tabStyle: {
    height: 34 / zoomH,
    backgroundColor: "#fff",
    elevation: 0,
    borderWidth: StyleSheet.hairlineWidth
  },

  starItem: {
    flex: 1,
    justifyContent: "flex-start",
    flexDirection: "row"
  },
  forwardingBg: {
    borderWidth: 1,
    borderColor: "#eeeeee"
  }
});