import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
    initFilter,
    addRuleAndGroups,
    guid,
    extendInclude,
    extendRule,
    extendOrder,
    extend,
    initQueryFilter,
} from "../../../utils/common";
import { LocalSearch, LayoutCard } from '@woowalker/feui'
import {
    Form,
    Table,
    Row,
    Col,
    Button,
    Input,
    Select,
    Pagination,
    DatePicker,
} from "antd";
import echarts from "echarts";
import moment from "moment";
const { Option } = Select;

const RangePicker = DatePicker.RangePicker
class CM041LibShow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pagination: {},
            retData: [],
            columns: [
                {
                    title: '序号',
                    render: (value, record, index) => {
                        const obj = {
                            children: `${index + 1}`,
                            props: {},
                        };

                        let arr = this.state.retData.filter((res) => {
                            return res.URGENT_EVENT_ID == record.URGENT_EVENT_ID;
                        });

                        if (index == 0 || this.state.retData[index - 1].URGENT_EVENT_ID != record.URGENT_EVENT_ID) {
                            obj.props.rowSpan = arr.length;
                        } else {
                            obj.props.rowSpan = 0;
                        }

                        return obj;
                    },
                },
                {
                    title: "事件类型",
                    dataIndex: "Nav_UrgentEvent.Nav_EventType.NAME",
                    render: (value, record, index) => {
                        const obj = {
                            children: value,
                            props: {},
                        };

                        let arr = this.state.retData.filter((res) => {
                            return res.URGENT_EVENT_ID == record.URGENT_EVENT_ID;
                        });

                        if (index == 0 || this.state.retData[index - 1].URGENT_EVENT_ID != record.URGENT_EVENT_ID) {
                            obj.props.rowSpan = arr.length;
                        } else {
                            obj.props.rowSpan = 0;
                        }

                        return obj;
                    },
                },
                {
                    title: "预计影响范围",
                    dataIndex: "Nav_UrgentEvent.Nav_ListArearInfluence",
                    render: (value, record, index) => {

                        var show = ''
                        value.forEach(e => {
                            show += ' ' + e.Nav_CoverageInfluence.NAME
                        });

                        const obj = {
                            children: show,
                            props: {},
                        };

                        let arr = this.state.retData.filter((res) => {
                            return res.URGENT_EVENT_ID == record.URGENT_EVENT_ID;
                        });

                        if (index == 0 || this.state.retData[index - 1].URGENT_EVENT_ID != record.URGENT_EVENT_ID) {
                            obj.props.rowSpan = arr.length;
                        } else {
                            obj.props.rowSpan = 0;
                        }

                        return obj;

                    },
                },
                {
                    title: "影响范围描述",
                    dataIndex: "Nav_UrgentEvent.AREAR_INFLUENCE",
                    render: (value, record, index) => {
                        const obj = {
                            children: value,
                            props: {},
                        };

                        let arr = this.state.retData.filter((res) => {
                            return res.URGENT_EVENT_ID == record.URGENT_EVENT_ID;
                        });

                        if (index == 0 || this.state.retData[index - 1].URGENT_EVENT_ID != record.URGENT_EVENT_ID) {
                            obj.props.rowSpan = arr.length;
                        } else {
                            obj.props.rowSpan = 0;
                        }

                        return obj;
                    },

                },
                {
                    title: "事故的后果",
                    dataIndex: "Nav_UrgentEvent.ACCIDENT_CONSEQUENCE",
                    render: (value, record, index) => {
                        const obj = {
                            children: value,
                            props: {},
                        };

                        let arr = this.state.retData.filter((res) => {
                            return res.URGENT_EVENT_ID == record.URGENT_EVENT_ID;
                        });

                        if (index == 0 || this.state.retData[index - 1].URGENT_EVENT_ID != record.URGENT_EVENT_ID) {
                            obj.props.rowSpan = arr.length;
                        } else {
                            obj.props.rowSpan = 0;
                        }

                        return obj;
                    },
                },
                {
                    title: "关联风险类型",
                    dataIndex: "Nav_UrgentEvent.Nav_ListEventRiskType",
                    render: (value, record, index) => {
                        var show = ''
                        value.forEach(e => {
                            show += ' ' + e.Nav_RiskType.NAME
                        });
                        const obj = {
                            children: show,
                            props: {},
                        };
                        let arr = this.state.retData.filter((res) => {
                            return res.URGENT_EVENT_ID == record.URGENT_EVENT_ID;
                        });
                        if (index == 0 || this.state.retData[index - 1].URGENT_EVENT_ID != record.URGENT_EVENT_ID) {
                            obj.props.rowSpan = arr.length;
                        } else {
                            obj.props.rowSpan = 0;
                        }
                        return obj;
                    },
                },
                {
                    title: "预案类型",
                    dataIndex: "Nav_ContingencyType.NAME",
                },
                {
                    title: "是否编制",
                    dataIndex: "IS_DRAW_UP",// 是  = 10,   否  20 
                    render: (value) => {
                        debugger
                        return (value == null || value == undefined) ? '' : (value == 10 ? '是' : '否');
                    },
                },
                {
                    title: "预案编制责任部门",
                    dataIndex: "Nav_Department.NAME"
                },
                {
                    title: "责任人员",
                    dataIndex: "Nav_User.NAME"
                },
                {
                    title: "要求完成时间",
                    dataIndex: "COMPLETE_TIME",
                    render: (value, record, index) => {
                        return (value != null && value.length > 0) ? value.split(' ')[0] : '';
                    },
                },
            ],
            loadParam: {
                PageIndex: 1,
                Limit: 10
            },
            showLoading: false,
            TotalCount: 0,
            PageIndex: 1,
            search: {
                EventTypeNAME: '',//"事件类型"   "Nav_UrgentEvent.Nav_EventType.NAME",
                CoverageInfluenceNAME: '',//"预计影响范围" "Nav_UrgentEvent.Nav_ListArearInfluence.Nav_CoverageInfluence.NAME",
                AREAR_INFLUENCE: '',//"影响范围描述"  Nav_UrgentEvent.AREAR_INFLUENCE
                ACCIDENTCONSEQUENCE: '',//"事故的后果"  Nav_UrgentEvent.ACCIDENT_CONSEQUENCE
                ContingencyTypeNAME: '',//"预案类型"  Nav_ContingencyType.NAME
                DepartmentNAME: '',//"预案编制责任部门" "Nav_Department.NAME"
                UserNAME: '',//"责任人员"  Nav_User.NAME
                COMPLETETIMES: '',//"要求完成时间"  "COMPLETE_TIME"
                COMPLETETIMEE: '',//"要求完成时间"  "COMPLETE_TIME"
            }
        };
    }

    componentDidMount() {
        this.loadData();
    }
    renderSpeedColumn = () => {
        return { className: 'redTableCell' }
    }
    handleSearch = () => {
        this.loadData()
    }
    loadData = (pageIndex, limit) => {

        var orgId = this.props.login ? this.props.login.OrgId : '';
        let json = initFilter(orgId);
        json.PageIndex = pageIndex ? pageIndex : 1
        json.Limit = limit ? limit : 10

        extendInclude(json, 'Nav_UrgentEvent.Nav_EventType')
        extendInclude(json, 'Nav_UrgentEvent.Nav_Department')
        extendInclude(json, 'Nav_UrgentEvent.Nav_ListEventRiskType.Nav_RiskType')
        extendInclude(json, 'Nav_UrgentEvent.Nav_ListArearInfluence.Nav_CoverageInfluence')
        extendInclude(json, 'Nav_UrgentEvent.Nav_User')
        extendInclude(json, 'Nav_User')
        extendInclude(json, 'Nav_Department')
        extendInclude(json, 'Nav_ContingencyType')
        json.Sort = 'Nav_UrgentEvent.Nav_EventType.NAME'
        extendRule(json, 'ENABLE_STATUS', 1, 0);

        if (this.state.search.EventTypeNAME != null && this.state.search.EventTypeNAME.length > 0)
            extendRule(json, 'Nav_UrgentEvent.Nav_EventType.NAME', 9, this.state.search.EventTypeNAME);
        if (this.state.search.CoverageInfluenceNAME != null && this.state.search.CoverageInfluenceNAME.length > 0)
            extendRule(json, 'Nav_UrgentEvent.Nav_ListArearInfluence.Nav_CoverageInfluence.NAME', 9, this.state.search.CoverageInfluenceNAME);
        if (this.state.search.AREAR_INFLUENCE != null && this.state.search.AREAR_INFLUENCE.length > 0)
            extendRule(json, 'Nav_UrgentEvent.AREAR_INFLUENCE', 9, this.state.search.AREAR_INFLUENCE);
        if (this.state.search.ACCIDENTCONSEQUENCE != null && this.state.search.ACCIDENTCONSEQUENCE.length > 0)
            extendRule(json, 'Nav_UrgentEvent.ACCIDENT_CONSEQUENCE', 9, this.state.search.ACCIDENTCONSEQUENCE);
        if (this.state.search.ContingencyTypeNAME != null && this.state.search.ContingencyTypeNAME.length > 0)
            extendRule(json, 'Nav_ContingencyType.NAME', 9, this.state.search.ContingencyTypeNAME);
        if (this.state.search.DepartmentNAME != null && this.state.search.DepartmentNAME.length > 0)
            extendRule(json, 'Nav_Department.NAME', 9, this.state.search.DepartmentNAME);
        if (this.state.search.UserNAME != null && this.state.search.UserNAME.length > 0)
            extendRule(json, 'Nav_User.NAME', 9, this.state.search.UserNAME);
        if (this.state.search.COMPLETETIMES != null && this.state.search.COMPLETETIMES.length > 0) {
            extendRule(json, 'COMPLETE_TIME', 6, this.state.search.COMPLETETIMES);
            extendRule(json, 'COMPLETE_TIME', 4, this.state.search.COMPLETETIMEE);
        }
        this.props.dispatch({
            type: 'app/getDataByPost',
            payload: json,
            onlyData: false,
            url: 'CM/UrgentEventContingencyPlan/OrderPaged',
            onComplete: (ret) => {
                if (ret && ret.IsSuccessful) {
                    this.setState({
                        retData: ret.Data,
                        TotalCount: ret.TotalCount,
                        loadParam: {
                            PageIndex: json.PageIndex,
                            Limit: json.Limit
                        },
                    })
                } else {
                    this.setState({
                        retData: [],
                        TotalCount: 0,
                        loadParam: {
                            PageIndex: json.PageIndex,
                            Limit: json.Limit
                        },
                    })
                }
            }
        });
    }

    showTotal = () => {
        return `共 ${this.state ? this.state.TotalCount : 0} 条`;
    }

    onChangeEventTypeNAME = (val) => {
        this.state.search.EventTypeNAME = val.trim()
    }
    onChangeAREAR_INFLUENCE = (val) => {
        this.state.search.AREAR_INFLUENCE = val.trim()
    }
    onChangeACCIDENTCONSEQUENCE = (val) => {
        this.state.search.ACCIDENTCONSEQUENCE = val.trim()
    }
    onChangeContingencyTypeNAME = (val) => {
        this.state.search.ContingencyTypeNAME = val.trim()
    }
    onChangeDepartmentNAME = (val) => {
        this.state.search.DepartmentNAME = val.trim()
    }
    onChangeUserNAME = (val) => {
        this.state.search.UserNAME = val.trim()
    }
    onChangeCOMPLETETIME = (val) => {
        if (val.length == 2) {
            this.state.search.COMPLETETIMES = new Date(val[0]._d).Format('yyyy-MM-dd')
            this.state.search.COMPLETETIMEE = new Date(val[1]._d).Format('yyyy-MM-dd')
        } else {
            this.state.search.COMPLETETIMES = ''
            this.state.search.COMPLETETIMEE = ''
        }
    }

    render() {
        return (

            <div className="permissionDenyPage__pageWrap___1ziDC">
                <div className="scroll_page" style={{ height: '100px', overflowY: 'hidden' }}>
                    <LocalSearch onSearch={this.handleSearch}>
                        {/* <Form  onSubmit={this.state.search} ></Form> */}
                        <Form.Item label='事件类型'>  <Input key='EventTypeNAME' props='EventTypeNAME' onChange={(evt) => this.onChangeEventTypeNAME(evt.target.value)} />  </Form.Item>
                        {/* <Form.Item label='预计影响范围' style={{ float: 'left' }} > <Input /> </Form.Item> */}
                        <Form.Item label='影响范围描述' style={{ float: 'left' }} > <Input key='AREAR_INFLUENCE' props='AREAR_INFLUENCE' onChange={(evt) => this.onChangeAREAR_INFLUENCE(evt.target.value)} /> </Form.Item>
                        <Form.Item label='事故的后果' style={{ float: 'left' }} > <Input key='ACCIDENTCONSEQUENCE' props='ACCIDENTCONSEQUENCE' onChange={(evt) => this.onChangeACCIDENTCONSEQUENCE(evt.target.value)} /> </Form.Item>
                        <Form.Item label='预案类型' style={{ float: 'left' }} > <Input key='ContingencyTypeNAME' props='ContingencyTypeNAME' onChange={(evt) => this.onChangeContingencyTypeNAME(evt.target.value)} /> </Form.Item>
                        <Form.Item label='预案编制责任部门' style={{ float: 'left' }} > <Input key='DepartmentNAME' props='DepartmentNAME' onChange={(evt) => this.onChangeDepartmentNAME(evt.target.value)} /> </Form.Item>
                        <Form.Item label='责任人员' style={{ float: 'left' }} > <Input key='UserNAME' props='UserNAME' onChange={(evt) => this.onChangeUserNAME(evt.target.value)} /> </Form.Item>
                        <Form.Item label='要求完成时间' style={{ float: 'left' }} >
                            <RangePicker key='COMPLETETIME' props='COMPLETETIME' onChange={(evt) => this.onChangeCOMPLETETIME(evt)} /> {/**/}
                        </Form.Item>
                        {/* <div className='opt-search__tool-wrap'>
                            <div className='opt-search__children'>{iconEle}</div>
                        </div> */}
                    </LocalSearch>
                </div>

                <div style={{ backgroundColor: "rgb(255, 255, 255)", width: "100%", top: "0", marginTop: '15px', bottom: "0", left: "0", right: "0", borderWidth: "1px", }}  >
                    <Row gutter={10} style={{ marginTop: "14px" }}>
                        <Col span={22} style={{ height: "100%", width: "100%" }}>
                            <div style={{ margin: "0 10px 0 10px" }}   >
                                <Table style={{ marginTop: '10px' }}
                                    dataSource={this.state.retData}
                                    columns={this.state.columns}
                                    pagination={false}
                                    bordered
                                    loading={this.state.showLoading}
                                    size="small"
                                    rowKey="1"
                                />

                                <div style={{ textAlign: 'center', margin: '30px 0 30px 0' }}>
                                    <Pagination size="small" showTotal={() => this.showTotal()} total={this.state.TotalCount} showSizeChanger showQuickJumper
                                        current={this.state.loadParam ? this.state.loadParam.PageIndex : 0}
                                        onChange={(pageIndex, pageSize) => this.loadData(pageIndex, pageSize)}
                                        onShowSizeChange={(pageIndex, pageSize) => this.loadData(pageIndex, pageSize)} />
                                </div>
                            </div>
                        </Col>
                    </Row>
                    <br />
                </div>
            </div>
        );
    }
}
export default connect(({ login, app }) => ({ login, app }))(CM041LibShow);