// @ts-nocheck
import * as React from 'react';
import { Props, State } from './type';
import * as Styled from './index.style'
import styled from 'styled-components'
import {rem} from '../style/function.style'

const InitBox = styled.div`
  height: ${rem(120)};
  line-height: ${rem(120)};
  text-align: center;
  margin-bottom:${props=>rem(props.marginBottom)};
`

export class BottomTab extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();


  // static getDerivedStateFromProps(props,state){
  //   if(!document.querySelector('.tab-blank')){
  //     if(props.bgc){
  //       let img = new Image()
  //       img.src = props.bgc ? props.bgc.url : '';
  //       img.onload =function(){
  //         const tabDOM = document.querySelector('.tab-wrapper');
  //         const heightNum = tabDOM.clientHeight;
  //         let blankDOM = document.createElement('div');
  //         blankDOM.style.cssText = `
  //           position:relative;
  //           height:${heightNum}px;
  //           width:100%;
  //         `
  //         blankDOM.classList.add('tab-blank')
  //         document.querySelector('.tab-container').appendChild(blankDOM)
  //       }
  //     }
  //   }
  // }

  private switchTab = (url,e) => {
    // e.stopPropagation();
    if(url)
      location.href = url
  }

  public render() {
    let { isEdit, style, tabs, marginBottom, bgc, marginTop, iconHeight} = this.props
    return <Styled.BottomTabContainer className="tab-container" style={{
      ...style,
      position:`${isEdit ? 'absolute' : 'fixed'}`
    }} marginBottom={marginBottom || 60} marginTop={!isNaN(marginTop) ? marginTop : 0}>
      {
        !bgc && isEdit && <InitBox marginBottom={marginBottom || 20}>
          {'在跳转配置中添加tab项前 请先选择背景图片撑开tab'}
        </InitBox>
      }
      {
        (bgc) && (
          <div className="tab-wrapper">
            { bgc && <img src={bgc.url} alt="" />}
            <div className="tab-items">
              {tabs && tabs?.map((item,index)=>{
                return <div key={index} className="tab-item" onClick={this.switchTab.bind(this,item.link)}>
                  <img
                    src={item.icon? item.icon.url : ''}
                    style = {{height: rem(iconHeight || 115)}}
                    alt="icon"
                    className="icon"
                  />
                  {item.text && <span className="icon-text">{item.text}</span>}
                </div>
              })}
            </div>
          </div>
        )
      }

    </Styled.BottomTabContainer>
  }
}