online/src/case/BillApp/src/components/HomePage/HomePage.jsx

import React, { Component } from 'react';

import Lists from './List'
import Buttons from './Button'
import IconList from './IconList'

import {graphqls} from '../../api/graphql_request'
import {BILL_BY_PROPS} from '../../api/graphql/bills'
import {getMonDayAndSunDay} from '../../untils/date'





import './HomePage.css'
//console.log(new Date().toLocaleString('chinese', { hour12: false }).slice(0,10))
class HomePage  extends Component{

    constructor(props){
        super(props)
        const month =new Date().getMonth()+1
        const year=new Date().getFullYear()
        this.state={
            month,
            year,
            weekBottom:'',
            weekTop:'',
            bills:[]
        }
    }


    getBills(){
        graphqls(BILL_BY_PROPS,{}).then((e)=>{
            console.log('1----',e.billbyprops)
            this.setState({
                bills:e.billbyprops
            })
        })
    }
    componentDidMount(){
        //console.log('组件已加载')
        this.props.setNavBarText('微记账本')
        this.getBills()
        let today=new Date().toLocaleString('chinese', { hour12: false }).slice(0,10)

        // 1: "118-12-10"
        // 2: "118-12-16"
        //console.log('110',getMonDayAndSunDay(today))
        let result=getMonDayAndSunDay(today)

        let weekBottom='20' + result[1].slice(1,10)
        let weekTop='20'+ result[2].slice(1,10)
        //console.log(weekTop,weekBottom)
        this.setState({weekTop,weekBottom})
    }

    render(){
        const weekTop=this.state.weekTop
        const weekBottom=this.state.weekBottom
        return(
            <div>
               <div className="dateWrap"><span className="month"> {this.state.month} </span> / {this.state.year}</div>
               <Lists bills={this.state.bills} year={this.state.year} month={this.state.month}/>
               <div className="buttonWrap">
                <Buttons />
               </div>
               <IconList bills={this.state.bills} week={{weekTop,weekBottom}}/>
            </div>
        )
    }
}

export default HomePage