
import React, { useRef,useState,useEffect } from 'react'
import moment from 'moment';
import { useModel } from 'umi';
import { DatePicker,Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import PageTable from '@/components/PageTable'
import OrgSearch from '@/components/OrgSearch';
import { getDeleteformList } from '@/services/work'
import { getDetail } from '@/services/org';

const { RangePicker } = DatePicker;

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
};

export default (props) => {
  const { initialState } = useModel('@@initialState');
  let myOrgId = initialState.currentUser.orgId;

  const [orgName,setOrgName]=useState('')

  const [start, setStart] = useState()
  const [end, setEnd] = useState()  
  const [deleteStart, setdeleteStart] = useState()
  const [deleteEnd, setdeleteEnd] = useState()

  const handelChange = (date, dateStrings) => {
    setStart(dateStrings[0])
    setEnd(dateStrings[1])
  }
  const handelDeleteChange = (date, dateStrings) => {
    setdeleteStart(dateStrings[0])
    setdeleteEnd(dateStrings[1])
  }
  const handleReset = () => {
    setStart()
    setEnd()
    setdeleteStart()
    setdeleteEnd()
  }

  useEffect(()=>{
    if (initialState.currentUser.orgId) {
      getDetail(initialState.currentUser.orgId).then((res)=>{
        setOrgName(res.orgName);
      })
    }
  },[initialState.currentUser.orgId])

  const columns = [
    {
      title: '企业名称',
      dataIndex: 'orgId',
      key: 'orgId',
      search: true,
      hideInTable: true,
      renderFormItem: () => (
        !initialState.currentUser.orgId?
        <OrgSearch placeholder='请输入企业名称' />:<Input readOnly value={orgName} />
      ),
    },
    {
      title: '企业名称',
      dataIndex: 'orgName',
      key: 'orgName',
      search: false,
    },
    {
      title: '操作人',
      dataIndex: 'deleteUserName',
      key: 'deleteUserName',
      search:false
    },
    {
      title: '操作时间',
      dataIndex: 'deleteDate',
      key: 'deleteDate',
      render: (t) => formatterTime(t),
      renderFormItem: (_, record) => 
      <RangePicker onChange={handelDeleteChange} 
      placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' />
    },
    {
      title: '申请人',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '申请时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (t) => formatterTime(t),
      renderFormItem: (_, record) => <RangePicker onChange={handelChange} placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' />
    },
  ]
  return (
    <PageHeaderWrapper>
      <PageTable
        columns={columns}
        request={getDeleteformList}
        options={false}
        search={{
          defaultCollapsed:false
        }}
        params={{ start, end, deleteStart, deleteEnd,myOrgId }}        
        onReset={handleReset}
        rowKey="formId"
      />
    </PageHeaderWrapper>
  )
}
