customer / shanghai-railway-rnapp

import {Alert, FlatList, Image, StyleSheet, TouchableOpacity, View} from "react-native";
import React, {PureComponent} from "react";

import {width} from "../../utils/getSize";
import _ from "lodash";

const deleteImg = require("../../img/issue_pic.png");
const addImgUrl =
  "http://m.qpic.cn/psb?/ccbca58c-ff4d-4e83-8519-00cda331bf6c/OLgpXFgaWqAKV1L.MC1dx1gXfcQ9rgYEl0dKjaJdi4M!/b/dFIBAAAAAAAA&bo=QwFFAQAAAAARBzY!&rf=viewer_4";

export default class QuestionAttItem extends PureComponent {
  // 初始化
  constructor(...props) {
    super(...props);
    this.state = {
      dataSource: [],
      attDataSource: [],
      isAttListViewShow: this.props.isAttListViewShow,
      isAttAddShow: this.props.isAttAddShow
    };
  }

  // 初始化附件显示
  onInitAttShow(isShow) {
    this.setState({
      isAttShow: isShow
    });
  }

  // 初始化listview dataSource
  onInitAttListData(dataSources) {
    if (_.isEmpty(dataSources)) {
      return;
    }
    // 添加第九张图片时候 去除第一项
    if (dataSources.length == 10) {
      dataSources.splice(0, 1);
    }
    const dataTemp = JSON.parse(JSON.stringify(dataSources));
    this.setState({
      dataSource: dataTemp,
      attDataSource: dataTemp
    });
  }

  // 初始化附件添加显示
  onInitAttAddShow(isShow) {
    this.setState({
      isAttAddShow: isShow
    });
  }

  onInitAttListViewShow(isShow) {
    this.setState({
      isAttListViewShow: isShow
    });
  }

  showAttListView = () => {
    if (this.state.isAttListViewShow) {
      return (
        <FlatList
          style={styles.attListViewStyle}
          refreshing={false}
          keyExtractor={this.keyExtractor}
          data={this.state.attDataSource}
          renderItem={this.showAttView.bind(this)}
          showsVerticalScrollIndicator={false}
          horizontal={false}
          numColumns={3}
        />
      );
    }
    return null;
  };

  // 显示附件缩略图
  keyExtractor = (item, index) => index;
  showAttView({ item, index }) {
    return (
      <TouchableOpacity
        style={
          index == 1 || index == 4 || index == 7
            ? {
                width: (width - 36) * 0.33,
                height: (width - 36) * 0.33,
                marginTop: 3
              }
            : {
                width: (width - 36) * 0.33,
                height: (width - 36) * 0.33,
                marginTop: 3,
                marginLeft: 3,
                marginRight: 3
              }
        }
        onPress={() => {
          const { showImage } = this.props;
          showImage(index);
        }}
      >
          { item.path != addImgUrl ?<Image source={{ uri: item.path + '?x-oss-process=image/resize,w_500' }} style={styles.attachStyle} resizeMode="cover"/>
          : <Image source={require('../../img/add.jpg')} style={styles.attachStyle} resizeMode="cover"/>}

          <View
          style={{
            backgroundColor: "#000",
            opacity:item.path != addImgUrl ? 0.1:0,
            position: "absolute",
            top: 0,
            left: 0,
            width: (width - 36) * 0.33,
            height: (width - 36) * 0.33
          }}
        />
        {item.path != addImgUrl ? this.renderDeleteView(index) : null}
      </TouchableOpacity>
    );
  }

  renderDeleteView(rowID) {
    return (
      <TouchableOpacity
        style={styles.deleteStyle}
        onPress={() => {
          this.onDeleteImg(rowID);
        }}
      >
        <Image source={deleteImg} style={styles.deleteImgStyle} resizeMode="cover"/>
      </TouchableOpacity>
    );
  }

  // 删除图片
  onDeleteImg(rowID) {

      let _this = this;
      Alert.alert(
          '提醒',
          '确认删除？',
          [
              {text: '确定', onPress: function(){
                      let imgArr = _this.state.dataSource;
                      imgArr.splice(rowID, 1);
                      if (imgArr.length == 8) {
                          if (imgArr[0].path != addImgUrl) {
                              let url = {
                                  path: addImgUrl
                              };
                              imgArr.splice(0, 0, url);
                          }
                      }
                      const { updateImgArr } = _this.props;
                      updateImgArr(imgArr);
                      const dataTemp = JSON.parse(JSON.stringify(imgArr));
                      _this.setState({
                          dataSource: dataTemp,
                          attDataSource: dataTemp
                      });
                  }},
              {text: '取消', onPress: function(){
                  }}
          ]
      )
  }

  exportDataSource() {
    return this.state.dataSource;
  }

  render() {
    return <View style={styles.attachViewStyle}>{this.showAttListView()}</View>;
  }
}

const styles = StyleSheet.create({
  attachViewStyle: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#FFFFFF",
    marginLeft: 15,
    marginRight: 15
  },
  attListViewStyle: {
    alignSelf: "center",
    flexDirection: "row",
    flexWrap: "wrap"
  },
  attachStyle: {
    width: (width - 36) * 0.33,
    height: (width - 36) * 0.33,
    alignItems: "center"
  },
  deleteStyle: {
    position: "absolute",
    top: 0,
    right: 0,
    padding: 5
  },
  deleteImgStyle: {
    width: 10,
    height: 10
  }
});