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

import ListMore from '@/c/pageDataList/listMore'
import './coupon.scss'
import { arrToObj } from '@utils'

class Index extends Component {

  constructor (props) {
    super(props)
    this.state = {          
      page_size: 10,
      page: 1,
      isListEnd: false,
      isListLoading: false,
      isListEmpty: false,
      dataList: [],
      isRuleShow: false,
      curObj: {},
    }
  }

  config = {
    navigationBarTitleText: '我的优惠券',
  }

  componentWillMount () {
    this.getDataList()
  }

  componentDidShow () { }

  componentDidHide () { }

  getDataList () {
    let { page_size, page, dataList, isListEmpty } = this.state
    Taro.api.other.apiactivitycouponlist({
      page,
      page_size,
    }).then(res => {
      const curData = res.list || []
      let isListEnd = false
      if (curData.length > 0) {
        if (page === 1) {
          dataList = curData
        } else {
          dataList = dataList.concat(curData)
        }
        if (curData.length === page_size && res.total !== curData.length) {
          isListEnd = false
        } else {
          isListEnd = true
        }
      }
      if (curData.length === 0 && page === 1) {
        isListEmpty = true
        dataList = []
      } else {
        isListEmpty = false
      }
      this.setState({
        dataList,
        isListEnd,
        isListEmpty,
        isListLoading: false
      })
    })
  }
  onScrollToLower (e) {
    let { isListEnd, isListLoading, page } = this.state
    if (!isListEnd && !isListLoading) {
      page++
      this.setState({
        page,
        isListLoading: true
      }, () => {
        this.getDataList()
      })
    }
  }

  renderList () {
    const dictData = Taro.getStorageSync('dictData')
    const userInfo = Taro.getStorageSync('APP_userInfo')
    const bsObj = arrToObj(dictData.buying_status)
    const { dataList, isListEnd, isListLoading, isListEmpty } = this.state
    const bg1 = require('./coupon/bg1.png')
    const bg2 = require('./coupon/bg2.png')
    const bg3 = require('./coupon/bg3.png')
    const bg4 = require('./coupon/bg4.png')
    const itemList = dataList.map((item, index) => {
      return (
        <View className="sc-item" key={index} onClick={this.openRulePopup.bind(this, item)}>
          {
            item.status === 3
            &&
            <Image src={bg1} className="sc-bg" />
          }
          {
            item.status === 4
            &&
            <Image src={bg2} className="sc-bg" />
          }
          {
            item.status === 5
            &&
            <Image src={bg3} className="sc-bg" />
          }
          {
            item.status === 6
            &&
            <Image src={bg4} className="sc-bg" />
          }
          <View className="sc-wrap">
            <View className={'sc-p1 t' + item.status}>{item.estate_name}</View>
            <View className={'sc-p2 t' + item.status}>{item.rule}</View>
            <View className="sc-p3">优惠码：{userInfo.phone}-{item.hash}</View>
            <View className="sc-p4">{item.end_at}</View>
          </View>
        </View>
      )
    })
    return (
      <ScrollView
        className='l-scroll-view'
        scrollY
        scrollWithAnimation
        scrollTop="0"
        lowerThreshold="30"
        onScrollToLower={this.onScrollToLower.bind(this)}
      >
        <View className="scoped-coupon">
          {itemList}
        </View>
        <ListMore isListEnd={isListEnd} isListLoading={isListLoading} isListEmpty={isListEmpty} />
      </ScrollView>
    )
  }


  renderRule () {
    const { isRuleShow, curObj } = this.state
    return (
      <View className={isRuleShow ? 'l-modal-box' : 'l-modal-box hide'}>
        <View className='lmb-bg'></View>
        <View className='lmb-body'>
          <View className="scoped-rule">
            <Image src={curObj.rule_img} className="bg" />
            <View className="ops">
              <View className="op t2" onClick={this.closeRulePopup.bind(this)}>关闭</View>
              <View className="op" onClick={this.linkHouseDtl.bind(this)}>楼盘详情</View>
            </View>
          </View>
        </View>
      </View>
    )
  }

  linkHouseDtl () {
    const { curObj } = this.state
    Taro.navigateTo({
      url: `/pagesHouse/indexDtl?id=${curObj.estate_id}`
    })
  }

  openRulePopup (item) {
    this.setState({
      curObj: item,
      isRuleShow: true
    })
  }
  closeRulePopup () {
    this.setState({
      isRuleShow: false
    })
  }

  render () {
    return (
      <View className="l-box">
        {this.renderList()}
        {this.renderRule()}
      </View>
    )
  }
}

export default Index
