import React from "react";
import { Upload, Icon, Button, message } from "antd";
import PropTypes from "prop-types";
import { uploadUrl } from "../../services/api";
import Immutable, { Map, is } from 'immutable';
import "./less/style.less";

/**w
 *
 * @desc    鎶� antd 缁勪欢鐨勬枃浠朵笂浼犵粍浠跺皝瑁呭湪涓€璧凤紝
 *          鍙渶瑕佸叧蹇冨垵濮嬪寲鐨勫€� init 浠ュ強 onchang 鏂规硶銆傛敮鎸佸涓枃浠�
 * @param   {Array} init 鍒濆鍖栫殑鍦板潃
 * @param   {func} onResult(data)  杩斿洖鏂囦欢涓婁紶缁撴灉銆�
 * @param   {Int} num  璁剧疆鏂囦欢涓婁紶涓暟銆�
 * @param   {Int} disabled  璁剧疆鏂囦欢鏄惁绂佹涓婁紶銆�
 * @param   {types} 闄愬埗涓婁紶鏂囦欢鐨勬牸寮忋€�
 * @param   {size} 闄愬埗涓婁紶鏂囦欢鐨勫ぇ灏忋€� 鍗曚綅MB  2019-09-23
 * @return
 */

class PUpLodadFile extends React.Component {
  state = {
    fileList: [],
    ifInit: false //鏄惁鍔犺浇瀹屾垚鍒濆鍖�
  };

  static propTypes = {
    init: PropTypes.array,
    onResult: PropTypes.func,
    num: PropTypes.number,
    disabled: PropTypes.bool
  };
  componentWillMount = () => {
    if (this.props.init) {
      if (Object.prototype.toString.call(this.props.init) == "[object Array]") {
        this.updataList(this.props.init);
      }
    }
  };

  componentWillReceiveProps = nextProps => {
    const nextInit = nextProps.init;
    const thisInit = this.props.init;
    if (this.state.ifInit) {
      return;
    }

    if (JSON.stringify(nextInit) !== JSON.stringify(thisInit)) {
      if (nextInit && nextInit.length !== 0) {
        this.updataList(nextInit);
      }
    }
  };

  shouldComponentUpdate = (nextProps = {}, nextState = {}) => {
    const thisProps = this.props || {},
      thisState = this.state || {};

    if (
      Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length
    ) {
      return true;
    }
    for (const key in nextProps) {
      if (
        thisProps[key] !== nextProps[key] ||
        !is(thisProps[key], nextProps[key])
      ) {
        return true;
      }
    }
    for (const key in nextState) {
      if (
        thisState[key] !== nextState[key] ||
        !is(thisState[key], nextState[key])
      ) {
        return true;
      }
    }
    return false;
  };

  //鍒锋柊
  updataList = arr => {
    const newArr = arr.filter(val => val.trim() !== "");
    if (newArr.length !== 0) {
      let fileList = [];
      newArr.map((val, key) => {
        key = key + 1;
        fileList.push({
          name: "鏂囦欢" + key,
          uid: key,
          url: val
        });
      });
      this.setState({ fileList, ifInit: true });
    }
  };

  handleChange = info => {
    let result = true;
    const { status } = info.file;

    const disabled = this.props.disabled ? this.props.disabled : false;
    if (disabled) {
      return;
    }

    //闄や簡绉婚櫎鐘舵€侊紝涓婁紶杩囩▼涓紝鍒ゆ柇鏄惁绗﹀悎涓婁紶瑙勫垯
    if (status !== "removed") {
      result = this.beforeUpload(info.file);
    }
    if (!result) {
      return;
    }

    let fileList = [...this.state.fileList];
    fileList = info.fileList;
    this.setState({ fileList });

    if (status !== "uploading") {
    }
    if (status === "done") {
      if (info.file.response.retType !== "0") {
        /// 鏈湴涓婁紶鎴愬姛锛屼絾鏈嶅姟鍣ㄨ繑鍥炰笂浼犻敊璇�
        this.state.fileList.map((item, index) => {
          if (item.uid === info.file.uid) {
            const removeErrFileList = [...this.state.fileList];
            removeErrFileList.splice(index, 1);
            this.setState({
              fileList: removeErrFileList
            });
            // this.state.fileList[index].status = "error";
          }
        });
        message.error(info.file.response.msg);
        return;
      }
      // this.props.result("done", info.file.response.data.filegroupid);
      message.success(`${info.file.name} 鏂囦欢涓婁紶鎴愬姛銆俙);

      if (this.props.onResult) {
        if (info.fileList.length === 0) {
          return;
        }
        const result = info.fileList.reduce((acc, elem) => {
          if (elem.response && elem.response.data) {
            acc.push(elem.response.data);
            return acc;
          }
          if (elem.url) {
            acc.push(elem.url);
            return acc;
          }
        }, []);
        this.props.onResult(result);
      }
    } else if (status === "error") {
      message.error(`${info.file.name} 鏂囦欢涓婁紶澶辫触銆俙);
    }
    if (info.file.status == "removed") {
      let result;
      //濡傛灉鍏ㄩ儴鍒犻櫎
      if (info.fileList.length === 0) {
        this.props.onResult([]);
        return;
      } else {
        //濡傛灉閮ㄥ垎鍒犻櫎
        result = info.fileList.reduce((acc, elem) => {
          if (elem.url) {
            acc.push(elem.url);
            return acc;
          }
        }, []);
      }
      this.props.onResult(result);
    }
  };

  beforeUpload = file => {
    /**
     * 鏍规嵁浼犺繘鏉ョ殑鏂囦欢绫诲瀷锛屽湪涓婁紶涔嬪墠鍏堝垽鏂�
     */
    if (this.props.type.length > 0) {
      let type = false;
      this.props.type.forEach(element => {
        if ((file.name + '').toLocaleLowerCase().indexOf(element) > -1) {
          type = true;
        }
      });
      if (!type) {
        this.setState({
          loading: false
        });
        message.error("璇蜂笂浼�" + this.props.type.toString() + "绫诲瀷鐨勬枃浠�!");
        return false;
      }
    }
    const size = this.props.size ? this.props.size : 8;
    const maxSize = file.size / 1024 / 1024 < size;
    if (!maxSize) {
      message.error(`鏂囦欢搴斿皬浜�${size}MB!`);
      return false;
    }
    return true;
  };

  render() {
    const { fileList } = this.state;
    const num = this.props.num ? this.props.num : 1;
    const uploadButton = (
      <div>
        <Button disabled={this.props.disabled||fileList.length >= num}>
          <Icon type="upload" /> 涓婁紶鏂囦欢
        </Button>
        <p>鏀寔鎵╁睍鍚嶏細{this.props.type.toString()}鐨勬枃浠�</p>
      </div>
    );
    // const num = this.props.num ? this.props.num : 1;
    // const disabled = this.props.disabled ? this.props.disabled : false;
    return (
      <div className="clearfix">
        <Upload
          action={uploadUrl}
          name="xfile"
          fileList={fileList}
          onChange={this.handleChange}
          // disabled={disabled}
          // beforeUpload={this.beforeUpload}
        >
          {uploadButton}
          {/* {fileList.length >= num ? null : uploadButton} */}
        </Upload>
      </div>
    );
  }
}

export default PUpLodadFile;