import React, { Component } from 'react'
import { connect } from 'react-redux'
import {View} from '@tarojs/components'
import { AtSteps,AtTabs, AtTabsPane } from 'taro-ui'

import 'taro-ui/dist/style/components/steps.scss';
import 'taro-ui/dist/style/components/icon.scss';
import 'taro-ui/dist/style/components/tabs.scss';

import UserFloatingLayer from '../../components/common/userFloatingLayer';

import { add, minus, asyncAdd } from '../../actions/counter';
import Enterprise from './enterprise';
import PublicContent from './publicContent';
import Result from './result';

import './index.less'
import Taro from '@tarojs/taro';
import MessageNoticebar from "../../components/common/messageNoticebar";

const items = [
  { 'title': '选择公出企业' },
  { 'title': '填写公出内容'},
  { 'title': '提交公出审核' }
]

@connect(({ counter }) => ({
  counter
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
class ApplyDepart extends Component {
  constructor(props) {
    super(props);
    this.state={
      current:0,
      enterpriseInfor:{},
      selectArrderLocation:{},
      resultState:0
    }
  }

  componentDidShow () {
    Taro.eventCenter.on('enterprise', (arg) => {
      this.setState({
        current:1,
        enterpriseInfor:arg
      })
    })
    Taro.eventCenter.on('publicContent', (arg) => {
      this.setState({
        current:2,
        resultState:arg
      })
    })
    Taro.eventCenter.on('enterpriseBack', () => {
      this.setState({
        current:0,
      })
    })
    Taro.eventCenter.on('result', () => {
      this.setState({
        current:0,
        enterpriseInfor:{},
        selectArrderLocation:{},
        resultState:0
      })
    })
    //获取地区选定数据
    const chooseLocation = requirePlugin('chooseLocation');
    const location = chooseLocation.getLocation();
    if(location){
      this.setState({
        selectArrderLocation: location
      })
    }
  }

  componentDidMount() {

  }

  render () {
    return (
      <View className='applyDepart'>
        <MessageNoticebar/>
        <UserFloatingLayer/>
        <View className='atStepsContent'>
          <AtSteps
            items={items}
            current={this.state.current}
          />
          <View className='content'>
            <View style={{display:this.state.current===0 ? 'block' : 'none'}}>
              <Enterprise/>
            </View>
            <View style={{display:this.state.current===1 ? 'block' : 'none'}}>
              <PublicContent enterpriseInfor={this.state.enterpriseInfor} selectArrderLocation={this.state.selectArrderLocation}/>
            </View>
            <View style={{display:this.state.current===2 ? 'block' : 'none'}}>
              <Result resultState={this.state.resultState}/>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default ApplyDepart

