import LeftSelectTree from "@/components/leftSelectTree/leftSelectTree"
import { ActionType, ProForm, ProFormSelect, ProFormText, ProFormTextArea, ProFormUploadButton, ProTable } from "@ant-design/pro-components"
import { Button, Col, FormInstance, Modal, Popconfirm, Row } from "antd"
import moment from "moment"
import { useRef, useState } from "react"

// 投诉审批页面
const ComplaintApproval = () => {
    const actionRef = useRef<ActionType>();
    const formRef = useRef<FormInstance>();
    const modalFormRef = useRef<FormInstance>();
    const transferFormRef = useRef<FormInstance>();
    // 树相关的属性和方法
    const [selectedId, setSelectedId] = useState<string>()
    const [collapsible, setCollapsible] = useState<boolean>(false)
    // 点击的行数据
    const [currentRow, setCurrentRow] = useState<any>()
    // 显示悬浮框
    const [showDetail, setShowDetail] = useState<boolean>(false)
    // 悬浮框点击确认的加载效果
    const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
    // 转办的悬浮框
    const [transferModal, setTransferModal] = useState<boolean>(false)
    // 转办悬浮框的loading效果
    const [transferLoading, setTransferLoading] = useState<boolean>(false)

    // 列表配置
    const columns: any = [

    ]

    return <div style={{ height: 'calc(100vh - 100px)', backgroundColor: '#fff', display: 'flex' }}>
        <LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />

        <div style={{
            width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
            paddingTop: 0,
            paddingBottom: 0,
            paddingRight: 0
        }}>
            <ProTable
                actionRef={actionRef}
                formRef={formRef}
                columns={columns}
                bordered
                scroll={{ x: '100%', y: 'calc(100vh - 450px)' }}
                headerTitle={'投诉审批列表'}
                search={{ span: 6, }}
                request={async (params) => {

                }}

                toolbar={{
                    actions: [
                        <Button type="primary" onClick={() => {
                            setShowDetail(true)
                        }}>新增投诉</Button>
                    ]
                }}
            />
        </div>


        {/* 投诉的悬浮框 Modal */}
        <Modal
            title={currentRow ? '审批投诉' : '添加投诉'}
            destroyOnClose
            width={900}
            open={showDetail}
            className="ComplaintApprovalModalBox"
            onCancel={() => {
                setCurrentRow(undefined)
                setShowDetail(false)
            }}
            confirmLoading={confirmLoading}
            footer={<div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                    <Button type={'primary'} loading={confirmLoading} onClick={() => {
                        setTransferModal(true)
                    }}>转办</Button>
                </div>
                <div>
                    <Button style={{ marginRight: '8px' }} onClick={() => {
                        setCurrentRow(undefined)
                        setShowDetail(false)
                    }}>取消</Button>
                    <Button type={'primary'} loading={confirmLoading} onClick={() => {

                    }}>确认</Button>

                    <Popconfirm title="确定驳回审核？">
                        <Button type={'primary'} style={{ marginRight: '8px' }} danger loading={confirmLoading} onClick={() => {
                        }}>驳回审核</Button>
                    </Popconfirm>
                    <Popconfirm title="确定审核通过？">
                        <Button type={'primary'} loading={confirmLoading} onClick={() => {
                        }}>审核通过</Button>
                    </Popconfirm>
                </div>
            </div>}
        >
            <ProForm
                formRef={modalFormRef}
                submitter={false}
                onFinish={() => {
                }}
            >
                <Row>
                    <Col span={24}>
                        <ProFormTextArea
                            label={'投诉内容'}
                            name={''}
                            rules={[{ required: true, message: '请输入投诉内容!' }]}
                        />
                    </Col>
                    <Col span={24}>
                        <ProFormUploadButton
                            label={'上传附件'}
                            name={'attachment'}
                            rules={[{ required: true, message: '请上传附件!' }]}
                        />
                    </Col>

                    {/* 安全员核实反馈内容 */}
                    <Col span={24}>
                        <ProFormTextArea
                            label={'核实情况'}
                            name={''}
                            rules={[{ required: true, message: '请输入核实情况!' }]}
                        />
                    </Col>
                    <Col span={24}>
                        <ProFormTextArea
                            label={'处置结果'}
                            name={''}
                            rules={[{ required: true, message: '请输入处置结果!' }]}
                        />
                    </Col>
                    <Col span={24}>
                        <ProFormUploadButton
                            label={'附件资料'}
                            name={''}
                            rules={[{ required: true, message: '请上传附件资料!' }]}
                        />
                    </Col>
                </Row>
            </ProForm>
        </Modal>

        {/* 转办的悬浮框 */}
        <Modal
            title={'审批转办'}
            destroyOnClose
            width={600}
            open={transferModal}
            onCancel={() => {
                setTransferModal(false)
            }}
            onOk={() => {
                //因为如果是转办成功 那么肯定是两个悬浮框都关闭  且 表格重新刷新的 
                // 当前悬浮框的关闭内容
                setTransferModal(false)
                // 投诉悬浮框关闭的内容
                setCurrentRow(undefined)
                setShowDetail(false)
                // 表格数据更新
                actionRef.current?.reload()
            }}
            confirmLoading={transferLoading}
        >
            <ProForm
                formRef={transferFormRef}
                submitter={false}
            >
                <Row>
                    <Col span={24}>
                        <ProFormSelect
                            label={"转办人"}
                            name={'transferPerson'}
                            rules={[{ required: true, message: '请选择转办人!' }]}
                        />
                    </Col>
                </Row>

            </ProForm>

        </Modal>

    </div>
}


export default ComplaintApproval     