/*
 * @Author: zhangleyuan
 * @Date: 2021-02-20 16:13:39
 * @LastEditors: fusanqiasng
 * @LastEditTime: 2021-05-23 23:59:43
 * @Description: 描述一下
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { useEffect, useState } from 'react'
import PlanFilter from './components/PlanFilter'
import PlanOpt from './components/PlanOpt'
import PlanList from './components/PlanList'
import PlanService from '@/domains/plan-domain/planService'
import User from '@/common/js/user'
function PlanPage() {
  const [planListData, setPlanListData] = useState([])
  const [query, setQuery] = useState({
    current: 1,
    size: 10
  })
  useEffect(() => {
    function handleFetchPlanList(_query) {
      const params = {
        ...query,
        ..._query,
        storeUserId: User.getStoreUserId()
      }
      //动态获取计划列表
      PlanService.getTrainingPlanPage(params).then((res) => {
        const {
          result: { records = [], total }
        } = res
        setPlanListData(records)
        setTotalCount(total)
      })
    }
    handleFetchPlanList()
  }, [query])
  const [totalCount, setTotalCount] = useState(0)
  function queryChange(_query) {
    const params = {
      ...query,
      ..._query
    }
    setQuery(params)
  }

  return (
    <div className='page'>
      <div className='content-header'>培训计划</div>
      <div className='box'>
        <PlanFilter onChange={queryChange} />
        <PlanOpt />
        <PlanList planListData={planListData} query={query} totalCount={totalCount} onChange={queryChange} />
      </div>
    </div>
  )
}
export default PlanPage
