import React, { useState, useEffect, useRef, Component } from 'react'
import { connect } from 'dva'
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extendOrder, extend } from "../../../utils/common"
import { Table, Row, Col, Button, Select,DatePicker ,Form,Spin,message,Modal} from 'antd';
import echarts from 'echarts';
import moment from 'moment'
import FormPage from '../../../components/FormPage'
import { IFComponent } from '@woowalker/feui';
import DropDownPagination from '../../common/DropDownPaginationEx'
import XLSX from 'xlsx';
const { Option } = Select;
class BI030FormRunAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startTime:moment(this.getDate(), 'YYYY-MM-DD 00:00:00'),//moment(new Date()).add(-1, "month").format('YYYY-MM-DD 00:00:00'),
      endTime:moment(this.getEndDate(), 'YYYY-MM-DD 23:59:59'),
      mouldSelect:'',
      visible:false,
      pagination: {},
      tmpData:[],
      departData:[],
      retData:[],
      columns:[
        {
            width: "100px",
            title: '组织',
            dataIndex: 'MOUDLE_NAME',
            key: 'MOUDLE_NAME',
          },
          {
            width: "80px",
            title: '总任务数',
            dataIndex: 'TOTAL_QTY',
            key: 'TOTAL_QTY',
            render: (text, record) => (
              <span>
                <a onClick={() => this.showEditModal(record,'')}>{record.TOTAL_QTY}</a>
              </span>
            ),
          },
          {
            width: "80px",
            title: '正常已办',
            dataIndex: 'FINISH_QTY',
            key: 'FINISH_QTY',
            render: (text, record) => (
              <span>
                <a onClick={() => this.showEditModal(record,1)}>{record.FINISH_QTY}</a>
              </span>
            ),
          },
          {
            width: "80px",
            title: '超时已办',
            dataIndex: 'OVER_FINISH_QTY',
            key: 'OVER_FINISH_QTY',
            render: (text, record) => (
              <span>
                <a onClick={() => this.showEditModal(record,2)}>{record.OVER_FINISH_QTY}</a>
              </span>
            ),
          },
          {
            width: "80px",
            title: '进行中',
            dataIndex: 'UNFINISH_QTY',
            key: 'UNFINISH_QTY',
            render: (text, record) => (
              <span>
                <a onClick={() => this.showEditModal(record,0)}>{record.UNFINISH_QTY}</a>
              </span>
            ),
          },
          {
            width: "80px",
            title: '超期未完成',
            dataIndex: 'OVER_UNFINISH_QTY',
            key: 'OVER_UNFINISH_QTY',
            render: (text, record) => (
              <span>
                <a onClick={() => this.showEditModal(record,4)}>{record.OVER_UNFINISH_QTY}</a>
              </span>
            ),
          },
          {
            width: "80px",
              title: '完成率',
              dataIndex: 'FINISH_RATE',
              key: 'FINISH_RATE',
            },
            {
              width: "80px",
            title: '及时完成率',
            dataIndex: 'NORMAL_FINISH_RATE',
            key: 'NORMAL_FINISH_RATE',
          },
            // {
            //     width: "100px",
            //   title: '质量分析(班前会)',
            //   dataIndex: 'REMARK',
            //   key: 'REMARK',
            // }
    ]
    };
  };
  handleCancel = () => { // 退出弹窗
    let newtmpData = { ...this.state.tmpData }
    newtmpData["data"]= '';
    newtmpData.formCode = '';
    this.setState({
      visible:false,
      tmpData: [],//newtmpData
    })
  }
  showEditModal = (record,temp) => {

    const newtmpData = {
      data: {
        MOUDLE_NAME: record.MOUDLE_NAME,
        FORM_NAME: temp,
        startTime:moment(this.state.startTime).format('YYYY-MM-DD HH:mm:ss'),
        endTime:moment(this.state.endTime).format('YYYY-MM-DD HH:mm:ss'), onCancel: this.handleCancel,  noticeTitle: "任务明细", 
        homeReload: true
      },
      formCode: 'PF141',
    }
    this.setState({
      noticeTitle: "任务明细",
      tmpData: newtmpData,
      currActivatedMenu: ''
    }, () => this.setState({
      visible: true
    }));
  }

  componentDidMount() {
    this.getBaseInfoData();
  };
  //获取数据
  getBaseInfoData = () => {
    let retDataTemp=[]
    const{retData,startTime,endTime}=this.state
    let time=startTime
    if(startTime === null)
    {
      message.error('请选择开始时间');
    }
    let time2=endTime
    if(endTime === null)
    {
      message.error('请选择结束时间');
    }
    
    {
      time=moment(startTime).format('YYYY-MM-DD HH:mm:ss')
      time2=moment(endTime).format('YYYY-MM-DD HH:mm:ss')
      const json = initFilter(this.props.login.OrgId,this.state.mouldSelect,'','','',time,time2,this.state.mouldSelect)
      //extendOrder(json, "NUM", 0);
      this.props.dispatch({
        type: 'app/getDataByPost',
        url: 'BI/BIStatiscialAnalysisController/GetFormRunDay',//BI/FormRunAnalysis/OrderEntities
        payload: json,
        onlyData: false,
        onComplete: (ret) => {
          if(ret && ret.Data)
          {
           
            this.setState({retData :ret.Data})
          }
        }
      })
    }
   
  };
  startChange=(value)=>{
    this.setState({
      startTime:value
    })
  };
  endChange=(value)=>{
    this.setState({
      endTime:value
    })
  };
  handleChange=(value)=>{
    this.setState({
      mouldSelect: value
    })
  }
  onSelectDepartment=(departData,record)=>{
    if (departData && departData.data && departData.data.length > 0) {
      this.setState({
        departData: {
          ...this.state.departData,
          // DEPARTMENT_ID: departData.data[0],
          Nav_Department: { NAME: departData.record.NAME }
        },
        DEPARTMENT_ID: departData.data[0],
      })
    }
    else {
      this.setState({
        departData: {
          ...this.state.departData,
          Nav_Department: { NAME: null },
        },
        DEPARTMENT_ID: null,
      })
    };
  }
  getDate=()=>{
    let  date = new Date()
    let  y = date.getFullYear()
    let  m = date.getMonth() + 1
    let  d = date.getDate();
    //  当前日期
    let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
  
         let pastDate = moment(nowDate).add(-1, "day").format('YYYY-MM-DD 00:00:00')
        return pastDate;
}
getEndDate=()=>{
  let  date = new Date()
  let  y = date.getFullYear()
  let  m = date.getMonth() + 1
  let  d = date.getDate();
  //  当前日期
  let nowDate = y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
       let pastDate = moment(nowDate).add(-1, "day").add(23,'hour').add(59,'m').add(59,'s')//format('YYYY-MM-DD 23:59:59')
      return pastDate;
}

onTableBtnExport() {
  console.log(this.state.retData)
  if (this.state.retData.length == 0) {
    message.warning("没有数据无需导出!");
    return;
  }
      //excel的表头
      const tHeader = ["组织","总任务数","正常已办","超时已办","未完成","完成率","及时完成率"];
      // 字段和table表格中对应
      const fitlerVal = ["MOUDLE_NAME","TOTAL_QTY","FINISH_QTY","OVER_FINISH_QTY","UNFINISH_QTY","FINISH_RATE","NORMAL_FINISH_RATE"];
      const res = this.state.retData.map((v) => fitlerVal.map((j) => v[j]));
      // const jsonWorkSheet = XLSX.utils.json_to_sheet(tHeader,res,"矿山安全生产标准化系统运行情况报表.xlsx");
      const jsonWorkSheet = XLSX.utils.json_to_sheet(res,tHeader);
      jsonWorkSheet.A1.v='组织';
      jsonWorkSheet.B1.v='总任务数';
      jsonWorkSheet.C1.v='正常已办';
      jsonWorkSheet.D1.v='超时已办';
      jsonWorkSheet.E1.v='未完成';
      jsonWorkSheet.F1.v='完成率';
      jsonWorkSheet.G1.v='及时完成率';
      // jsonWorkSheet.H1.v='质量分析(班前会)';
      const sheetName = "矿山安全生产标准化系统运行情况报表";
      const workBook = {
        SheetNames: [sheetName],
        Sheets: {
          [sheetName]: jsonWorkSheet,
        }
      };
      //  const workBook = XLSX.utils.table_to_book("矿山安全生产标准化系统运行情况报表",jsonWorkSheet);
      return XLSX.writeFile(workBook, "矿山安全生产标准化系统运行情况报表.xlsx");
}

  render() {
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }
    const {loading} = this.props;
    
    return (
      <div>
        <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className='antd-modal-fullscreen'
            closeModal={this.closeModal}
          // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
        <Spin spinning={loading.global}>
        <h1 style={{ textAlign: "center" }}>矿山安全生产标准化系统运行情况报表</h1>
        <Row style={{width:"1250px",margin:"auto"}}>
        <Col span={5}>
          <Form.Item
                  label={'组织层级：'}
                  {...formItemLayout}
                >
                   <Select 
                    // defaultValue="风险管理"
                    style={{width:'180px'}}
                    onChange={this.handleChange}
                    >
                        <Option value="2">班组级</Option>
      <Option value="1">车间级</Option>
      <Option value="0">部门级</Option>
      <Option value="3">公司级</Option>
                    </Select>
                </Form.Item>
           </Col>
          <Col span={5} style={{ marginLeft: "10px" }}> 
          <Form.Item
                  label={'开始时间：'}
                  {...formItemLayout}
                >
                   <DatePicker showTime 
                  //  defaultValue={moment(this.state.startTime, 'YYYY-MM-DD 00:00:00')}
                   value={this.state.startTime} 
                   format="YYYY-MM-DD HH:mm:ss"  onChange={this.startChange}/>
                </Form.Item>
               
          </Col>
         
          <Col span={5} style={{ marginLeft: "10px" }}>
          <Form.Item
                  label={'结束时间：'}
                  {...formItemLayout}
                >
                   <DatePicker showTime 
                    // defaultValue={moment(this.state.endTime, 'YYYY-MM-DD 23:59:59')}
                   value={this.state.endTime}
                   format="YYYY-MM-DD HH:mm:ss"  onChange={this.endChange}/>
                </Form.Item>
           </Col>
          <Col span={1} style={{ marginLeft: "20px" }}><Button type='primary' onClick={() => this.getBaseInfoData()}>查询</Button></Col>
          <Col span={1} style={{ marginLeft: "20px" }}><Button icon="export" onClick={() => this.onTableBtnExport()}>导出</Button></Col>
        </Row>
        <Row style={{ marginTop: "14px" }}>
          <div id="exportToExcel">
          <Table style={{ width:"1250px",margin:"auto",alignContent:"center",backgroundColor:"white"}}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                bordered
                loading={this.state.showLoading}
                size="small"
                rowKey="2"
              />
          </div>
              
        </Row>
        {/* <Row>
        <h5 style={{ textAlign: "center" }}>数据统计截止到{this.state.modifyTime}</h5>
        </Row> */}
        </Spin>
      </div>
    )
  }
}
export default connect(({ login, app,loading }) => ({ login, app,loading }))(BI030FormRunAnalysis)