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 { Table, Row, Col, Button, Select, DatePicker, message } from 'antd';
import echarts from 'echarts';
import moment from 'moment'
const { Option } = Select;
class TrainSafeAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      totalUsers: 0,
      totalActiveUsers: 0,
      selectUser: "",
      selectDepartment: "",
      dates: [],
      recordNums: [],
      todayCount: 0,
      NUM1: 0,
      NUM2: 0,
      NUM3: 0,
      NUM4: 0,
      NUM5: 0,
      NUM6: 0,
      NUM7: 0,
      searchMonth: moment().format('YYYY-MM'),
      showLoading: false
    };
  };

  componentDidMount() {
    this.state.columns1 = [
      {
        title: '序号',
        render: (text, record, index) => `${index + 1}`
      },
      {
        title: '课程名称',
        dataIndex: 'NAME',
      },
      {
        title: '培训起止时间',
        dataIndex: 'TIMERANGE',
      },
      {
        title: '应参训人数',
        dataIndex: 'SHOULD_TRAINER',
      },
      {
        title: '实际参训人数',
        dataIndex: 'ACTUAL_TRAINER',
      }, {
        title: '参训率',
        render: (text, record) => (<span>{((record.ACTUAL_TRAINER / record.SHOULD_TRAINER) * 100).toFixed(0) + "%"}</span>),
      },
      {
        title: '考核方式',
        dataIndex: 'METHOD',
      },
      {
        title: '通过率',
        dataIndex: 'PASS_RATE',
        render: (text, record) => (<span>{(record.PASS_RATE * 100).toFixed(0) + "%"}</span>),

      },
      {
        title: '效果评估(优良率)',
        dataIndex: 'EFFORT_RATE',
        render: (text, record) => (<span>{(record.EFFORT_RATE*1).toFixed(0) + "%"}</span>),
      },
    ]
    this.loadData(this.state.searchMonth);
  };
  loadData = (startTime) => {
    const json = initFilter(this.props.login.OrgId);
    this.state.showLoading = true;
    json.Parameter1 = startTime;
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIController/getSafeTrainData',
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret) {
          this.state.showLoading = false;
          this.state.NUM1 = ret.Data.NUM1;
          this.state.NUM2 = ret.Data.NUM2;
          this.state.NUM3 = ret.Data.NUM3;
          this.state.NUM4 = ret.Data.NUM4;
          this.state.NUM5 = ret.Data.NUM5;
          this.state.NUM6 = ret.Data.NUM6;
          this.state.NUM7 = ret.Data.NUM7;
          this.state.retData = ret.Data.trainRecords;
          this.chart1(ret.Data.dateCountModel);
        }
      }
    })
  }
  chart1 = (ret) => {
    this.state.recordNums = [];
    this.state.dates = [];
    for (let i = 0; i < ret.length; i++) {
      this.state.recordNums.push(ret[i].COUNT);
      this.state.dates.push(moment(ret[i].DATE).format('YYYY-MM'));
    }
    let chart1s = document.getElementById('chart1');
    if (chart1s) {
      let myChart = echarts.init(chart1s);
      myChart.on('click', (params) => {
        this.loadData(params.name);
      });
      myChart.setOption({
        grid: {
          left: '5%',
          right: '5%',
        },
        legend: {
          bottom: '0px'
        },
        title: {
          text: "月度培训完成走势图",
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        xAxis: {
          type: 'category',
          data: this.state.dates,
          axisLabel: {
            showMaxLabel: true
          }
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '培训记录数',
            data: this.state.recordNums,
            type: 'line',
          },
        ]
      });
    }
  }
  onChange = (type, value) => {
    this.setState({
      [type]: value
    })
  }
  paginationConfig = {
    pageSizeOptions: ['10', '20', '50'],
    pageSize: 20,
    showSizeChanger: true,
    size: 'small',
  }
  render() {
    return (
      <div style={{ backgroundColor: 'white', width: '1200px', top: '0', bottom: '0', left: '0', right: '0', margin: 'auto', borderStyle: 'solid', borderColor: '#ccc', borderWidth: '1px', }}>
        <h1 style={{ textAlign: "center", marginTop: '30px', fontWeight: 'bold' }}>安全教育与培训统计分析</h1>
        <Row gutter={10} style={{ marginTop: "14px" }}>
        <Col span={1}> </Col>
          <Col span={3}> 
          {/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)" }}>年度培训计划完成率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM1}</span>%</Button> */}
            <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>安全培训教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM2}</span>/次</Button>
            <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>三级安全教育<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM3}</span>/次</Button>
            {/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>学时达标率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM4}</span>%</Button> */}
            {/* <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>培训优良率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM5}</span>%</Button> */}
            {/* <Button style={{ width: "150px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px" , boxShadow:"6px 0 10px rgba(0, 0, 0, 0.5)"}}>培训考核通过率<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM6}</span>%</Button> */}
            <Button style={{ width: "110px", height: "60px", borderRadius: '8px', border: '1px RGB(24, 149, 255) solid', margin: "10px", boxShadow: "6px 0 10px rgba(0, 0, 0, 0.5)" }}>题库总条数<br></br><span style={{ fontWeight: "bold", fontSize: "20px", color: '#843C0C' }}>{this.state.NUM7}</span>/条</Button>
            </Col>
          <Col span={19}>
            <div className="dashboard-div-style" style={{ borderRadius: '10px', backgroundColor: 'white', boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <div id="chart1" style={{ width: '100%', height: '350px' }}></div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <hr style={{ border: '1px dashed #ccc', marginBottom: "20px", marginTop: "20px" }}></hr>
        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={22} style={{ height: '100%' }}>
            <div className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
              <Table
                dataSource={this.state.retData}
                columns={this.state.columns1}
                pagination={this.paginationConfig}
                bordered
                loading={this.state.showLoading}
                size="small"
                rowKey="1"
              />
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    )
  }
}
export default connect(({ login, app }) => ({ login, app }))(TrainSafeAnalysis)