import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import { View, Image } from "@tarojs/components"
import indexImg from "@/assets/comm/index.png";
import indexActive from "@/assets/comm/indexActive.png";
import job from "@/assets/comm/job.png";
import jobActive from "@/assets/comm/jobActive.png";
import user from "@/assets/comm/user.png";
import userActive from "@/assets/comm/userActive.png";
import CustomNav from "@/components/CustomNav";
import {setAmap} from '@/services/amap'
import withLayout from '@/layouts'
import { useModel } from "@/store";
import Order from './components/Order'
import Job from './components/Job'
import User from "./components/User";
import "./index.less";

export default withLayout((props) => {
  const { router } = props
  let { tab } = router.params
  const { location,setLocation } = useModel('location')
  const [currentTab, setCurrentTab] = useState(0);
  const handleClick = (val) => {
    setCurrentTab(val);
  };
  useEffect(() => {  
    if(!location){
      Taro.getLocation({
        type:'gcj02',
        success:function(res){
          setLocation(res.longitude+','+res.latitude)
          setAmap({params:'location='+res.longitude+','+res.latitude,path: '/v3/geocode/regeo'})
        }})
    } else {
      setAmap({params:'location='+location,path: '/v3/geocode/regeo'})
    }
    if (tab) {      
      setCurrentTab(tab - 0)
    }
  }, [tab])
  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav home title={currentTab === 0 ? '首页' : currentTab === 1 ? '作业管理' : '我的'} />
      </View>
      <View className='index-container'>
        {currentTab === 0 && <Order />}
        {currentTab === 1 && <Job />}
        {currentTab === 2 && <User />}
      </View>
      <View className='index-tabbar'>
        <View
          className={['tabberItem', currentTab === 0 ? "activeTabber" : '']}
          onClick={() => handleClick(0)}
        >
          <Image className='tabberImg' src={currentTab === 0 ? indexActive : indexImg}></Image>
          <View className='text'>首页</View>
        </View>
        <View
          className={['tabberItem', currentTab === 1 ? "activeTabber" : '']}
          onClick={() => handleClick(1)}
        >
          <Image className='tabberImg' src={currentTab === 1 ? jobActive : job}></Image>
          <View className='text'>作业管理</View>
        </View>
        <View
          className={['tabberItem', currentTab === 2 ? "activeTabber" : '']}
          onClick={() => handleClick(2)}
        >
          <Image className='tabberImg' src={currentTab === 2 ? userActive : user}></Image>
          <View className='text'>个人中心</View>
        </View>
      </View>
    </View>
  );
});