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,
  Progress,
  Select,
  DatePicker,
  message,
} from "antd";
import echarts from "echarts";
import moment from "moment";
const { Option } = Select;
class BI002HomeDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      columns1: [
        //   {
        //     title: '序号',
        //     render: (text, record, index) => `${index + 1}`
        //   },
        {
          title: "车间",
          dataIndex: "shopName",
          render: (value, record, index) => {
            const obj = {
              children: value,
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "总任务数",
          dataIndex: "shopTotalCount",
          render: (value, record, index) => {
            const obj = {
              children: value,
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "正常已办",
          dataIndex: "shopDoneCount",
          render: (value, record, index) => {
            const obj = {
              children: value,
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "完成率",
          dataIndex: "shopDoneRate",
          render: (value, record, index) => {
            const obj = {
              children: value + "%",
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "及时完成率",
          dataIndex: "shopOverDoneRate",
          render: (value, record, index) => {
            const obj = {
              children: value + "%",
              props: {},
            };
            let arr = this.state.retData.filter((res) => {
              return res.shopName == record.shopName;
            });
            if (
              index == 0 ||
              this.state.retData[index - 1].shopName != record.shopName
            ) {
              obj.props.rowSpan = arr.length;
            } else {
              obj.props.rowSpan = 0;
            }
            return obj;
          },
        },
        {
          title: "班组",
          dataIndex: "teamName",
          onCell:()=>this.renderSpeedColumn()
        },
        {
          title: "总任务数",
          dataIndex: "teamTotalCount",
        },
        {
          title: "正常已办",
          dataIndex: "teamDoneCount",
        },
        {
          title: "未完成数",
          dataIndex: "teamUndoneCount",
        },
        {
          width: "120px",
          title: "完成率",
          dataIndex: "teamDoneRate",
          render: (text, record) => (
            <Progress
              percent={record.teamDoneRate}
              status="active"
              strokeColor={{ from: "#108ee9", to: "#108ee9" }}
            />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
        {
          width: "120px",
          title: "及时完成率",
          dataIndex: "teamOverDoneRate",
          render: (text, record) => (
            <Progress
              percent={record.teamOverDoneRate}
              status="active"
              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>
          ),
        },
      ],
      showLoading: false,
    };
  }

  componentDidMount() {
    this.loadData();
  }
  renderSpeedColumn = ()=>{
    return { className: 'redTableCell'} 
  }
  loadData = () => {
    this.state.showLoading = true;
    let mineType = this.props.data.mineType;
    let param = this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS;
    if (param) {
      mineType = param === "选矿厂" ? "10" : param === "尾矿库" ? "20" : "30";
      this.props.data.mineType = mineType;
    }
    this.chart1(mineType);
  };
  //矿山
  chart1 = (mineType) => {
    let json = initFilter(this.props.login.OrgId, mineType);
    // extendRule(json, 'DEPARTMENT_NAME', 1, "矿山部");
    // extendOrder(json, "MONTH", 0);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIStatiscialAnalysisController/GetJobCompletionDetail",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful && data.Data) {
          let month = [];
          let company = [];
          let department = [];
          let totalCount = [];
          data.Data.rateData.forEach((item) => {
            month.push(item.MONTHStr);
            company.push(item.FINISH_RATE);
            department.push(item.NORMAL_FINISH_RATE);
            totalCount.push(item.TOTAL_COUNT);
          });
          let myChart = echarts.init(document.getElementById("chartWork"));
          myChart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
              },
              transitionDuration: 0,
              formatter: function (params) {
                return (
                  params[0].marker +
                  params[0].seriesName +
                  " : " +
                  params[0].value +
                  "</br>" +
                  params[1].marker +
                  params[1].seriesName +
                  " : " +
                  params[1].value + "%" +
                  "</br>" +
                  params[2].marker +
                  params[2].seriesName +
                  " : " +
                  params[2].value + "%" 
                );
              },
            },
            title: {
              text: "工作票完成分析",
              left: "center",
              top: "5%",
            },
            legend: {
              data: ["完成数","完成率", "及时完成率"],
              left: "center",
              align: "left",
              bottom: "2%",
              textStyle: {
                color: "#000",
              },
              itemWidth: 10,
              itemHeight: 10,
              // itemGap: 35,
            },
            grid: {
              left: "3%",
              right: "4%",
              top: "15%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              data: month,
              axisLabel: {
                showMaxLabel: true,
              },
            },
            yAxis: [
              {
                type: "value",
                position: "left",
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: ["#f2f2f2"],
                    // opacity:0.2
                    // zlevel: -1,
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#0c3b71",
                  },
                },
                axisLabel: {
                  color: "rgb(170,170,170)",
                  formatter: "{value} ",
                },
              },
              {
                type: "value",
                position: "right",
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: ["#f2f2f2"],
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "#f2f2f2",
                  },
                },
                axisLabel: {
                  color: "rgb(170,170,170)",
                  formatter: "{value} %",
                },
              },
            ],
            series: [
              {
                name: "完成数",
                type: "bar",
                color: "#72b85b",
                data: totalCount,
                barWidth: "20%",
                barGap: "10%",
                stack: null,
              },
              {
                name: "完成率",
                type: "line",
                color: "#4b9bf3",
                data: company,
                yAxisIndex: 1,
                smooth: true,
                // zlevel:100,
              },
              {
                name: "及时完成率",
                type: "line",
                color: "#FCD149",
                data: department,
                yAxisIndex: 1,
                smooth: true,
                // zlevel:100,
              },
            ],
          });
          this.setState({
            retData: data.Data.retData,
          });
        }
      },
    });
    this.state.showLoading = false;
  };
  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" }}
        >
          {this.props.data.mineType == 20
            ? "尾矿库"
            : this.props.data.mineType == 10
            ? "选矿厂"
            : this.props.data.mineType == 30
            ? "露天矿"
            : this.props?.login?.currActivatedMenu?.MENU_FORM_PARAMS}
          工作票完成详情（近12月）
        </h1> */}
        <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={1}> </Col>
          <Col span={22}>
            <div
              // className="dashboard-div-style"
              style={{
                // borderRadius: "10px"
                // backgroundColor: "white",
                // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
                border: "1px solid rgb(232,232,232)" 
              }}
            >
              <div
                id="chartWork"
                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"
              className="bi001-table"
              style={{ 
                // border: "1px solid rgb(232,232,232)" 
               }}
            >
              <Table
                dataSource={this.state.retData}
                columns={this.state.columns1}
                pagination={false} //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 }))(BI002HomeDetail);
