import { Renderer, RendererProps } from '../../../../factory';
import { BaseSchema } from '../../../../Schema';
import Tooltip from 'antd/lib/Tooltip';
import React from 'react';
import './LionCellFile.css';
// import LionFilePreview from './LionFilePreview';
import { ModalPrint } from '../../LabelPrint';
import { getLodop } from '../../../../utils/print/LodopFuncs'
import { isImg, getMediaIcon, downloadFile } from '../../utils/utils'

import { WrapperFileView } from './style'


interface IState {
  current: any;
  visible: boolean;
  _print_visible: boolean;
  ctx: {
    items: Array<any>;
    rows: Array<any>;
    selectedItems: Array<any>;
    unSelectedItems: Array<any>;
    ids: string;
    primaryField?: string;
    [key: string]: any;
  }
}

export interface LionCellFileSchema extends BaseSchema {
  type: 'lion-cell-file';
  title: string;
}

export interface LionCellFileProps extends RendererProps, Omit<LionCellFileSchema, 'type' | 'className'> { }


export class LionCellFile extends React.Component<LionCellFileProps, IState> {

  state = {
    visible: false,
    current: null as any,
    _print_visible: false,
    ctx: {
      items: [],
      rows: [],
      selectedItems: [],
      unSelectedItems: [],
      ids: ''
    }
  }

  constructor(props: LionCellFileProps) {
    super(props)

    this.handlePreview = this.handlePreview.bind(this)
  }

  handleOpenPdf = (current: any) => {

    this.setState({
      visible: true,
      current: current
    });
  }

  componentDidMount() {
    this.setState({
      ctx: {
        ...this.state.ctx,
        ids: this.props.ids || '',
        primaryField: this.props.primaryField || ''
      }
    })
  }

  matchPdfImg = (str: string) => {
    return /(.jpe?)g|(.png)|(.pdf)/i.test(str)
  }

  handleLabelPrint = (current: any) => {
    if (!this.matchPdfImg(current?.name)) {
      return;
    }
    this.setState({
      ctx: {
        ...this.state.ctx,
        items: [current],
        rows: [current],
        selectedItems: [current],
        unSelectedItems: []
      }
    }, () => {
      const LODOP = getLodop()
      if (LODOP) {
        this.setState({
          _print_visible: true
        })
      }
    });
  }

  handlePreview(info: Array<object>, index: number) {
    const { onImageEnlarge, env } = this.props
    const baseURL = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi || ''
    // const baseURL = 'https://saasdev.fastlion.cn/saas'
    let isNotImg = false
    let list = info.map((item: any) => {
      isNotImg = !isImg(item.name)
      return {
        src: isNotImg ? getMediaIcon(item.name) : baseURL + (item.thumbnailAddr || item?.addr),
        originalSrc: baseURL + item.preview,
        downloadSrc: baseURL + item?.addr,
        title: item.name || '',
        isNotImg
      }
    })
    onImageEnlarge && onImageEnlarge({
      src: list[index].src,
      originalSrc: list[index].originalSrc,
      index,
      list
    })
  }

  render() {
    const { data, name, env } = this.props;

    let data_detail = data[name as string];
    const { visible, current } = this.state;
    const baseUrl = env?.axiosInstance?.defaults?.baseURL || env?.ajaxApi;
    // const baseUrl = 'https://saasdev.fastlion.cn/saas'

    const that = this;
    return (
      <>
        <div className="Papers-cell-view" style={{ display: 'flex', cursor: 'pointer', alignItems: 'center' }}>
          <Tooltip
            placement="bottom"
            overlayInnerStyle={{
              background: '#fff',
              width: '298px',
              zIndex: 9000,
              borderRadius: '4px',
              border: '1px solid #ebeef5',
              lineHeight: '1.4',
              textAlign: 'justify',
              fontSize: '14px',
              wordBreak: "break-all",
              boxShadow: '0 2px 12px 0 rgb(0 0 0 / 10%)',
              padding: '3px 4px'
            }}
            zIndex={9000}
            title={
              data_detail && data_detail.info && data_detail.info?.length > 0 ? <div className="Papers-cell-list" style={{ width: "290px", background: '#fff', color: '#333' }}>
                {
                  data_detail.info.map((item: any, idx: number) => {
                    return <WrapperFileView className="Papers-cell-list-item" key={item.name}>
                      <Tooltip
                        placement={idx === data_detail.info.length - 1 ? 'bottom' : 'top'}
                        title={item.name}
                        arrowPointAtCenter={true}
                        overlayInnerStyle={{
                          zIndex: 9999
                        }}
                        zIndex={9999}
                      >
                        <span className="Papers-cell-list-item-tooltip" style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center',
                          whiteSpace: 'nowrap',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                        }}>
                          <span className="fa fa-link" style={{
                            fontSize: '13px'
                          }} ></span>
                          &nbsp;&nbsp;

                          <span style={{
                            width: '160px',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            fontSize: '12px'
                          }}>

                            {item.name}
                          </span>
                        </span>
                      </Tooltip>
                      {/* 删除按钮，后端现在暂不支持 */}
                      {/* <Tooltip overlayInnerStyle={{ zIndex: 9999 }} zIndex={9999} placement='top' title='删除'>
                        <span style={{ border: 0, cursor: 'pointer' }} ><DeleteOutlined style={{ fontSize: '13px' }} /></span>
                      </Tooltip> */}
                      <Tooltip overlayInnerStyle={{ zIndex: 9999 }} zIndex={9999} placement='top' title='下载'>
                        <span onClick={() => { downloadFile((baseUrl ? baseUrl : '') + item.addr, item.name) }} style={{ border: 0, cursor: 'pointer' }}><span className="fa fa-download" style={{ fontSize: '13px' }} ></span></span>
                      </Tooltip>
                      <Tooltip overlayInnerStyle={{ zIndex: 9999 }} zIndex={9999} placement='top' title='打开'>
                        {/* <span onClick={() => { this.handleOpenPdf(item) }} style={{ border: 0, cursor: 'pointer', marginRight: '5px' }}><span className="fa fa-folder-open-o" style={{ fontSize: '13px' }} ></span></span> */}
                        <span onClick={() => { this.handlePreview(data_detail.info, idx) }} style={{ border: 0, cursor: 'pointer', marginRight: '5px' }}><span className="fa fa-folder-open-o" style={{ fontSize: '13px' }} ></span></span>
                      </Tooltip>
                      <Tooltip overlayInnerStyle={{ zIndex: 9999 }} zIndex={9999} placement='top' title='打印'>
                        <span onClick={() => { this.handleLabelPrint(item) }} style={{ border: 0, marginRight: '5px', cursor: this.matchPdfImg(item?.name) ? 'pointer' : 'not-allowed', color: this.matchPdfImg(item?.name) ? 'inherit' : '#999' }}><span className="fa fa-print" style={{ fontSize: '13px' }} ></span></span>
                      </Tooltip>
                    </WrapperFileView>
                  })
                }
              </div> : null
            }
          >
            <Tooltip
              overlayInnerStyle={{
                background: '#303133',
                width: '278px',
                height: 'auto',
                padding: '5px 8px',
                zIndex: 9000
              }}
              zIndex={9000}
              title={
                data_detail && data_detail.info && data_detail.info.length > 1 ? <div style={{ background: '#303133', display: 'flex', height: "auto", alignItems: 'center' }}
                >
                  <span style={{
                    color: '#fff'
                  }}>
                    <span style={{
                      color: "#999",
                      width: '50px'
                    }}>附件：</span>
                    {data_detail ? <span className="fa fa-link" style={{
                      fontSize: '12px'
                    }} ></span> : null}
                    {data_detail ? data_detail?.info?.length : null}
                    &nbsp;&nbsp;
                    {
                      data_detail && data_detail.info ?
                        data_detail.info[0].name : null
                    }
                  </span>

                </div>
                  : null
              }
              placement="top"
              mouseEnterDelay={0.5}
            >
              <span
                style={{
                  display: 'flex',
                  cursor: data_detail ? 'pointer' : 'text',
                  alignItems: 'center'
                }}>
                {/* <span
                  style={{
                    color: "#999",
                    width: '50px'
                  }}
                >
                  附件：
                            </span> */}
                <span style={{
                  display: 'flex',
                  alignItems: 'center'
                }}>
                  {data_detail ? <span className="fa fa-link" style={{
                    fontSize: '12px'
                  }} ></span> : null}
                  {data_detail && data_detail.info && data_detail.info?.length > 0 ? data_detail?.info?.length : null}
                  &nbsp;&nbsp;
                  <span style={{
                    whiteSpace: 'nowrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    width: '200px'
                  }}>
                    {
                      data_detail && data_detail.info && data_detail.info?.length > 0 ?
                        data_detail.info[0].name : '暂无附件'
                    }
                  </span>
                  {data_detail && data_detail.info ? (data_detail.info.length > 1 ? <span className="fa fa-angle-down" style={{
                    marginLeft: '10px',
                    fontWeight: 400,
                    fontSize: '12px',
                    color: "#999"

                  }} ></span> : null) : null}
                </span>

              </span>
            </Tooltip>
          </Tooltip>
          {/* <Button onClick={() => { return false }} style={{
            display: "inline-block",
            color: '#3582fb',
            border: 0
          }}>上传</Button> */}
        </div>

        {/* <LionFilePreview {...this.props} visible={visible} current={current} setVisible={() => {
          that.setState({
            visible: false
          })
        }} /> */}
        {this.state._print_visible && <ModalPrint type="lion-print" {...this.props as any} isFilePrint={true} isSingleFilePrint={true} ctx={this.state.ctx as any} show={this.state._print_visible} onHide={() => { this.setState({ _print_visible: false }) }}></ModalPrint>}
      </>
    )
  }
}

@Renderer({
  type: 'lion-cell-file'
})
export class LionCellFileRenderer extends LionCellFile { }