import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CtsUploadImageFileProps } from 'types/upload-image-file'

let error = `${Taro['common'].imgUrlTeam}error.png`
let pdf = `${Taro['common'].imgUrlTeam}pdf.png`

/**
 * 上传文件组件（格式带后缀）
 */
export default class CtsUploadImageFile extends CtsComponent<CtsUploadImageFileProps> {
  // static options = {
  //   addGlobalClass: true
  // }

  public static defaultProps: CtsUploadImageFileProps
  public static propTypes: InferProps<CtsUploadImageFileProps>

  public constructor(props: CtsUploadImageFileProps) {
    super(props)
    this.state = {}
  }

  // 选择文件/图片
  private chooseFile(): void {
    const { type } = this.props

    if (type.includes('image') && type.includes('file')) {
      // 上传图片，file文件
      this.uploadImageFile()
    } else {
      if (type.includes('image')) {
        // 选择图片，并上传
        this.chooseImg()
      } else if (type.includes('file')) {
        // 上传pdf文件
        this.uploadFile()
      }
    }

    // 上传图片，pdf文件
    // this.uploadImageFile()
  }

  // 选择图片，并上传
  private chooseImg(): void {
    let that = this
    const { list, max, size, isAlbum, isCamera, type, typeStr } = this.props

    // 选择图片的来源
    let sourceType: any[] = [...(isAlbum ? ['album'] : []), ...(isCamera ? ['camera'] : [])]
    // console.log('选择图片的来源', sourceType)

    // 最多可选择的图片张数
    let count: number = max - list.length

    Taro.chooseImage({
      sizeType: ['compressed'],
      sourceType,
      count,
      success(res) {
        console.log('chooseImage: ', res)

        let promises: any[] = []
        for (let item of res.tempFiles) {

          let typeSuffix = item.path.split('.')[item.path.split('.').length - 1]
          if (!typeStr.includes(typeSuffix)) {
            Taro.showToast({ title: `只能上传${typeStr}的文件`, icon: 'none' })
            continue
          }

          // 限制上传的文件大小
          if (item.size > size * 1024 * 1024) {
            Taro.showToast({ title: `文件不能大于${size}M`, icon: 'none' })
            continue
          }

          // 获取图片名字
          let nameArr = item.path.split(/\//);

          promises.push(that.getFileUrl(nameArr[nameArr.length - 1], typeSuffix, item.path))
        }
        console.log(promises, promises.length)
        Promise.all(promises).then(res2 => {
          console.log('图片列表', res2)
          that.props.onChange([...list, ...res2])
        }).catch(err => {
          console.error('获取文件信息失败', err)
        })
      }
    })
  }

  // 上传pdf文件
  private uploadFile() {
    let that = this
    const { list, max, size, type, typeStr } = this.props

    // 最多可选择的图片张数
    let count: number = max - list.length

    Taro.chooseMessageFile({
      count,
      type: 'file',
      success(res) {
        console.log('chooseMessageFile: ', res)

        let promises: any[] = []
        for (let item of res.tempFiles) {

          let typeSuffix = item.path.split('.')[item.path.split('.').length - 1]
          if (!typeStr.includes(typeSuffix)) {
            Taro.showToast({ title: `只能上传${typeStr}的文件`, icon: 'none' })
            continue
          }

          // 限制上传的文件大小
          if (item.size > size * 1024 * 1024) {
            Taro.showToast({ title: `文件不能大于${size}M`, icon: 'none' })
            continue
          }

          promises.push(that.getFileUrl(item.name, typeSuffix, item.path))
        }
        console.log(promises, promises.length)
        Promise.all(promises).then(res2 => {
          console.log('文件列表', res2)
          that.props.onChange([...list, ...res2])
        }).catch(err => {
          console.error('获取文件信息失败', err)
        })
      },
      fail(err) {
        console.log(err)
      }
    })
  }

  // 上传图片，pdf文件
  private uploadImageFile() {
    let that = this
    const { list, max, size, type, typeStr } = this.props

    // 最多可选择的图片张数
    let count: number = max - list.length

    Taro.chooseMessageFile({
      count,
      type: 'all',
      success(res) {
        console.log('chooseMessageFile: ', res)

        let promises: any[] = []
        for (let item of res.tempFiles) {

          let typeSuffix = item.path.split('.')[item.path.split('.').length - 1]
          if (!typeStr.includes(typeSuffix)) {
            Taro.showToast({ title: `只能上传${typeStr}的文件`, icon: 'none' })
            continue
          }

          // if (type.includes('image') && item.type === 'image') {
          // 限制上传的文件大小
          if (item.size > size * 1024 * 1024) {
            Taro.showToast({ title: `文件不能大于${size}M`, icon: 'none' })
            continue
          }
          // }

          if (type.includes('file') && item.type === 'file') { }

          promises.push(that.getFileUrl(item.name, typeSuffix, item.path))
        }
        console.log(promises, promises.length)
        Promise.all(promises).then(res2 => {
          console.log('文件列表', res2)
          that.props.onChange([...list, ...res2])
        }).catch(err => {
          console.error('获取文件信息失败', err)
        })
      },
      fail(err) {
        console.log(err)
      }
    })
  }

  // 上传文件，并获取远程路径
  private getFileUrl(name, suffix, file: string): any {
    const { bizCode } = this.props
    return new Promise((resolve, reject) => {
      const params = { file, sysCode: 'ggb', bizCode }
      Taro['common'].uploadFile(params).then(res => {
        console.log('远程图片路径：', res.data)
        resolve({ name, suffix, url: res.data })
      })
    })
  }

  // 删除文件
  private deleteFile(index: number): void {
    let { list } = this.props
    list.splice(index, 1)
    this.props.onChange(list)
  }

  render() {
    let { className, list, max, isDetail } = this.props

    return (
      <View className={classNames('cts-upload-file', className)}>
        {
          list.map((item, index) => {
            return <View className='upload-img-item' key={String(index)}>
              {
                !isDetail &&
                <Image className='delete' src={error} mode="widthFix" onClick={this.deleteFile.bind(this, index)}></Image>
              }

              <Image className='img' src={/jpg|jpeg|png|dif/.test(item.suffix) ? item.url : pdf} mode="scaleToFill" onClick={() => { /jpg|jpeg|png|dif/.test(item.suffix) ? Taro['common'].previewImage(item.url, list.map(v => v.url)) : Taro['common'].previewFile(item.url) }}></Image>
            </View>
          })
        }
        {
          !isDetail && list.length < max &&
          <View className='upload-img-item' onClick={this.chooseFile.bind(this)}>
            <View className='iconfont iconRectangle'></View>
            <View className='item-text'>添加</View>
          </View>
        }
      </View>
    )
  }
}

CtsUploadImageFile.defaultProps = {
  list: [],
  max: 1,
  size: 2,
  isAlbum: true,
  isCamera: true,
  bizCode: '',
  isDetail: false,
  // type: 'image',
  type: ['image'],
  typeStr: 'jpg,jpeg,png',
  onChange() { }
}

CtsUploadImageFile.propTypes = {
  list: PropTypes.array,
  max: PropTypes.number,
  size: PropTypes.number,
  isAlbum: PropTypes.bool,
  isCamera: PropTypes.bool,
  bizCode: PropTypes.string,
  isDetail: PropTypes.bool,
  // type: PropTypes.oneOf(['image', 'pdf', 'docx']),
  type: PropTypes.array,
  typeStr: PropTypes.string,
  onChange: PropTypes.func
}