var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React, { forwardRef } from 'react';

var Photos = forwardRef(function (_ref, ref) {
  var type = _ref.type,
      list = _ref.list,
      upload = _ref.upload,
      uploading = _ref.uploading,
      onChoose = _ref.onChoose,
      onDelete = _ref.onDelete,
      onClick = _ref.onClick,
      others = _objectWithoutProperties(_ref, ['type', 'list', 'upload', 'uploading', 'onChoose', 'onDelete', 'onClick']);

  // 点击整个photos容器
  function click(event) {
    var e = event.nativeEvent;
    var target = e.target;
    e.targetType = type;
    if (target.type === 'file') {
      target.value = ''; // 防止选择重复图片时不触发
    }
    if (target.classList.contains('photos-upload')) {
      // 点击添加
      if (onChoose) onChoose(e);
    } else if (target.classList.contains('photos-item')) {
      // 点击照片
      var index = target.getAttribute('data-index');
      if (index && onClick) onClick(e, list[index], Number(index));
    } else if (target.classList.contains('photos-delete')) {
      // 点击删除
      var _index = target.parentNode.getAttribute('data-index');
      if (_index && onDelete) onDelete(e, list[_index], Number(_index));
    }
  }
  // file框选择
  function fileChange(event) {
    var e = event.nativeEvent;
    if (onChoose) onChoose(e);
    e.stopPropagation();
  }
  // 图片加载完成
  function load(e) {
    var target = e.target;
    target.parentNode.setAttribute('data-complete', '1');
  }
  // 图片加载失败
  function error(e) {
    var target = e.target;
    target.parentNode.setAttribute('data-complete', '0');
  }

  return React.createElement(
    'div',
    _extends({
      ref: ref
    }, others, {
      className: 'photos' + (others.className ? ' ' + others.className : ''),
      onClick: click
    }),
    list && list.length > 0 && list.map(function (item, index) {
      return React.createElement(
        'div',
        {
          key: index,
          'data-index': index,
          className: 'photos-item' + (item.className ? ' ' + item.className : ''),
          style: Object.assign({ backgroundImage: 'url(' + item.thumb + ')' }, item.style || {})
        },
        React.createElement('img', { className: 'photos-item-img', src: item.thumb, alt: '', onLoad: load, onError: error }),
        React.createElement('div', { className: 'photos-item-error' }),
        React.createElement('div', { className: 'photos-item-load' }),
        type === 'video' && React.createElement(
          'div',
          { className: 'photos-item-video' },
          React.createElement('div', { className: 'photos-item-video-icon' })
        ),
        onDelete && React.createElement(
          'div',
          { className: 'photos-delete' },
          React.createElement('div', { className: 'photos-delete-icon' })
        ),
        item.children
      );
    }),
    onChoose && React.createElement(
      'div',
      { className: 'photos-item photos-upload' },
      React.createElement('div', { className: 'photos-upload-icon' + (type === 'video' ? ' video' : '') }),
      type !== 'video' && !navigator.userAgent.toLowerCase().match(/applewebkit.*mobile.*/) && React.createElement('input', { type: 'file', name: 'uploadPic', onChange: fileChange, accept: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp' }),
      upload && upload,
      type !== 'video' && uploading && React.createElement(
        'div',
        { className: 'photos-upload-loading' },
        React.createElement('div', { className: 'photos-upload-loading-icon' })
      ),
      type === 'video' && uploading && React.createElement(
        'div',
        { className: 'photos-upload-loading' },
        React.createElement('div', { className: 'photos-upload-loading-icon' })
      )
    )
  );
});

export default Photos;