import React from 'react';
import { connect } from 'react-redux';
import { Spin, Table } from 'antd';
import { ModalForm } from '@ant-design/pro-form';
import moment from 'moment';
const UserModal = (props) => {
    const { visible, onVisibleChange } = props
    const datas = props.modalRecord || {}
    const scopeOfExamination = { ...datas }.hiddenDangerItem12
    const arr = [
        ' 1、合用场所的所有权人、使用人是否遵守消防法律、法规、规章;',
        ' 2、住宿场所是否违规搭建；',
        ' 3、合用场所是否配置灭火器、消防应急照明等消防器材和设施；',
        ' 4、合用场所的电器产品的安装、使用及其线路和管路的设计、敷设、维护保养、检测，是否符合消防技术标准和管理规定；',
        ' 5、合用场所住宿是否超过2人;(judge_0) 若超过，人员住宿是否设置在首层，并直通室外安全出口。(judge_1)',
        ' 6、电动自行车是否违规室内充电、停放;',
        ' 7、合用场所是否违规生产、储存、经营易燃易爆危险品;',
        ' 8、合用场所除厨房外是否违规使用或者放置瓶装液化石油气、可燃液体;',
        ' 9、放置瓶装液化石油气的厨房是否采取防火分隔措施，并设置自然排风窗;',
        ' 10、合用场所疏散通道、安全出口是否保持畅通;',
        ' 11、合用场所的外窗或阳台是否设置金属栅栏;(judge_0) 若设置，是否能从内部易于开启。(judge_1)',
        ' 12、存在其他安全隐患;',
    ]
    const columns = [
        {
            title: '场所名称',
            dataIndex: 'reportName',
            hideInSearch: true,
            render: () => {
                return <div>{datas.placeName}</div>
            }
        }, {
            title: '场所基本情况',
            dataIndex: 'reportName',
            hideInSearch: true,
            render: () => {
                return <div>
                    <li>使用性质：{datas.placeType}</li>
                    <li>地址：{datas.address}</li>
                    <li>负责人：{datas.placeOwner}</li>
                    <li>电话：{datas.phone}</li>
                    <li>面积：{datas.dimension}</li>
                    <li>层数：{datas.floors}</li>
                    <li>常驻人口:{datas.numberOfPeople}</li>
                </div>
            }
        }, {
            title: '检查内容',
            dataIndex: 'reportName',
            hideInSearch: true,
            render: () => {
                return datas.hiddenDangerItem12 ?
                    scopeOfExamination.map((item, index) => {
                        let message = arr[index]
                        if (arr[index].indexOf('judge_') > -1) {
                            if (item.value == true && index === 4) {
                                message = message.replace(`judge_1`, item.child.value ? "是" : "否")
                            } else {
                                message = message.replace(`若超过，人员住宿是否设置在首层，并直通室外安全出口。(judge_1)`, '')


                            }
                            if (item.value == true && index === 10) {
                                message = message.replace(`judge_1`, item.child.value ? "是" : "否")
                            } else {

                                message = message.replace(`若设置，是否能从内部易于开启。(judge_1)`, '')

                            }
                            if (arr[index].indexOf('judge_0') > -1) {
                                return <li key={index}>{message.replace(`judge_0`, item.value ? "是" : "否")}</li>
                            }
                        }
                        return <li key={index}>{message}({item.value ? "是" : "否"})</li>
                    })
                    : '---'
            }
        }, {
            title: '存在具体问题',
            dataIndex: 'reportName',
            hideInSearch: true,
            render: () => {
                return <div>{datas.description ? datas.description : '---'}</div>
            }
        },
    ]
    const data = [
        {
            key: '1',

            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
    ];
    return (
        <Spin spinning={false}>
            <ModalForm
                width={'90rem'}
                visible={visible}
                onVisibleChange={onVisibleChange}
                submitter={false}
            >
                <div style={{ width: '71vw' }}><span style={{ fontSize: '16px' }}>排查单位：{(datas || {}).checkAreaName || ''}</span>
                    <span style={{ fontSize: '16px', float: 'right', marginBottom: '10px' }}>填报日期：{moment((datas || {}).time).format('YYYY-MM-DD') || ''}</span><span style={{ clear: 'both' }}></span></div>
                <Table columns={columns} dataSource={data} width={'50rem'} pagination={false}

                />
                <div style={{ width: '71vw', marginTop: '10px' }}>
                    <span style={{ fontSize: '16px' }}>排查人：{(datas || {}).checkUserName || ''}</span>
                    <span style={{ fontSize: '16px', float: 'right' }}>手机号：{(datas || {}).checkUserPhone || ''}</span></div>
            </ModalForm>
        </Spin>
    )
}
function mapStateToProps(state) {
    const { depMessage } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        loading: depMessage.isRequesting,
        depData,
    };
}
export default connect(mapStateToProps)(UserModal);