import React, { useCallback, useEffect, useState } from 'react';
import {
  getUserLoginCountStatics,
  getWantedPositionStaticsCount,
  getUserStaticsByArea,
  getPercentOfResumeCompletionRate,
} from '@/services/analysis/user';
import KeywordChart from './components/KeywordChart';
import { getDictDataList } from '@/services/system/dictdata';
import AreaStatics from './components/AreaStatics';
import WantedPositionStatics from './components/WantedPositionStatics';

export default function userAnalysis() {
  const [data, setData] = useState([]);

  const [PofrcRate, setPofrcRate] = useState([]);
  const [areaDict, setAreaDict] = useState([]);

  useEffect(() => {
    // loginCounts();
    dictDataList();
    percentOfResumeCompletionRate();
  }, []);

  const loginCounts = useCallback(async () => {
    let resData = await getUserLoginCountStatics();
    console.log(resData);
  }, []);

  const dictDataList = useCallback(async () => {
    let resData = await getDictDataList({ dictType: 'area' });
    if (resData.code === 200) {
      setAreaDict(resData.rows);
    }
  }, []);

  const percentOfResumeCompletionRate = useCallback(async () => {
    let resData = await getPercentOfResumeCompletionRate();
    if (resData.code === 200) {
      console.log(resData.data);
      setPofrcRate(resData.data);
    }
  }, []);

  return (
    <div style={{ padding: '16px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
        <div style={{ width: '100%' }}>
          <KeywordChart />
        </div>
        <div style={{ width: '100%' }}>
          <WantedPositionStatics />
        </div>
      </div>
      <div style={{ width: '100%' }}>
        <AreaStatics data={areaDict} />
      </div>
    </div>
  );
}