import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux';
import moment from 'moment';
import ApproveModal from '../components/approveModal';


import { Tabs, Form, Input, DatePicker, Button, Table } from 'antd';
import { v1 } from 'uuid';


function MyApplication ({ loading, clientHeight, actions, dispatch, user }) {

   const { resourceConsumption } = actions

   const [query, setQuery] = useState({ page: 0, limit: 10 });
   const [proTableList, setProTableList] = useState({ rows: [], count: 0 });
   const [formData, setFormData] = useState({})

   useEffect(() => {
      resourceData()
   }, [])


   let resourceData = (params) => {
      let data = params || query
      dispatch(resourceConsumption.getApproveList({ applyById: user?.id, ...formData, ...data, })).then(res => {
         if (res.success) {
            setProTableList(res.payload.data)
         }
      })
   }


   const columns = [{
      title: '资源名称',
      dataIndex: 'resourceName',
   }, {
      title: '申请人',
      dataIndex: 'applyBy',
      render: (text, record) => record?.user?.name
   }, {
      title: '需求描述',
      dataIndex: 'requirements',
   }, {
      title: '数据类型',
      dataIndex: 'resourceType',
   }, {
      title: '令牌',
      dataIndex: 'token',
      render: (text, record) => text || '--'
   }, {
      title: '申请时间',
      dataIndex: 'applyAt',
      render: (text, record) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') || '--',
      sorter: {
         compare: (a, b) => moment(b?.applyAt).valueOf() - moment(a?.applyAt).valueOf(),
         // multiple: 2,
      },
   }, {
      title: '审批意见',
      dataIndex: 'result',
      render: (text, record) => record?.approveState == '审批中' ? record?.approveState : record?.approveState == '已审批' ? record?.token ? "审批通过" : "审批不通过" : "--"
   }, {
      title: '意见内容',
      dataIndex: 'approveRemarks',
      render: (text, record) => text || '--'
   }, {
      title: '审批时间',
      dataIndex: 'approveAt',
      render: (text, record) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') || '--',
      sorter: {
         compare: (a, b) => moment(b?.approveAt).valueOf() - moment(a?.approveAt).valueOf(),
         // multiple: 2,
      },
   }];



   return <>
      <Form
         style={{ display: 'flex' }}
         onFinish={v => {

            setFormData({ ...v, applyAt: v.applyAt ? moment(v.applyAt).format('YYYY-MM-DD HH:mm:ss') : "" })
            resourceData({ limit: 10, page: 0, ...v, applyAt: v.applyAt ? moment(v.applyAt).format('YYYY-MM-DD HH:mm:ss') : "" })
            setQuery({ limit: 10, page: 0 });
            console.log(v);
         }}
         autoComplete="off"
      >
         <Form.Item label="资源名称" name="resourceName" >
            <Input allowClear placeholder='资源名称关键字' style={{ width: 200, marginRight: 16 }} />
         </Form.Item>
         <Form.Item label="申请人" name="applyBy" >
            <Input allowClear placeholder='申请人关键字' style={{ width: 140, marginRight: 16 }} />
         </Form.Item>
         <Form.Item label="申请日期" name="applyAt" >
            <DatePicker style={{ width: 140, marginRight: 16 }} />
         </Form.Item>
         <Form.Item >
            <Button type="primary" htmlType="submit"> 查询 </Button>
         </Form.Item>
      </Form>

      <Table
         columns={columns}
         dataSource={proTableList?.rows || []}
         scroll={{ scrollToFirstRowOnChange: true, y: clientHeight - 260 }}
         pagination={{
            current: query?.page + 1,
            pageSize: query?.limit,
            total: proTableList?.count,
            showSizeChanger: true,
            // showQuickJumper: true,
            showTotal: (total) => { return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / query?.limit)}页，${total}项`}</span> },
            onChange: (page, pageSize) => {
               setQuery({ limit: pageSize, page: page - 1 });
               resourceData({ limit: pageSize, page: page - 1 });
            }
         }}
      />

   </>
}
function mapStateToProps (state) {
   const { global, auth, resourceCatalog } = state;
   return {
      user: auth.user,
      actions: global.actions,
      clientHeight: global.clientHeight,
      //  resourceCatalog: resourceCatalog?.data || [],
      //  isRequesting: resourceCatalog.isRequesting
   };
}
export default connect(mapStateToProps)(MyApplication)