import { Component } from 'react'
import Taro from '@tarojs/taro'
import { connect } from 'react-redux'
import {View} from '@tarojs/components'
import { AtButton } from 'taro-ui'

import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/loading.scss";

import { add, minus, asyncAdd } from '../../actions/counter'

import './index.less'


@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class Index extends Component {
  constructor(props) {
    super(props);
    this.state={
      list:[
        {
          icon:'bell',
          title:'打卡',
          color:'#89ec6d',
          buttons:[
            {
              name:'上班'
            },
            {
              name:'下班'
            }
          ]
        },
        {
          icon:'map-pin',
          title:'定位轨迹',
          color:'#3f8ae5',
          buttons:[
            {
              name:'我的路线'
            },
            {
              name:'员工分布',
              url:'/pages/staffDistribution/index'
            }
          ]
        },
        {
          icon:'calendar',
          title:'日报',
          color:'#3f8ae5',
          buttons:[
            {
              name:'添加日报'
            },
          ]
        },
        {
          icon:'shopping-bag',
          title:'出差',
          color:'#89ec6d',
          buttons:[
            {
              name:'填写出差单',
              url:'/pages/outdoorActivities/index'
            },
          ]
        },
        {
          icon:'camera',
          title:'拍照上传',
          color:'#3f8ae5',
          buttons:[
            {
              name:'添加拍照'
            },
          ]
        },
        {
          icon:'credit-card',
          title:'费用申请',
          color:'#b19c42',
          buttons:[
            {
              name:'填写申请单'
            },
          ]
        },
      ]
    }
  }

  componentDidShow () {
    let token = Taro.getStorageSync('token');
    if(!token){
      Taro.navigateTo({
        url: '/pages/login/index',
      })
    }
  }

  componentDidMount() {

  }

  render () {
    return (
      <View className='list'>
        {
          this.state.list.map((value,key)=>(
            <View key={key} className='item'>
              <View className='left' style={{background:value.color}}>
                <View className={'at-icon at-icon-'+value.icon} style={{color:'#FFF'}}/>
                <View className='title'>{value.title}</View>
              </View>
              <View className='right'>
                {
                  value.buttons.map((v,k)=>(
                    <AtButton
                      key={k}
                      type='secondary'
                      size='small'
                      className='button'
                      onClick={()=>{
                        Taro.navigateTo({
                          url: v.url,
                        })
                      }}
                      >
                      {v.name}
                    </AtButton>
                  ))
                }
              </View>
            </View>
          ))
        }
      </View>
    )
  }
}

export default Index

