import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux';
import { ApiTable, EmisApiTable, EmisRequest } from '$utils'
import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Toast } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import { SkeletonScreen, WorkflowModal } from "$components";
import moment from "moment";





const Rest = (props) => {
   const { dispatch, actions, user, socket } = props

   const form = useRef();//表单
   const [setup, setSetup] = useState(false);  //表格设置是否显现
   const [setupp, setSetupp] = useState([]);//实际显示的表格列表
   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
   const [limits, setLimits] = useState(0)//每页实际条数
   const mylimits = useRef(); //每页实际条数
   const [pushModal, setPushModal] = useState(false)  //信鸽弹框
   const [pushEdit, setPushEdit] = useState(false)  //是否是修改
   const [change, setChange] = useState(false)  //是否改变
   const [allTableData, setAllTableData] = useState([])  //获取到的所有表格信息
   const [editObj, setEditObj] = useState({});//管理员弹框修改内容
   const [projectStatus, setProjectStatus] = useState([]); //获取项目状态列表
   const [tableData, setTableData] = useState([]); //获取项目状态列表
   const [loading, setLoading] = useState(true); //获取项目状态列表
   const [workflowModalVisible, setWorkflowModalVisible] = useState(false)
   const [processInstanceId, setProcessInstanceId] = useState(null)



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

   let backlogData = () => {
      setLoading(true)
      EmisRequest.get(EmisApiTable.processInstancemMyAuditList,
         { userId: user?.id, businessType: '运维中台表单', })
         .then(res => {
            console.log(111, res);
            setTableData(res)
            setLimits(res.length || 0)
            setLoading(false)

         }, error => {
            Toast.error({ content: '待办工单请求失败', duration: 1, })
            setLoading(false)

         });
   }

   let columns = [{
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) => index + 1
   }, {
      title: '标题',
      dataIndex: 'nae',
   }, {
      title: '关联项目',
      dataIndex: 'nae',
   }, {
      title: '申请人',
      dataIndex: 'applyerName',
   }, {
      title: '申请部门',
      dataIndex: 'applyDepartmentName',
   }, {
      title: '提交时间',
      dataIndex: 'startTime',
      render: (text, record, index) => text && moment(text).format('YYYY-MM-DD HH:mm:ss') || '--'
   }, {
      title: '期望完成时间',
      dataIndex: 'nae',
   }, {
      title: '操作',
      dataIndex: 'hadle',
      render: (text, record, index) => <div style={{ width: 60, color: "#1890ff", cursor: "pointer" }} onClick={() => {
         setProcessInstanceId(record.processInstanceId)
         setWorkflowModalVisible(true)

      }}>查看详情</div>
   }]

   return (
      <>
         <div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
               <div style={{ display: 'flex', alignItems: 'center' }}>
                  <div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                  <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>待办工单</div>
                  <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>BACKLOG WORKORDER</div>
               </div>
               <div style={{ marginRight: 20, display: 'flex', alignItems: 'center' }} className='myempush'>
                  <Form
                     // getFormApi={(formApi) => (form.current = formApi)}
                     layout="horizontal"
                     style={{ position: "relative", width: "100%", flex: 1 }}
                     onSubmit={(values) => {
                        console.log(values)
                     }}
                  >
                     <Form.DatePicker
                        pure
                        field="applyTimes"
                        label="提交时间"
                        style={{ width: 268 }}
                        type="dateRange" density="compact"
                     />
                     <Form.Input
                        suffix={<IconSearch />}
                        field="keyword"
                        pure
                        showClear
                        style={{ width: 260, marginLeft: 12, marginRight: 12 }}
                        placeholder="请输入申请人"
                     />
                     <Button
                        type="primary" htmlType="submit"
                        style={{
                           width: 80,
                           height: 32,
                           borderRadius: 2,
                           marginRight: 32,
                           background: '#FFFFFF',
                           color: '#005ABD',
                           border: '1px solid #005ABD'
                        }}
                     >
                        查询
                     </Button>
                  </Form>


               </div>
            </div>

            <div style={{ marginTop: 20 }}>
               <Skeleton
                  loading={loading}
                  // loading={false}
                  active={true}
                  placeholder={SkeletonScreen()}
               >
                  <Table
                     rowKey="name"
                     columns={columns}
                     dataSource={tableData?.slice(query.limit * query.page, (query.page + 1) * query.limit)}
                     bordered={false}
                     hideExpandedColumn={false}
                     empty="暂无数据"
                     pagination={false}
                  />
               </Skeleton>

               <div
                  style={{
                     display: "flex",
                     justifyContent: "space-between",
                     padding: "20px 20px",
                  }}
               >
                  <div>
                  </div>
                  <div style={{ display: 'flex', }}>
                     <span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}>
                        共{limits}条信息
                     </span>
                     <Pagination
                        className="22"
                        total={limits}
                        showSizeChanger
                        currentPage={query.page + 1}
                        pageSizeOpts={[10, 20, 30, 40]}
                        onChange={(currentPage, pageSize) => {
                           setQuery({ limit: pageSize, page: currentPage - 1 });
                        }}
                     />
                  </div>
               </div>
            </div>
         </div>
         <WorkflowModal
            visible={workflowModalVisible}
            title={''}
            processId={processInstanceId}
            onCancel={() => { setWorkflowModalVisible(false) }}
            successCallBack={() => { setWorkflowModalVisible(false) }}
         />
      </>
   )
}

function mapStateToProps (state) {
   const { auth, global, members, webSocket } = state;
   return {
      //   loading: members.isRequesting,
      //   user: auth.user,
      //   actions: global.actions,
      //   members: members.data,
      //   socket: webSocket.socket
   };
}

export default connect(mapStateToProps)(Rest);