import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index.scss'
export default class Popup extends Component {
  constructor (props) {
    super(props)
    this.state = {
      curObj: {},
      isPopupShow: false,
      countNum: 5,
    }
  }


  componentWillMount () {
    if (Taro.getStorageSync('APP_indexOpen') === 1) {
      this.setState({
        isPopupShow: false
      })
    } else {
      this.setState({
        isPopupShow: true
      }, () => {
        let { countNum } = this.state
        let timer = setInterval(() => {
          countNum--
          this.setState({
            countNum
          }, () => {
            if (countNum < 1) {
              clearInterval(timer)
              this.setState({
                isPopupShow: false
              }, () => {
                Taro.setStorageSync('APP_indexOpen', 1)
              })
            }
          })
        }, 1000)
      })
    }
    this.props.onRef(this)
  }

  getData = (curObj) => {
    this.setState({
      curObj
    })
  }

  openPopup () {
    this.setState({
      isPopupShow: true
    })
  }
  closePopup () {
    this.setState({
      isPopupShow: false
    }, () => {
      Taro.setStorageSync('APP_indexOpen', 1)
    })
  }

  moreHandle () {
    const { curObj } = this.state
    if (curObj.ad_link_type) {
      if (curObj.ad_link_type === 'estate') {
        Taro.navigateTo({
          url: `/pagesHouse/indexDtl?id=${curObj.link_type_value}`
        })
      }
      if (curObj.ad_link_type === 'news') {
        Taro.navigateTo({
          url: `/pagesMore/news/indexDtl?id=${curObj.link_type_value}`
        })
      }
    }
  }

  render () {
    const { isPopupShow, curObj, countNum } = this.state
    const bgClose = require('@img/icon_g_close2.png')
    return (
      <View className={isPopupShow && curObj.images ? 'l-modal-box' : 'l-modal-box hide'}>
        <View className='lmb-bg'></View>
        <View className='lmb-body'>
          <View className="scoped-box">
            <Image src={curObj.images} className="img" onClick={this.moreHandle.bind(this)} />
            <View className="count" onClick={this.closePopup.bind(this)}>
              <View className="bg"></View>
              <View className="t">跳过{countNum}</View>
            </View>
            <View className="tips">
              <View className="bg"></View>
              <View className="t">广告</View>
            </View>
            <Image src={bgClose} className="close" onClick={this.closePopup.bind(this)} />
          </View>
        </View>
      </View>
    )
  }
}