import React from 'react'
import { connect } from 'dva'
import { initFilter, extendRule, extendOrder } from "../../../utils/common"
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow"
import { Table, Button,Input,  Row, Col,Modal ,Icon,Progress} 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 BI011FormRunAnalysis extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading:false,
      noticeTitle: '',
      tmpData: {},
      tableKey: "1",
      startTime: moment(new Date().setDate(1)).subtract(5,'months').format("YYYY-MM-DD"),
        endTime:moment(new Date()).format("YYYY-MM-DD"),
        timeType: 5,
        totalCount:0,
        finishCount:0,
        overtimeCount:0,
        unfinishCount:0,
        dtotalCount:0,
        dfinishCount:0,
        dovertimeCount:0,
        dunfinishCount:0,
        inputText:this.props.login.user.NAME,
        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: "30px",
                title: '月份',
                dataIndex: 'MONTHStr',
                key: 'MONTHStr',
                // render: (text, record) => (
                //   <span>
                //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                //   </span>
                // ),
              },
              {
                width: "30px",
                title: '任务数',
                dataIndex: 'TOTAL_QTY',
                key: 'TOTAL_QTY'
              },{
                width: "30px",
                  title: '完成率',
                  dataIndex: 'FINISH_RATE',
                  key: 'FINISH_RATE',
                  render: (text, record) => (
                  
                    <Progress percent={record.FINISH_RATE.split('%')[0]}  />
                    // <span>
                    //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                    // </span>
                  ),
                },
                {
                    width: "30px",
                  title: '及时完成率',
                  dataIndex: 'NORMAL_FINISH_RATE',
                  key: 'NORMAL_FINISH_RATE',
                  render: (text, record) => (
                    <Progress percent={record.NORMAL_FINISH_RATE.split('%')[0] }  strokeColor={{ from: 'rgba(82, 196, 26)', to: 'rgba(82, 196, 26)' }}  />
                    // <span>
                    //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
                    // </span>
                  ),
                }
        ],
        detailColumns: [
          // {
          //     width: "55px",
          //     title: '序号',
          //     dataIndex: 'NUM',
          //     key: 'NUM',
          //   },
            {
              width: "100px",
              title: '模块名称',
              dataIndex: 'MOUDLE_NAME',
              key: 'MOUDLE_NAME',
              // render: (text, record) => (
              //   <span>
              //     <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
              //   </span>
              // ),
            },
            {
              width: "60px",
              title: '总任务数',
              dataIndex: 'TOTAL_QTY',
              key: 'TOTAL_QTY'
            },
            {
              width: "60px",
              title: '正常已办',
              dataIndex: 'FINISH_QTY',
              key: 'FINISH_QTY'
            },
            {
              width: "60px",
              title: '超时已办',
              dataIndex: 'OVER_FINISH_QTY',
              key: 'OVER_FINISH_QTY'
            },
            {
              width: "50px",
              title: '未完成',
              dataIndex: 'UNFINISH_QTY',
              key: 'UNFINISH_QTY',
            },
            {
              width: "50px",
                title: '完成率',
                dataIndex: 'FINISH_RATE',
                key: 'FINISH_RATE',
              },
              {
                width: "70px",
              title: '及时完成率',
              dataIndex: 'NORMAL_FINISH_RATE',
              key: 'NORMAL_FINISH_RATE',
              render: (text, record) => (
                <span>
                 {record.NORMAL_FINISH_RATE}{"%"}
                </span>
              ),
            }
      ],
      };
  };

  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
    }));
  }
  // showEditModal = (dataId, formCode, TaskID, title, taskCode) => {

  //   const newtmpData = {
  //     data: {
  //       id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
  //       homeReload: true
  //     },
  //     formCode: formCode,
  //   }
  //   this.setState({
  //     noticeTitle: title,
  //     taskCode: taskCode,
  //     tmpData: newtmpData,
  //     currActivatedMenu: ''
  //   }, () => this.setState({
  //     visible: true
  //   }));
  // }
   
  //加载数据赋值
  loadData = () => {
    // this.ksRun();
    this.getMould(this.props.login.user.NAME);
    // this.getDepartment();
  }
  //矿山
  ksRun = (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data) {
      let month = [];
      let company = [];
      let department = [];
      data.forEach(item => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
      })
      let myChart = echarts.init(document.getElementById('ksRun'));
      myChart.setOption({
        title: {
            text: "任务及时完成率（近6个月）",
            left: 'center',
            top:'2%'
          },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let temp=''
            params.forEach(t=>{
                temp=temp+t.marker + t.seriesName +":"+t.value+"%"+'<br />';
               
            })
            return temp;
          }
        },
        legend: {
          // data: ['部门'],
          data: ['完成率', '及时完成率'],
          bottom: '5px'
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '12%',
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: month,
          axisLine: {
            show: false,
            // lineStyle: {
            //   color: 'rgba(192, 192, 102)'
            // }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#000',
            rotate: 40,
            formatter: function (value) { // 自定义文字超出部分 ...
              if (value.length > 10) {
                return `${value.slice(0, 10)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
        axisLabel: {
            formatter: function (val) {
              return (val)+ '%';
            }
          },
        },
        series: [
          {
            name: '完成率',
            type: 'line',
            color: '#4b9bf3',
            data: company,
            smooth: true
          },
          {
            name: '及时完成率',
            type: 'line',
            color: '#FCD149',
            data: department,
            smooth: true
          },
        ]
      })
    }
  }
  getMould=(inputText)=>{
    this.setState({loading:true
  })
    var orgId = this.props.login ? this.props.login.OrgId : '';
    let json = initFilter(orgId,inputText,"","","",this.state.startTime,this.state.endTime);
            this.props.dispatch({
              type: 'app/getDataByPost',
              payload: json,
              url: 'BI/BIStatiscialAnalysisController/GetPersonAnalyze',
              onComplete: (ret) => {
                if (ret) {
                    this.setState({
                        retData:ret.groupData,
                        totalCount:ret.TotalCount,
                        finishCount:ret.doneCount,
                        overtimeCount:ret.timeOverCount,
                        unfinishCount:ret.unfinishCount,
                        dovertimeCount:ret.timeOverWaitCount,
                        loading:false
                    })
                    this.ksRun(ret.groupDataLine);
                }
                else
                {
                  this.setState({
                    retData:[],
                    totalCount:0,
                    finishCount:0,
                    overtimeCount:0,
                    unfinishCount:0,
                    dovertimeCount:0,
                    loading:false
                })
                }
              }
              })
 }
 
  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();
  }
  handleSearch = (evt) => {
    const { value } = evt.target
    this.setState({ inputText: value ? value : this.props.login.user.NAME })
  }
  render() {
    const { startTime, endTime,finishCount,overtimeCount,totalCount,unfinishCount,inputText,
        weekColor,monthColor,threeMonthColor,sixMonthColor,yearColor,dovertimeCount
      } = this.state;
    let allFinishRate=(totalCount ===0||totalCount==undefined) ?0:((finishCount+overtimeCount)/totalCount * 100).toFixed(1);
    let finishRate=(totalCount ===0||totalCount==undefined)?0:(finishCount/totalCount * 100).toFixed(1);
    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", verticalAlign:"Bottom",marginTop:'20px',marginBottom:'20px',fontWeight:'bold'}}>任务完成情况统计分析(个人)</h1>
        <Row style={{ fontSize:'15px',marginTop:'10px',marginLeft:"30px",height:"35px"}}> 
        <span style={{marginLeft:"10px",width:'100px'}}><b>姓名：</b>{inputText}</span>
        <span style={{marginLeft:"30px",width:'100px'}}><b>统计区间：</b>{startTime} - {endTime}</span>
        <span style={{float:"right",marginRight:'30px'}}><Input onChange={this.handleSearch} style={{width:'150px',marginRight:'10px'}} defaultValue={this.props.login.user.NAME}></Input><Button onClick={() => this.getMould(inputText)} style={{width:'80px'}} type='primary'>查询</Button></span>
        </Row>
        
        <hr style={{width:"98%"}}></hr>
        <br></br>
        <span style={{width:"800px",marginLeft:"30px",marginBottom:"20px"}}>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'black'}}>{totalCount?totalCount:0}</span></Button>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'red'}}>{unfinishCount?unfinishCount:0}</span></Button>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{dovertimeCount?dovertimeCount:0}</span></Button>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>已办事项<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'green'}}>{(finishCount+overtimeCount)?(finishCount+overtimeCount):0}</span></Button>
          <Button style={{width:"130px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{allFinishRate?allFinishRate:0}%</span></Button>
          <Button style={{width:"140px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{finishRate?finishRate:0}%</span></Button>
        </span>
        {/* <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr> */}
        <Row style={{marginTop:"20px"}}>
            <Col span={9}>
            {/* <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 部门统计分析</h2> */}
            <Table style={{width:'400px',marginLeft:"30px",textAlign:'center',marginBottom:'30px'}}
            // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </Col>
            <Col span={14}>
            {/* <h2 style={{textAlign:'center',fontWeight:'bold'}}>任务及时完成率（近12个月）</h2> */}
            <div id="ksRun" style={{width:'100%', height: '500px',marginLeft:"20px" ,marginRight:"30px" ,backgroundColor:"white",borderStyle:'solid',borderColor:'#ccc',borderWidth:'1px'}}></div>
            <br></br>
            <span style={{width:'100%'}}>* 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}<br></br><br></br></span>
            
            </Col>
        </Row>
      </div>
    </div >
  }
}
export default connect(({ login, app,loading }) => ({ login, app ,loading}))(BI011FormRunAnalysis)