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, Divider } from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm1.css";
import moment from "moment";
const { Option } = Select;
class BI001 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      displayNum: 24,
      totalCount: 0,
      finishCount: 0,
      overtimeCount: 0,
      unfinishCount: 0,
      filterType: 1,
      timeRange: "",
      departmentType: "",
    };
  }

  componentDidMount() {
    if (this.props.app.currActivatedMenu.NAME == "现场任务完成分析（矿山部）") {
      this.state.departmentType = "矿山部";
    } else if (this.props.app.currActivatedMenu.NAME == "现场任务完成分析（选矿部）") {
      this.state.departmentType = "选矿部";
    } else {
      this.state.departmentType = "";
    }
    this.state.columns1 = [
      {
        title: "班组名称",
        dataIndex: "Nav_Team.NAME",
      },
      {
        title: "负责人",
        dataIndex: "Nav_Team.Nav_ChargePerson.NAME",
      },
      {
        title: "班前会议",
        children: [
          {
            title: "总记录数",
            dataIndex: "FO01_TOTAL",
          },
          {
            title: "正常已办",
            dataIndex: "FO01_FINISH",
          },
          {
            title: "未完成",
            dataIndex: "FO01_UNFINISH",
          },
          {
            title: "超时已办",
            dataIndex: "FO01_OVERTIME",
          },
          {
            title: "完成率",
            render: (text, record) => (
              <span>
                {(
                  ((record.FO01_FINISH + record.FO01_OVERTIME) /
                    record.FO01_TOTAL) *
                  100
                ).toFixed(0) + "%"}
              </span>
            ),
          },
          {
            title: "完成及时率",
            render: (text, record) => (
              <span>
                {((record.FO01_FINISH / record.FO01_TOTAL) * 100).toFixed(0) +
                  "%"}
              </span>
            ),
          },
        ],
      },
      {
        title: "当班工作记录",
        children: [
          {
            title: "总记录数",
            dataIndex: "FO02_TOTAL",
          },
          {
            title: "正常已办",
            dataIndex: "FO02_FINISH",
          },
          {
            title: "未完成",
            dataIndex: "FO02_UNFINISH",
          },
          {
            title: "超时已办",
            dataIndex: "FO02_OVERTIME",
          },
          {
            title: "完成率",
            render: (text, record) => (
              <span>
                {(
                  ((record.FO02_FINISH + record.FO02_OVERTIME) /
                    record.FO02_TOTAL) *
                  100
                ).toFixed(0) + "%"}
              </span>
            ),
          },
          {
            title: "完成及时率",
            render: (text, record) => (
              <span>
                {((record.FO02_FINISH / record.FO02_TOTAL) * 100).toFixed(0) +
                  "%"}
              </span>
            ),
          },
        ],
      },
    ];
    this.state.columns2 = [
      {
        title: "班组名称",
        dataIndex: "Nav_Team.NAME",
      },
      {
        title: "负责人",
        dataIndex: "Nav_Team.Nav_ChargePerson.NAME",
      },
      {
        title: "岗位交接班",
        children: [
          {
            title: "总记录数",
            dataIndex: "FO03_TOTAL",
          },
          {
            title: "正常已办",
            dataIndex: "FO03_FINISH",
          },
          {
            title: "未完成",
            dataIndex: "FO03_UNFINISH",
          },
          {
            title: "超时已办",
            dataIndex: "FO03_OVERTIME",
          },
          {
            title: "完成率",
            render: (text, record) => (
              <span>
                {(
                  ((record.FO03_FINISH + record.FO03_OVERTIME) /
                    record.FO03_TOTAL) *
                  100
                ).toFixed(0) + "%"}
              </span>
            ),
          },
          {
            title: "完成及时率",
            render: (text, record) => (
              <span>
                {((record.FO03_FINISH / record.FO03_TOTAL) * 100).toFixed(0) +
                  "%"}
              </span>
            ),
          },
        ],
      },
      {
        title: "班组安全活动",
        children: [
          {
            title: "总记录数",
            dataIndex: "FO04_TOTAL",
          },
          {
            title: "正常已办",
            dataIndex: "FO04_FINISH",
          },
          {
            title: "未完成",
            dataIndex: "FO04_UNFINISH",
          },
          {
            title: "超时已办",
            dataIndex: "FO04_OVERTIME",
          },
          {
            title: "完成率",
            render: (text, record) => (
              <span>
                {(
                  ((record.FO04_FINISH + record.FO04_OVERTIME) /
                    record.FO04_TOTAL) *
                  100
                ).toFixed(0) + "%"}
              </span>
            ),
          },
          {
            title: "完成及时率",
            render: (text, record) => (
              <span>
                {((record.FO04_FINISH / record.FO04_TOTAL) * 100).toFixed(0) +
                  "%"}
              </span>
            ),
          },
        ],
      },
    ];
    this.getBaseInfoData();
  }
  handleChange = (value) => {
    this.state.departmentType = value;
    this.getBaseInfoData();
  };
  handleClick = (value) => {
    this.state.filterType = value;
    this.getBaseInfoData();
  };
  chart1 = (data) => {
    if (data && data.IsSuccessful) {
      let teamName = [];
      let totalQty = [];
      data.Data.forEach((item) => {
        teamName.push(item.Nav_Team.NAME);
        let totalTemp =
          item.FO01_TOTAL + item.FO02_TOTAL + item.FO03_TOTAL + item.FO04_TOTAL;
        totalQty.push(totalTemp);
      });
      let chart1s = document.getElementById("chart1");
      if (chart1s) {
        let myChart = echarts.init(chart1s);
        myChart.setOption({
          title: {
            text: "总任务数",
            x: "center",
            top: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            top: "10%",
            bottom: "10%",
            containLabel: true,
          },
          xAxis: {
            show: false,
          },
          yAxis: [
            {
              triggerEvent: true,
              show: true,
              inverse: false,
              data: teamName,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "#666",
                align: "right",
                margin: 20,
                fontSize: 13,

                rich: {
                  idx0: {
                    color: "#FB375E",
                    backgroundColor: "#FFE8EC",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  idx1: {
                    color: "#FF9023",
                    backgroundColor: "#FFEACF",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  idx2: {
                    color: "#01B599",
                    backgroundColor: "#E1F7F3",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  idx: {
                    color: "#333",
                    borderRadius: 100,
                    padding: [5, 8],
                  },
                  title: {
                    width: 165,
                  },
                },
              },
            },
            {
              triggerEvent: true,
              show: true,
              inverse: false,
              data: totalQty,
              axisLine: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                interval: 0,
                color: "#666",
                align: "left",
                margin: 20,
                fontSize: 12,
              },
            },
          ],
          series: [
            {
              name: "总任务数",
              type: "bar",
              barWidth: 10,
              itemStyle: {
                color: "#1990FF",
                barBorderRadius: 30,
              },
              data: totalQty,
              show: false,
            },
          ],
        });
      }
    }
  };

  //隐患整改完成情况统计图
  chart2 = (data) => {
    let teamName = [];
    let wattingQty = [];
    let finishQty = [];
    let overFinishQty = [];
    let totalQty = [];
    let dataList = [];
    data.Data.forEach((item) => {
      teamName.push(item.Nav_Team.NAME);
      wattingQty.push(
        item.FO01_UNFINISH +
        item.FO02_UNFINISH +
        item.FO03_UNFINISH +
        item.FO04_UNFINISH
      );
      finishQty.push(
        item.FO01_FINISH +
        item.FO02_FINISH +
        item.FO03_FINISH +
        item.FO04_FINISH
      );
      overFinishQty.push(
        item.FO01_OVERTIME +
        item.FO02_OVERTIME +
        item.FO03_OVERTIME +
        item.FO04_OVERTIME
      );
      totalQty.push(
        item.FO01_TOTAL + item.FO02_TOTAL + item.FO03_TOTAL + item.FO04_TOTAL
      );
      dataList.push({
        value:
          item.FO01_FINISH +
          item.FO02_FINISH +
          item.FO03_FINISH +
          item.FO04_FINISH,
        name: item.Nav_Team.NAME,
      });
    });
    //图标2
    let chart2s = document.getElementById("chart2");
    if (chart2s) {
      let myChart = echarts.init(chart2s);
      myChart.setOption({
        color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
        title: {
          text: "完成及时率统计",
          x: "center",
          top: "2%",
        },

        legend: {
          orient: "vertical",
          x: "left",
          data: ["总数", "正常已办", "超时已办"],
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#000",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "10%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: teamName,
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            show: true,
            color: "rgb(170,170,170)",
            interval: 0,
            textStyle: {
              lineHeight: 14,
            },
            rotate: 40,
            formatter: function (value) {
              // 自定义文字超出部分 ...
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
              }
              return value;
            },
          },
        },
        legend: {
          data: ["正常已办", "超时已办"],
          left: "center",
          align: "left",
          bottom: "2%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#f2f2f2"],
            },
          },
          axisLine: {
            lineStyle: {
              color: "#0c3b71",
            },
          },
          axisLabel: {
            color: "rgb(170,170,170)",
            formatter: "{value} ",
          },
        },
        series: [
          {
            name: "总数",
            type: "bar",
            stack: "",
            data: totalQty,
            barWidth: "60%",
            barGap: '-100%',
            z: -1,

          },
          {
            name: "正常已办",
            type: "bar",
            stack: "总量",
            barWidth: "60%",
            data: finishQty,
            barGap: '-100%',
            z: -1,
          },
          {
            name: "超时已办",
            type: "bar",
            stack: "总量",
            barWidth: "60%",
            data: overFinishQty,
            barGap: '-100%',
            z: -1,
          },
        ],
      });
    }
  };

  //获取数据
  getBaseInfoData = () => {
    const json = initFilter(this.props.login.OrgId);
    extendRule(json, "FILTER_TIME", 1, this.state.filterType);
    if (this.state.departmentType != "") {
      extendRule(json, "DEPARTMENT_NAME", 1, this.state.departmentType);
    }
    extendInclude(json, "Nav_Team.Nav_ChargePerson");
    extendOrder(json, "Nav_Team.NAME", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/SafetaskFinish/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        this.state.timeRange =
          moment(ret.Data[0].STARTTIME).format("YYYY-MM-DD") +
          "~" +
          moment(ret.Data[0].ENDTIME).format("YYYY-MM-DD");
        this.state.retData = ret.Data;
        let t1 = 0;
        let t2 = 0;
        let t3 = 0;
        let t4 = 0;
        for (let i = 0; i < ret.Data.length; i++) {
          t1 =
            t1 +
            ret.Data[i].FO01_TOTAL +
            ret.Data[i].FO02_TOTAL +
            ret.Data[i].FO03_TOTAL +
            ret.Data[i].FO04_TOTAL;
          t2 =
            t2 +
            ret.Data[i].FO01_FINISH +
            ret.Data[i].FO02_FINISH +
            ret.Data[i].FO03_FINISH +
            ret.Data[i].FO04_FINISH;
          t3 =
            t2 +
            ret.Data[i].FO01_UNFINISH +
            ret.Data[i].FO02_UNFINISH +
            ret.Data[i].FO03_UNFINISH +
            ret.Data[i].FO04_UNFINISH;
          t4 =
            t2 +
            ret.Data[i].FO01_OVERTIME +
            ret.Data[i].FO02_OVERTIME +
            ret.Data[i].FO03_OVERTIME +
            ret.Data[i].FO04_OVERTIME;
        }
        this.state.totalCount = t1;
        this.state.finishCount = t2;
        this.state.overtimeCount = t3;
        this.state.unfinishCount = t4;
        this.chart1(ret);
        this.chart2(ret);
      },
    });
  };
  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" }}>
          {this.state.departmentType} 现场任务执行情况综合统计分析
          <br />
          {this.state.timeRange}
        </h1>
        <Row
          gutter={10}
          style={{
            marginTop: "14px",
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <span>
            <Select
              style={{ width: 120, marginRight: "15px" }}
              onChange={this.handleChange}
            >
              <Option value="矿山部">矿山部</Option>
              <Option value="选矿部">选矿部</Option>
            </Select>
            <Button
              type={this.state.filterType == 1 ? "primary" : "default"}
              onClick={() => this.handleClick(1)}
              style={{ marginRight: "5px" }}
            >
              最近1周
            </Button>
            <Button
              type={this.state.filterType == 5 ? "primary" : "default"}
              onClick={() => this.handleClick(5)}
              style={{ marginRight: "5px" }}
            >
              最近1月
            </Button>
            <Button
              type={this.state.filterType == 10 ? "primary" : "default"}
              onClick={() => this.handleClick(10)}
              style={{ marginRight: "5px" }}
            >
              最近3月
            </Button>
            <Button
              type={this.state.filterType == 15 ? "primary" : "default"}
              onClick={() => this.handleClick(15)}
              style={{ marginRight: "5px" }}
            >
              最近半年
            </Button>
            <Button
              type={this.state.filterType == 20 ? "primary" : "default"}
              onClick={() => this.handleClick(20)}
              style={{ marginRight: "5px" }}
            >
              最近1年
            </Button>
            <Button
              type={this.state.filterType == 0 ? "primary" : "default"}
              onClick={() => this.handleClick(0)}
            >
              全部
            </Button>
          </span>
        </Row>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginTop: "20px",
            //   marginBottom: "20px",
          }}
        >
          <div className={styles.menuPie}>
            <li>
              总任务数
              <br />
              <div className={styles.dataStyle}>{this.state.totalCount}</div>
            </li>
            <Divider
              type="vertical"
              style={{ width: "1px", height: "70px", margin: "9px 0px" }}
            />
            <li>
              正常已办数
              <br />
              <div className={styles.dataStyle1}>{this.state.finishCount}</div>
            </li>
            <Divider
              type="vertical"
              style={{ width: "1px", height: "70px", margin: "9px 0px" }}
            />
            <li>
              超时完成数
              <br />
              <div className={styles.dataStyle3}>
                {this.state.overtimeCount}
              </div>
            </li>
            <Divider
              type="vertical"
              style={{ width: "1px", height: "70px", margin: "9px 0px" }}
            />
            <li>
              未完成数
              <br />
              <div className={styles.dataStyle2}>
                {this.state.unfinishCount}
              </div>
              {/* <a href="#" style={{ color: "red" }}> */}
              {/* </a> */}
            </li>
          </div>
        </div>

        <Row
          gutter={10}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginTop: "14px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              alignItems: "center",
              width: "1100px",
            }}
          >
            <Col span={24}>
              <div
                style={{
                  // borderRadius: "10px",
                  backgroundColor: "white",
                  border: "1px solid #e7e6e4",
                  // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
                }}
              >
                <div
                  id="chart1"
                  style={{ width: "100%", height: "600px" }}
                ></div>
              </div>
            </Col>
          </div>
        </Row>
        <Row
          gutter={10}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginTop: "14px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              alignItems: "center",
              width: "1100px",
            }}
          >
            <Col span={24}>
              <div
                style={{
                  // borderRadius: "10px",
                  backgroundColor: "white",
                  border: "1px solid #e7e6e4",
                  // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
                }}
              >
                <div
                  id="chart2"
                  style={{ width: "100%", height: "600px" }}
                ></div>
              </div>
            </Col>
          </div>
        </Row>
        {/* 列表 */}
        <Row
          gutter={10}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginTop: "14px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              alignItems: "center",
              width: "1100px",
            }}
          >
            <Col span={24}>
              <div
                style={{
                  // borderRadius: "10px",
                  backgroundColor: "white",
                  // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
                }}
              >
                <Table
                  dataSource={this.state.retData}
                  columns={this.state.columns1}
                  pagination={false}
                  bordered
                  loading={this.state.showLoading}
                  size="small"
                  rowKey="1"
                />
              </div>
            </Col>
          </div>
        </Row>
        <Row
          gutter={10}
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginTop: "14px",
            marginBottom: "20px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              alignItems: "center",
              width: "1100px",
            }}
          >
            <Col span={24}>
              <div
                style={{
                  // borderRadius: "10px",
                  backgroundColor: "white",
                  // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
                }}
              >
                <Table
                  dataSource={this.state.retData}
                  columns={this.state.columns2}
                  pagination={false}
                  bordered
                  loading={this.state.showLoading}
                  size="small"
                  rowKey="2"
                />
              </div>
            </Col>
          </div>
        </Row>
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI001);