'use strict';

import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Popconfirm } from 'antd';
import ProTable from '@ant-design/pro-table';
import './protable.less'
import ProjectModal from './project/project';
import { getProject, delProject } from "../actions/infor"

import moment from 'moment';
// import UserModal from './infor/details';
const BuildingTable = (props) => {
    const { dispatch, user, depData, depMessage, depLoading } = props
    const [rowSelected, setRowSelected] = useState([])
    const [sitename, setSitename] = useState()//名称
    const [counts, setCounts] = useState()//shuju
    const [modalVisible, setModalVisible] = useState(false);
    const [modalVisibleyilan, setModalVisibleyilan] = useState(false);
    const [modalRecord, setModalRecord] = useState();
    const [typecard, setTypecard] = useState();
    const [recortd, setRecortd] = useState()
    const [whichofits, setWhichofits] = useState('在建项目')
    const [delet, setDelet] = useState()
    const [differentiate, setDifferentiate] = useState('road')
    const [grade, setGrade] = useState('project')
    const [departmentInfo, setDepartment] = useState('')
    const [editAble, setEditAble] = useState(user?.username !== 'SuperAdmin' && user?.userResources?.find(i => i.resourceId === 'BUILDINGPROJECT')?.isshow === "true" ? true : '')
    //console.log('user111', user)
    const ref = useRef()
    const [activeKey, setActiveKey] = useState('tab1');
    //打开弹窗
    const yilanModal = (type, record) => {
        setModalVisibleyilan(true);
        // setModalType(type);
        if (type == 'edit') {
            setModalRecord(record);
        } else {
            setModalRecord(null);
        }
    }
    const getData = async () => {
        const res = await dispatch(getProject({
            entryName: sitename
        }));
        setCounts(res.payload.data)
    }
    const deldatas = async (id) => { // 工程
        const query = {
            projectId: id
        }
        dispatch(delProject(query)).then((res) => {
            setDelet(res)
        })
        const res = await dispatch(getProject({
            entryName: sitename
        }));
        setCounts(res.payload.data)
    }

    const columns = {
        tab1: [
            {
                title: '项目名称',
                dataIndex: 'placeName',
                fixed: 'left',
                width: 120,
                options: 1,
                backgroundColor: "#ffffff",
                fieldProps: {
                    onChange: (value, cs) => {
                        setSitename(value.currentTarget.value)
                    },
                    placeholder: '请输入项目名称进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                },
                render: (dom, record) => {
                    return record.entryName
                },
            },
            {
                title: '项目规模(公里)',
                search: false,
                dataIndex: 'containers',

                fixed: 'left',
                width: 120,
                render: (dom, record) => {
                    return record.projectMileage
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '项目投资（万元）',
                search: false,
                dataIndex: 'time2',
                valueType: 'dateRange',
                // align: 'right',
                width: 120,
                render: (dom, record) => {
                    return record.investment
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '业主单位',
                search: false,
                dataIndex: 'time3',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.buildUnit
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '质量监督单位',
                search: false,
                dataIndex: 'time3',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.qutityUnit
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '施工单位',
                search: false,
                dataIndex: 'time6',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.constructionUnit
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '设计单位',
                search: false,
                dataIndex: 'time5',
                valueType: 'dateRange',


                width: 120,
                render: (dom, record) => {
                    return record.designUnit
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            }, {
                title: '监理单位',
                search: false,
                dataIndex: 'time4',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.constructionControlUnit
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '开工时间',
                search: false,
                dataIndex: 'time7',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.startTime ? moment(record.startTime).format('YYYY-MM-DD') : ''
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '是否完成',
                search: false,
                dataIndex: 'time8',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.done === true ? '已完成' : '未完成'
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '备注',
                search: false,
                dataIndex: 'time9',
                valueType: 'dateRange',
                width: 120,
                render: (dom, record) => {
                    return record.remark
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '操作',
                dataIndex: 'creatTime',
                valueType: 'dateTimeRange',
                hideInSearch: true,
                width: 160,
                fixed: 'right',
                render: (dom, record) => {
                    return <div><Button type="link"
                        onClick={() => {
                            yilanModal('edit', record)
                            setTypecard('compile')
                            setRecortd(record)
                        }}
                        disabled={editAble}
                    >编辑</Button><Popconfirm title='是否确认删除' onConfirm={() => { deldatas(record.id) }} disabled={editAble}>
                            <Button type="link" disabled={editAble}>删除</Button>
                        </Popconfirm></div>

                }
            },
            {
                key: "direction",
                hideInTable: true,
                dataIndex: "direction",
                order: 6,
                renderFormItem: (item, { type, defaultRender, ...rest }, form, record) => {
                    return (
                        <div> <Button
                            type="primary"
                            style={{ width: "100px" }}
                            onClick={() => {
                                yilanModal('edit', record)
                                setTypecard('')
                            }}
                            disabled={editAble}
                        >
                            新增
                        </Button>
                            {/* <Button
                                type="primary"
                                style={{ width: "100px", marginLeft: 20 }}

                            >
                                导入
                            </Button> */}
                        </div>


                    );
                },
            },
        ]
    }






    return (
        <Spin spinning={false}>
            <div className='protable-transpor'>
                <ProTable
                    actionRef={ref}
                    toolbar={{
                        multipleLine: true,
                        menu: {
                            activeKey,
                            onChange: (key) => setActiveKey(key),
                            items: [
                                // {
                                //     key: 'tab1',
                                //     label: <span onClick={() => {
                                //         setWhichofits('在建项目')
                                //         setDifferentiate('project')
                                //         setGrade('在建项目')

                                //     }}>在建项目{activeKey === 'tab1'}</span>,
                                // },
                            ],
                        },
                    }}
                    scroll={{ x: 800 }}
                    options={false}
                    ref={c => { finishedProductTable = c; }}
                    style={{ width: "100% ", overflow: "auto", height: '760px' }}
                    rowKey='id'
                    onReset={(v) => {
                        setSitename('')
                    }}
                    rowSelection={{
                        selectedRowKeys: rowSelected,
                        onChange: (selectedRowKeys) => {
                            setRowSelected(selectedRowKeys);
                        },
                    }}
                    columns={columns[activeKey]}
                    dataSource={counts || []}
                    request={async (params) => {
                        //console.log(whichofits)
                        if (whichofits == '在建项目') {
                            const query = {
                                entryName: sitename
                            }
                            setRowSelected([]);
                            const res = await dispatch(getProject(query));
                            setCounts(res.payload.data)
                            return {
                                ...res,
                                total: res.payload.data ? res.payload.data.count : 0
                            }
                        }
                    }}
                    search={{
                        defaultCollapsed: false,
                        optionRender: (searchConfig, formProps, dom) => [
                            ...dom.reverse(),
                            <Popconfirm title="确认导出?" onConfirm={() => { props.exports(rowSelected, grade, differentiate) }}
                                disabled={user?.username !== 'SuperAdmin' && user?.userResources?.find(i => i.resourceId === 'BUILDINGPROJECT')?.isshow === "true" ? true : ''}
                            >
                                <Button
                                    disabled={user?.username !== 'SuperAdmin' && user?.userResources?.find(i => i.resourceId === 'BUILDINGPROJECT')?.isshow === "true" ? true : ''}
                                >
                                    导出
                                </Button>
                            </Popconfirm>
                        ],
                    }}
                >
                </ProTable>
            </div>

            {modalVisibleyilan ? <ProjectModal
                visible={modalVisibleyilan}
                onVisibleChange={setModalVisibleyilan}
                modalRecord={modalRecord}
                typecard={typecard}
                getData={getData}
                rewkeys={'road'}
                recortd={recortd}
                setRecortd={setRecortd}
                setDelet={setDelet}
            /> : ''}
        </Spin >
    )
}
function mapStateToProps(state) {
    const { auth, depMessage } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
    };
}
export default connect(mapStateToProps)(BuildingTable);