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

const Rest = (props) => {
   const { dispatch, actions, user, socket, pomsProjectBasicAll } = props
   const { workOrder } = actions
   const [query, setQuery] = useState({ limit: 10, offset: 0 }); //页码信息
   const [limits, setLimits] = useState(0)//每页实际条数
   const [tableData, setTableData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [workflowModalVisible, setWorkflowModalVisible] = useState(false)
   const [workflowModalType, setWorkflowModalType] = useState('')
   const [checkProcessInstanceId, setCheckProcessInstanceId] = useState(null)
   const [params, setParams] = useState({})

   useEffect(() => {
      backlogData()
      if (!pomsProjectBasicAll.length) {
         dispatch(workOrder.getPomsProjectBasicAll())
      }
   }, [])

   let backlogData = (obj = { limit: 10, offset: 0 }) => {
      setLoading(true)
      EmisRequest.get(EmisApiTable.processInstancemMyApplyList,
         {
            userId: user?.id,
            businessType: '运维中台表单',
            ...obj,
            queryFormData: 'true'
         })
         .then(res => {
            let nextTableData = (res?.data || []).map(r => {
               let pomsNeedData = {}
               if (r?.formData?.submitFormData && r?.formData?.workflowProcessVersion?.workflowProcessForm?.formSchema) {
                  pomsNeedData = parseProcessData({
                     formSchema: r?.formData?.workflowProcessVersion?.workflowProcessForm?.formSchema,
                     formData: r?.formData?.submitFormData
                  })
               }
               return {
                  ...r,
                  pomsNeedData
               }
            })
            setTableData(nextTableData)
            setLimits(res.count || 0)
            setLoading(false)
         }, error => {
            Toast.error({ content: '由我发起的工单列表请求失败', duration: 1, })
            setLoading(false)
         });
   }

   let columns = [{
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) => index + 1
   }, {
      title: '标题',
      dataIndex: 'title',
      render: (text, record, index) => {
         return record?.pomsNeedData?.title?.value || ''
      }
   }, {
      title: '关联项目',
      dataIndex: 'pomsProject',
      render: (text, record, index) => {
         const pomsProjectId = record?.pomsNeedData?.pomsProjectId?.value
         if (pomsProjectId) {
            const corProject = pomsProjectBasicAll.find(p => p.value == pomsProjectId)
            return corProject?.label || ''
         } else {
            return ''
         }
      }
   }, {
      title: '申请人',
      dataIndex: 'applyerName',
   }, {
      title: '申请部门',
      dataIndex: 'applyDepartmentName',
   }, {
      title: '审批状态',
      dataIndex: 'status',
      render: (text, record) => {
         return judgmentProcessState(record, 'initiate')
      },
   }, {
      title: '提交时间',
      dataIndex: 'submissionTime',
      render: (text, record, index) => text && moment(text).add(8, 'hours').format('YYYY-MM-DD HH:mm:ss') || '--'
   }, {
      title: '期望完成时间',
      dataIndex: 'expectTime',
      render: (text, record, index) => {
         return record?.pomsNeedData?.expectTime?.value || ''
      }
   }, {
      title: '操作',
      dataIndex: 'hadle',
      render: (text, record, index) => {
         let reviewTime = record.lastApproveTime ?
            moment(record.lastApproveTime).format('YYYY-MM-DD HH:mm:ss')
            :
            record.variables.find(t => t.name == 'fsLastActionTime') ?
               moment.unix(record.variables.find(t => t.name == 'fsLastActionTime').value).format('YYYY-MM-DD HH:mm:ss')
               : '';
         console.log(reviewTime);
         let tooltipTitle = '';
         if (record.processDeleted) {
            tooltipTitle = '该表单流程已删除，不支持重新发起';
         }
         if (!record.processIsEnable) {
            tooltipTitle = '该表单流程已停用，不支持重新发起';
         }
         if (!record.isCurrentVersion) {
            tooltipTitle = '该表单流程已修改，不支持重新发起'
         }
         return (
            <Space>
               <a style={{ width: 60, color: "#1890ff", cursor: "pointer" }} onClick={() => {
                  setWorkflowModalType('myApply')
                  setCheckProcessInstanceId(record.processInstanceId)
                  setWorkflowModalVisible(true)
               }}>查看详情</a>
               {
                  !reviewTime && processState.active == record.state ?
                     <Popconfirm title='确认撤销申请？' onConfirm={() => {
                        // setLoading(true)
                        EmisRequest.post(EmisApiTable.getApprovalActionUrl.replace('{type}', 'interrupt'),
                           {
                              procinstId: record.processInstanceId,
                              actionName: '撤销'
                           })
                           .then(res => {
                              setLoading(false)
                              backlogData()
                              Toast.success({ content: '撤销流程成功', duration: 1, })
                           }, error => {
                              Toast.error({ content: '撤销流程失败', duration: 1, })
                              setLoading(false)
                           });
                     }}>
                        <a style={{ color: "#1890ff", cursor: "pointer" }}>撤销</a>
                     </Popconfirm>
                     : ''
               }{
                  (
                     record.state == processState.suspended // 已撤销
                     || record.state == processState.externally // 手动结束
                  ) ?
                     tooltipTitle
                        && false
                        ?
                        <Tooltip content={tooltipTitle} position={'leftBottom'}>
                           重新发起
                        </Tooltip>
                        : <a style={{ color: "#1890ff", cursor: "pointer" }} onClick={() => {
                           setWorkflowModalType('submit')
                           setCheckProcessInstanceId(record.processInstanceId)
                           setWorkflowModalVisible(true)
                        }}>重新发起</a>
                     : ''
               }
            </Space >
         )
      }
   }]

   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", }}>LAUNCH 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) => {
                        if (values?.applyTimes?.length) {
                           values.applyTimes = [moment(values?.applyTimes[0]).format('YYYY-MM-DD HH:mm:ss'), moment(values?.applyTimes[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')]
                        }
                        backlogData({ ...values, limit: 10, page: 0 })
                        setQuery({ limit: 10, offset: 0 });
                        setLimits(0)
                        setParams({ ...values })
                     }}
                  >
                     <Form.DatePicker
                        pure
                        field="applyTimes"
                        label="提交时间"
                        style={{ width: 268 }}
                        type="dateRange" density="compact"
                     />
                     {/* <Form.Input
                        suffix={<IconSearch />}
                        field="keywordsUser"
                        pure
                        showClear
                        style={{ width: 260, marginLeft: 12, marginRight: 12 }}
                        placeholder="请输入申请人"
                     /> */}
                     <Button theme='solid' type="primary" htmlType="submit">查询</Button>
                  </Form>


               </div>
            </div>

            <div style={{ marginTop: 20 }}>
               <Skeleton
                  loading={loading}
                  // loading={false}
                  active={true}
                  placeholder={SkeletonScreen()}
               >
                  <Table
                     rowKey="name"
                     columns={columns}
                     dataSource={tableData}
                     bordered={false}
                     hideExpandedColumn={false}
                     empty="暂无数据"
                     pagination={false}
                  />
               </Skeleton>

               <div
                  style={{
                     display: "flex",
                     justifyContent: "flex-end",
                     padding: "20px 20px",
                  }}
               >
                  <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.offset + 1}
                        pageSizeOpts={[10, 20, 30, 40]}
                        onChange={(currentPage, pageSize) => {
                           setQuery({ limit: pageSize, offset: currentPage - 1 });
                           backlogData({ ...params, limit: pageSize, offset: currentPage - 1 })
                        }}
                     />
                  </div>
               </div>
            </div>
         </div>
         <WorkflowApprovalModal
            type={workflowModalType}
            visible={workflowModalVisible}
            processAuditList={tableData}
            checkProcessInstanceId={checkProcessInstanceId}
            onCancel={() => { setWorkflowModalVisible(false) }}
            successCallBack={({ refresh }) => {
               if (refresh) {
                  backlogData()
               }
               setWorkflowModalVisible(false)
            }}
         />
      </>
   )
}

function mapStateToProps (state) {
   const { auth, global, pomsProjectBasicAll } = state;
   return {
      user: auth.user,
      actions: global.actions,
      pomsProjectBasicAll: pomsProjectBasicAll.data || []
   };
}

export default connect(mapStateToProps)(Rest);