import Taro, { Component } from '@tarojs/taro';
import './index.scss'

import { connect } from '@tarojs/redux'
import * as actions from '@actions/shop'
import WxParse from '@components/wxParse/wxParse'

import { getThumbnail } from '@utils/tools'

let hasClick = true
@connect(state => state.shop, { ...actions })
export default class Index extends Component {
  config = {
    navigationBarTitleText: '商品详情'
  }

  state = {
    goodsId: null,
    visibleExcBtn: true,
  }

  componentWillMount () {
    const { id, from } = this.$router.params
    this.setState({
      goodsId: id,
      visibleExcBtn: from === 'record' ? false : true
    }, this.loadDetail)
  }

  loadDetail () {
    const { goodsId } = this.state
    Taro.showLoading()
    this.props.dispatchGoodsDetail(goodsId).then(res => {
      // App.zhuge.track('进入商品详情页面', {
      //   '商品id': res.goodsId,
      //   '商品名称': res.goodsName
      // })

      WxParse.wxParse('article', 'html', res.goodsDescription || '<p></p>', this.$scope, 0)
      Taro.hideLoading()
    })
  }

  onExchange () {
    const { goodsId } = this.state
    const { goodsDetail: { goodsName } } = this.props
    if (!hasClick) return
    hasClick = false

    this.props.dispatchGoodsExchange(goodsId).then(res => {
      hasClick = true
      Taro.showToast({ title: '兑换成功' })
      // App.zhuge.track('兑换商品', {
      //   '商品id': goodsId,
      //   '商品名称': goodsName
      // })
    }).catch(err => {
      hasClick = true
    })
  }

  render () {
    const { goodsDetail } = this.props
    return (
      <View className="page">
        <ScrollView
          scrollY
          scroll-with-animation
          enable-back-to-top
          className="detail"
          style={{
            height: '100vh',
            paddingBottom: `${this.state.visibleExcBtn ? '100rpx' : ''}`
          }}>
          <View className="detail__head">
            <Image src={getThumbnail(goodsDetail.detailImgUrl || goodsDetail.imgUrl)} mode="widthFix" className="detail__head-pic"></Image>
            <Image src={require('@assets/shop/hot.png')} className="detail__head-hot" />
          </View>

          <View className="detail__intro">
            <View className="detail__title">
              <Text className="detail__title-bold">{goodsDetail.goodsName}</Text>

            </View>
            <View className="detail__int">
              {/* <Text>所需积分</Text> */}
              <Text className="num">{goodsDetail.pointPrice}积分</Text>
              <Text className="detail__title-surplus">
                <Text>剩余数量</Text>
                <Text className="num">{goodsDetail.inventory}</Text>
              </Text>
            </View>
          </View>

          <View className="pro__detail">
            <View className="pro__detail-title">
              <View className='txt'>产品详情</View>
            </View>
            <View className="pro__detail-con">
              <import src='../../../components/wxParse/wxParse.wxml' />
              <template is='wxParse' data='{{wxParseData:article.nodes}}' />
            </View>
          </View>

          {/* <View className="pro__detail">
            <View className="pro__detail-title">注意事项</View>
            <View className="pro__detail-con">
              <Image className="pro__detail-img" mode="widthFix" src={require('@assets/shop/pic3.jpg')} />
            </View>
          </View> */}

          <View className="disclaimer">
            免责申明：本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任
          </View>
        </ScrollView>
        {visibleExcBtn && (<Button className="exc__btn" onClick={this.onExchange}>立即兑换</Button>)}
      </View>
    );
  }
}