import React, { useState, useEffect, useRef, Component } from 'react'
import { connect } from 'dva'
import FormPage from '../../FormPage'
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extend } from "../../../utils/common"
import { Table, Card,Modal,List,Avatar, Row, Col, Icon, Button, Input,Collapse , DatePicker, Form, Select, notification, Divider,Tabs,Tag   } from 'antd';
import '../../../routes/home.less'
import config from '../../../config';
const { TabPane } = Tabs;
const { Panel } = Collapse;
const RangePicker = DatePicker.RangePicker
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
class RiskSubmit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        visible: false,
        taskCode:'BS060',
        noticeTitle: '新增-隐患上报记录',
      retData: [],
      pagination: {},
      tmpData: {},
      type:"1",
      querySearch: {},//搜索集合
    //   tableData: [{//工作台四个展示模块
    //     key: '1',
    //     // bgImg: backlog,
    //     title: '待办事项',
    //     total: '0',
    //     // iconImg: backlog_i,
    //     iconDisplay: 'block',
    //   }, {
    //     key: '2',
    //     // bgImg: flow,
    //     title: '已办事项',
    //     total: '0',
    //     // iconImg: flow_i,
    //     iconDisplay: 'none',
    //   },
    //   //  {
    //   //   key: '3',
    //   //   bgImg: finished,
    //   //   title: '今日新增',
    //   //   total: '0',
    //   //   iconImg: finished_i,
    //   //   iconDisplay: 'none',
    //   // }
    //   //   ,
    //   {
    //     key: '4',
    //     // bgImg: remind,
    //     title: '待办超时',
    //     total: '0',
    //     // iconImg: remind_i,
    //     iconDisplay: 'none',
    //   }
    //   ],
    };
  };

  componentDidMount() {
    this.getBaseInfoData(1, 10000000);
  };
  componentDidUpdate(preProps ){
    // if(preProps.type!==this.props.type){
    //    //放置刷新函数
    // }
 }
   //获取数据
   getBaseInfoData = (pagination, limit) => {
    const current = pagination ? pagination.current : 1
    const json = initFilter(this.props.login.OrgId, "", "CHECKTIME", 1, current)
    extendInclude(json, "Nav_Check")
    extendInclude(json, "Nav_User")
    // extendRule(json, 'SOURCE_FORMCODE', 9, "FO003")
    const querySearch = this.state.querySearch;
    for (var item in querySearch) {
      if (item == 'searchName') {
        extendRule(json, 'NAME', 9, querySearch[item])
      }
      // if (item == 'searchCode') {
      //   extendRule(json, 'CODE', 9, querySearch[item])
      // }
      if (item == 'startTime1') {
        extendRule(json, 'CHECKTIME', 6, querySearch[item])
      }
      // if (item == 'startTime2') {
      //   extendRule(json, 'CHECKTIME', 4, querySearch[item])
      // }
      // if (item == 'endTime1') {
      //   extendRule(json, 'MEETING_TIME', 6, querySearch[item])
      // }
      // if (item == 'endTime2') {
      //   extendRule(json, 'MEETING_TIME', 4, querySearch[item])
      // }
    }
    json.Limit = limit;
    // json.Parameter1 = key;//1待办事项2已办事项3今日新增4待办超时
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BS/RiskSubmit/OrderPaged',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data) {
            this.setState({
              retData: re.Data,
            })
        }
      }
    })
  };
  showEditModal = (dataId, formCode, title, taskCode) => {
    const newtmpData = {
      data: { id: dataId, onCancel: this.handleCancel, taskCode: taskCode, homeReload: true },
      formCode: formCode,
    }
    this.setState({
      noticeTitle: title,
      taskCode: taskCode,
      tmpData: newtmpData
    }, () => this.setState({
      visible: true
    }));
  }
  
  handleCancel = () => { // 退出弹窗
    this.getBaseInfoData(1, 10000000);
    this.clearData();
  }
  closeModal = () => { // 退出弹窗
    this.clearData();
  }
  clearData = () => {
    let newtmpData = { ...this.state.tmpData }
    newtmpData["data"].id = '';
    newtmpData["data"].homeReload = false;
    this.setState({
      visible: false,
      tmpData: newtmpData,
    })
  }
  // onTabChange = (tabKey) => {
  //   this.getBaseInfoData(1, tabKey, 500);
  //   this.setState({
  //     type:tabKey
  //   })
  // }
  handleActiveMenu = () => {
    window.location.replace(config.guideH5Host)
    // let host= window.location.origin
    // window.location.replace(host+'/#/HomeMobileNew')
  }
  // input输入
  vauleChange = (e) => {
    const { querySearch } = this.state
    if (e.target.value) {
      switch (e.target.name) {
        case 'searchName':
          querySearch[e.target.name] = e.target.value
          this.setState({ querySearch })
          break
      }
    } else {
      this.setState({ querySearch: {} })
    }
  }
  // 开始时间
  startChange = (dates, dateStr) => {
    const { querySearch } = this.state
    if (dates === null) {
      // querySearch['startTime1'] = ''
      // querySearch['startTime2'] = ''
      this.setState({
        querySearch: {}
      })
      return;
    }
    querySearch.startTime1 = dates.format("YYYY-MM-DD 00:00:00")
    this.setState({
      querySearch
      // visibleStartTime: dates
    }, () => {
    })
  }
    // 搜索
    handleSearch = () => {
      this.getBaseInfoData(1, 10000000);
    }
  render() {
    const onChange = (key) => {
      console.log(key);
    };
    return (
      <>
       <div style={{ backgroundColor: '#fff', padding: '20px 10px' }}>
       <div style={{ display: 'inline-block' }}>
          <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle + "(" + this.state.taskCode + ")"}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            style={{
              maxWidth: "100vw",
              top: -10,
              paddingBottom: 0,
              position: 'fixed',
            }}
            bodyStyle={{
              maxHeight:"100vh",
              height: "calc(100vh - 55px )", //-53
              overflowY: "auto"
            }}
            width="100vw"
            // className='antd-modal-fullscreen2'
            closeModal={this.closeModal}
          // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
        </div>
       <Row>
        <Button style={{float: "left"}} type="link" onClick={()=>this.handleActiveMenu()}>返回首页</Button>
        <Button style={{float: "right"}} type="link" onClick={()=>this.showEditModal(null, "BS060", "新增-隐患上报记录", "BS060")}>新增</Button>
       </Row>
       <br></br>
       <Collapse onChange={onChange}>
      <Panel header="按条件搜索" key="1">
      <Form>
       <Row>
       <Col>
                    <Form.Item
                      label={'隐患名称'}
                      {...formItemLayout}
                    >
                      <Input
                        value={this.state.querySearch.searchName}
                        placeholder={'请输入隐患上报名称'}
                        name="searchName"
                        onChange={this.vauleChange} />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      label={'检查时间'}
                      {...formItemLayout}
                    >
                      <DatePicker
                        // value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
                        onChange={this.startChange} />
                    </Form.Item>
                  </Col>
                  {/* <Col>
                    <Form.Item
                      label={'结束时间'}
                      {...formItemLayout}
                    >
                      <RangePicker
                        value={this.state.visibleEndTime}
                        onChange={this.endChange} />
                    </Form.Item>
                  </Col> */}
                  <Col>
                    <Button type={'primary'} icon={'search'} onClick={() => this.handleSearch()}>搜索</Button>
                  </Col>
       </Row>
       </Form>
      </Panel>
    </Collapse>
       
       <br></br>
       <Row justify='center' style={{marginTop: "14px", minHeight: '120px',height: 'calc((100% - 250px) / 2)' }}>
 
    {/* <Tabs defaultActiveKey={this.state.type}  style={{backgroundColor:'#fff'}} onChange={this.onTabChange}>
      <TabPane tab="待办事项" key="1"> */}
      <List 
             pagination={{
              onChange: page => {
                console.log(page);
              },
              pageSize: 10,
            }}
    itemLayout="horizontal"
    dataSource={this.state.retData}
    renderItem={record => (
      <List.Item
      actions={[<a key="list-loadmore-edit" onClick={() => this.showEditModal(record.ID, "BS060", "修改-隐患上报记录", "BS060")} style={{color:"#f50" }}>修改</a>]}
      // extra={
      //    this.ShowState(record,"1")
      // }
      >
        <List.Item.Meta
          // avatar={<Avatar src="https://joeschmoe.io/api/v1/jon" />}
          //
          title={<span> <a>{record.NAME}</a></span>}
          description={<span> {"检查任务:"+record.Nav_Check?.NAME}<br/>{"检查时间:"+record.CHECKTIME}
          <br/>{"上报人:"+record.Nav_User.NAME}
          </span>}
        />
      </List.Item>
    )}
  />
      {/* </TabPane> */}
    {/* </Tabs> */}
    </Row>
    </div>
      </>
    )
  }
}
export default connect(({ login }) => ({ login }))(RiskSubmit)
