import React, { useEffect, useState } from 'react';
import { Form, Input, Button, DatePicker } from 'antd';
import NormalSelect from '../../../components/Form/NormalSelect';
import dayjs from 'dayjs';
import { FileTextOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker;

const ToolBar = ({ setToolVal }) => {
  const [showIcon, setShowIcon] = useState(false)
  const selectList=[
    {key:'最近1小时',value:1},
    {key:'最近1天',value:2},
    {key:'最近7天',value:3},
    {key:'最近1个月',value:4},
  ]
  const Stypes = [
    { label: 'CPU', value: 0 },
    { label: '内存', value: 1 },
    { label: '存储', value: 2 },
  ];
  const [form] = Form.useForm();

  const onFinish = (values) => {
    if (values.tm) {
      values.stm = values.tm[0] ? dayjs(values.tm[0]).format('YYYY-MM-DD HH:mm:ss') : "";
      values.etm = values.tm[1] ? dayjs(values.tm[1]).format('YYYY-MM-DD HH:mm:ss') : "";
      delete values.tm
    }
    setToolVal(values);
  }

  const selectTime = (params)=>{
    let tmValue=[]
    if(params === 1){
      tmValue=[dayjs().subtract(1, 'hours'),
        dayjs()
        ]
    }else if(params ===2){
      tmValue=[dayjs().subtract(1, 'days'),
        dayjs()
        ]
    }else if(params ===3){
      tmValue=[dayjs().subtract(7, 'days'),
        dayjs()
        ]
    }else if(params ===4){
      tmValue=[dayjs().subtract(1, 'months'),
        dayjs()
        ]
    }
    form.setFieldsValue({...params,tm:tmValue})
  }

  const onValuesChange = (values, allValues) => {
    if (allValues.tm) {
      allValues.stm = allValues.tm[0] ? dayjs(allValues.tm[0]).format('YYYY-MM-DD HH:mm:ss') : "";
      allValues.etm = allValues.tm[1] ? dayjs(allValues.tm[1]).format('YYYY-MM-DD HH:mm:ss') : "";
      delete allValues.operTime
    }
    console.log(values,allValues);
    setToolVal(allValues)
  }
  useEffect(() => {
    const tm = [dayjs().subtract(1, 'hours'), dayjs()];
    form.setFieldsValue({ tm, type: 0 })
    const stm = tm[0].format('YYYY-MM-DD HH:mm:ss');
    const etm = tm[1].format('YYYY-MM-DD HH:mm:ss');
    setToolVal({type:0,stm,etm})
  }, [])
  return (
    <div className='pageToolBar' style={{position:'relative'}}>
      <Form form={form} onFinish={onFinish} size='Default' layout="inline" style={{columnGap:25}} onValuesChange={onValuesChange}>
        <Form.Item label="监测时间" name="tm">
          <RangePicker
            placeholder={['开始日期', '结束日期']}
            format='YYYY-MM-DD HH:mm:ss'
            style={{ width: 350 }}
            showTime
          />
        </Form.Item>
        <Form.Item label="监测指标" name="type" wrapperCol={{span:1}}>
          <NormalSelect options={Stypes} style={{ width: '120px' }} />
        </Form.Item>
        <Form.Item wrapperCol={{offset:8}}>
          <Button type="primary" htmlType="submit" size='Default'>查询</Button>
        </Form.Item>
        <Form.Item>
          <Button size='Default' onClick={() => form.resetFields()}>重置</Button>
        </Form.Item>
      </Form>
      <div style={{display:'flex',justifyContent:'end',position:'absolute',left:"25.5%",
    top:"7%"}}
          onClick={()=>{
            setShowIcon(!showIcon)
          }}
          >
            <FileTextOutlined style={{fontSize:24,color:'skyblue'}}/>
             {showIcon &&<div className='selecItem' style={{position:'absolute',zIndex:2,width:200,top:"100%",left:"7.5%",backgroundColor:'#fff',border:'1px solid #f0f0f0',padding:'5px 10px'}}>
              {selectList.map((item)=>{
                return <div style={{cursor:'pointer'}} onClick={()=>selectTime(item.value)}>{item.key}</div>
              })}
              </div>}
          </div>
    </div>
  );
}

export default ToolBar;