import { Component } from 'react'
import Taro from '@tarojs/taro'
import { connect } from 'react-redux'
import { Image, View, Text } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import "taro-ui/dist/style/components/flex.scss";
import "taro-ui/dist/style/components/button.scss" // 按需引入
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'

import logoImg from '../../assets/logo.png'

interface IndexState {
}

class Index extends Component<{}, IndexState> {
  constructor(props: any) {
    super(props)
  }

  onIncrement(){
    const { dispatch }:any = this.props
    dispatch({
      type:'apps/increment'
    })
  }

  onDecrement(){
    const { dispatch }:any = this.props
    dispatch({
      type:'apps/decrement'
    })
  }

  render () {
    const { apps }:any = this.props;
    return (
      <View className='page page-index'>
        <View className='logo'>
          <Image src={logoImg} className='img' mode='widthFix' />
        </View>
        <View className='page-content'>
          <View>count:{apps.count}</View>
          <View className='at-row'>
            <View className='at-col at-col__offset-2 at-col-3'>
              <AtButton type='primary' size='small' onClick={this.onIncrement.bind(this)}>增加</AtButton>
            </View>
            <View className='at-col at-col__offset-2 at-col-3'>
              <AtButton type='primary' size='small' onClick={this.onDecrement.bind(this)}>减少</AtButton>
            </View>
          </View>
        </View>
      </View>
    )
  }
}


export default connect(({ apps }: any) => ({
  apps,
}))(Index);