import React from 'react'
import { connect } from 'dva'
import { initFilter, extendRule, extendOrder } from "../../../utils/common"
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
import { Table, Button,  Row, Col,Modal ,Icon} from 'antd';
import echarts from 'echarts';
import styles from '../HI/StepForm.css';
import moment from 'moment'
import { T } from 'antd/lib/upload/utils';
import FormPage from '../../FormPage'

class BI020ApproveAnalysis extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      noticeTitle: '',
      tmpData: {},
      tableKey: "1",
        timeType: 5,
        totalCount:0,
        finishCount:0,
        overtimeCount:0,
        unfinishCount:0,
        dtotalCount:0,
        dfinishCount:0,
        dovertimeCount:0,
        dunfinishCount:0,
        drate:'0%',
        dnormalRate:'0%',
        weekColor:'black',
        monthColor:'orange',
        threeMonthColor:'black',
        sixMonthColor:'black',
        yearColor:'black',
        retData:[],
        groupData:[],
        detailData:[],
        newData:[],
        detailDataH:[],
        displayHr:'none',
        displaydetail:'none',
        columns: [
            {
                width: "100px",
                title: '组织',
                dataIndex: 'NAME',
                key: 'NAME',
                render: (text, record) => (
                  <div>{(record &&record.USER_NAME)  ? record.NAME : <span style={{color:'red'}}>{record.NAME}</span>}</div>
                ),
              },
              {
                width: "50px",
                title: '负责人',
                dataIndex: 'USER_NAME',
                key: 'USER_NAME'
              },
              {
                width: "50px",
                title: '分管领导',
                dataIndex: 'CHARGE_NAME',
                key: 'CHARGE_NAME'
              }
        ],
        detailColumns: [
          // {
          //     width: "55px",
          //     title: '序号',
          //     dataIndex: 'NUM',
          //     key: 'NUM',
          //   },
            {
              width: "50px",
              title: '层级',
              dataIndex: 'DEPARTMENT_NAME',
              key: 'DEPARTMENT_NAME',
              // render: (text, record) => (
              //   <span>
              //     <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
              //   </span>
              // ),
            },
            {
              width: "100px",
              title: '审批角色',
              dataIndex: 'APPROVE_ROLE_NAME',
              key: 'APPROVE_ROLE_NAME'
            },
            {
            //   width: "60px",
              title: '人员信息',
              dataIndex: 'USER_INFO',
              key: 'USER_INFO',
              render:(text,record)=>{
                if(text.indexOf("未设置当前角色")){
                  text.replace("未设置当前角色", "<span style={{color:'red'}}>未设置当前角色</span>")
                }
                return <div dangerouslySetInnerHTML={{__html: text}}></div>;
            },
              // render: (text, record) => (
               
              //   <div dangerouslySetInnerHTML={{__html: record.USER_INFO}}></div>
              // ),
            },
      ],
      };
  };

  componentDidMount() {
    this.loadData()
  };
  showEditModal = (departmentId, departmentName) => {
    const newtmpData = {
      data: {
        id: departmentId, name: departmentName, onCancel: this.handleCancel, tableKey: this.state.tableKey,
        homeReload: true
      },
      formCode: "BI007_RUNANALYSIS",
    }
    this.setState({
      id: departmentId,
      name: departmentName,
      noticeTitle: departmentName+"安全生产标准化运行情况",
      tmpData: newtmpData,
      currActivatedMenu: ''
    }, () => this.setState({
      visible: true
    }));
  }
  showFormModal=(mouldName)=>{
    const newtmpData = {
      data: {
        name: mouldName, onCancel: this.handleCancel, tableKey: this.state.tableKey,
        homeReload: true
      },
      formCode: "BI008_RUNANALYSIS",
    }
    this.setState({
      name: mouldName,
      noticeTitle: mouldName+"安全生产标准化运行情况",
      tmpData: newtmpData,
      currActivatedMenu: ''
    }, () => this.setState({
      visible: true
    }));
  }
  //加载数据赋值
  loadData = () => {
    this.getDepartment();
  }
 
 getDepartment=()=>{
    var orgId = this.props.login ? this.props.login.OrgId : '';
    const jsonTemp = initFilter(orgId)
    extendRule(jsonTemp);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: jsonTemp,
      url: 'BI/BIStatiscialAnalysisController/GetDepartmentInfos',
      onComplete: (ret) => {
          if (ret) {
            this.setState({
                retData: ret.retData,
                detailData: ret.retDataApprove,
              });
           
          }
      }
  })
 }
  closeModal = () => { // 退出弹窗
    this.clearData();
  }
  clearData = () => {
    let newtmpData = { ...this.state.tmpData }
    newtmpData["data"].id = '';
    newtmpData["data"].homeReload = false;
    newtmpData.formCode = '';
    this.setState({
      visible: false,
      tmpData: newtmpData,
    })
  }
  handleCancel = () => { // 退出弹窗
    this.clearData();
  }
  render() {
    const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,
        weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,
      } = this.state;
    let allFinishRate=totalCount ===0?0:((finishCount+overtimeCount)/totalCount * 100).toFixed(0);
    let finishRate=totalCount ===0?0:(finishCount/totalCount * 100).toFixed(0);
    return <div>
      {/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
       <div style={{backgroundColor:'white',width:'1200px',top:'0',bottom:'0',left:'0',right:'0',margin:'auto',borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px',}}>
       <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>
        <h1 style={{ textAlign: "center",marginTop:'30px',fontWeight:'bold'}}>审批角色分析</h1>
        <Row style={{marginTop:"10px"}}>
          <Col span={12}>
            <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 各部门车间班组负责人、分管领导详情</h2>
            <Table style={{marginLeft:"30px",marginRight:"10px",textAlign:'center'}}
            // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
              />
               </Col>
               <Col span={12}>
            <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"10px"}}><Icon type="appstore"/> 审批角色人员信息</h2>
            <Table style={{marginLeft:"10px",marginRight:"30px",textAlign:'center'}}
            // scroll={{ y: 400 }}
            dataSource={this.state.detailData}
            columns={this.state.detailColumns}
                pagination={false}
                loading={false}
                size="small"
              />
              </Col>
        </Row>
      </div>
    </div >
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI020ApproveAnalysis)