import React from "react";
import { connect } from "dva";
import { initFilter, extendRule, extendOrder } from "../../../utils/common";
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
import DropDownPagination from '../../common/DropDownPaginationEx'
import {
  Table,
  Button,
  Input,
  Row,
  Col,
  Modal,
  DatePicker,
  Icon,
  Progress,
  Divider,
} from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm1.css";
import moment from "moment";
import { T } from "antd/lib/upload/utils";
import FormPage from "../../FormPage";
class BI012FormRunAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD"),
      selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD"),
      visible: false,
      loading: false,
      noticeTitle: "",
      tmpData: {},
      tableKey: "1",
      startTime: moment(new Date().setDate(1))
        .subtract(6, "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: [],
      departData:[],
      DEPARTMENT_ID:null,
      displayHr: "none",
      displaydetail: "none",
      columns: [
        {
          width: "150px",
          title: "月份",
          dataIndex: "MONTHStr",
          key: "MONTHStr",
        },
        {
          width: "100px",
          title: "任务数",
          dataIndex: "TOTAL_QTY",
          key: "TOTAL_QTY",
        },
        {
          width: "150px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
          render: (text, record) => (
            <Progress percent={record.FINISH_RATE.split("%")[0]} />
          ),
        },
        {
          width: "150px",
          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)",
              }}
            />
          ),
        },
      ],
      detailcolumns: [
        {
          width: "150px",
          title: "组织名称",
          dataIndex: "DEPARTMENT_NAME",
          key: "DEPARTMENT_NAME",
        },
        {
          width: "100px",
          title: "待办人",
          dataIndex: "USER_NAME",
          key: "USER_NAME",
        },
        {
   
          title: "待办名称",
          dataIndex: "NOTICE_TITLE",
          key: "NOTICE_TITLE",
          
        },
        {
          width: "150px",
          title: "开始时间",
          dataIndex: "TASK_STARTDT",
          key: "TASK_STARTDT",
        },
        {
            width: "150px",
            title: "结束时间",
            dataIndex: "TASK_ENDDT",
            key: "TASK_ENDDT",
          },
          {
            width: "150px",
            title: "预警状态",
            dataIndex: "NOTICE_TYPE",
            key: "NOTICE_TYPE",
            render: (text, record) => this.ShowState(record),
          },
      ],
    };
    this.text="组织/个人";
    this.text2="";
  }
  ShowState(obj) {
    var thisResult =
      (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000;
    if (thisResult > 0) {
      return "正常";
    } else {
      return <span style={{ color: "red" }}>超期</span>;
    }
  }
  getStartDate = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate).add(-180, "d").format("YYYY-MM-DD");
    return pastDate;
  };

  getEndDate = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate).format("YYYY-MM-DD");
    return pastDate;
  };
  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.getMould(this.props.login.user.NAME);
  };
  onSelectDepartment=(departData,record)=>{
    if (departData && departData.data && departData.data.length > 0) {
      this.setState({
        departData: {
          ...this.state.departData,
          // DEPARTMENT_ID: departData.data[0],
          Nav_Department: { NAME: departData.record.NAME }
        },
        DEPARTMENT_ID: departData.data[0],
      })
      if(!this.state.inputText)
      {
        this.text =departData.record.NAME;
        this.text2 = departData.record.NAME;
      }
    }
    else {
      this.setState({
        departData: {
          ...this.state.departData,
          Nav_Department: { NAME: null },
        },
        DEPARTMENT_ID: null,
      })
    };
  }
  //矿山
  ksRun = (data) => {
    if (data) {
      let month = [];
      let company = [];
      let department = [];
      let totalCount = [];
      data.forEach((item) => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
        totalCount.push(item.TOTAL_QTY);
      });
      let myChart = echarts.init(document.getElementById("ksRun"));
      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: this.text+"任务完成情况分析",
          left: "center",
          top: "5%",
        },
        legend: {
          data: ["完成数", "完成率", "及时完成率"],
          left: "center",
          align: "left",
          top: "15%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          // itemGap: 35,
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "27%",
          bottom: "5%",
          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,
          },
        ],
      });
    }
  };
  
  
  getMould = (inputText,DEPARTMENT_ID) => {
    this.setState({ loading: true });
    var orgId = this.props.login ? this.props.login.OrgId : "";
    let startTime = this.state.selectStartTime.format("YYYY-MM-DD");
    let endTime = this.state.selectEndTime.format("YYYY-MM-DD");
    let json = initFilter(orgId, inputText, "", "", "", startTime, endTime,DEPARTMENT_ID);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BIStatiscialAnalysisController/GetPersonAnalyzeD",
      onComplete: (ret) => {
        if (ret) {
          this.setState({
            retData: ret.waitData,//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});
    if(value)
    {
      this.text=value;
    }
   else if(this.text2)
   {
    this.text=this.text2;
   }
   else
   {
    this.text='';
   }
    // this.setState({ inputText: value ? value : this.props.login.user.NAME });
  };
  startChange = (value) => {
    this.setState({
      selectStartTime: value,
      startTime: value.format("YYYY-MM-DD"),
    });
  };
  endChange = (value) => {
    this.setState({
      selectEndTime: value,
      endTime: value.format("YYYY-MM-DD"),
    });
  };
  render() {
    const {
      startTime,
      endTime,
      finishCount,
      overtimeCount,
      totalCount,
      unfinishCount,
      inputText,
      DEPARTMENT_ID,
      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",
              margin: "0px 50px",
              height: "35px",
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>选择部门：</b>
              <DropDownPagination inputDataApi={'FM/Department/OrderPaged'} fieldName={'Nav_Department.NAME'}
                    data={this.state.departData} onSelect={this.onSelectDepartment} onFilter={({ params }) => {
                      params.OrderType = 1
                      params.OrgId = this.state.departData ? this.state.departData.ORG_ID : this.props.login.OrgId
                      // extendRule(params, 'DEPARTMENT_TYPE', 1, 0)
                    }} 
                    style={{width:'200px'}}
                    />
            </span>
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>姓名：</b>
              <Input
                onChange={this.handleSearch}
                style={{ width: "150px" }}
                defaultValue={this.props.login.user.NAME}
              ></Input>
            </span>
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>开始时间：</b>
              <DatePicker
                style={{ width: "150px" }}
                value={this.state.selectStartTime}
                format="YYYY-MM-DD"
                onChange={this.startChange}
              />
            </span>
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>结束时间：</b>
              <DatePicker
                style={{ width: "150px" }}
                value={this.state.selectEndTime}
                format="YYYY-MM-DD"
                onChange={this.endChange}
              />
            </span>
            <span style={{ width: "100px" }}>
              <Button
                onClick={() => this.getMould(inputText,DEPARTMENT_ID)}
                style={{ width: "80px" }}
                type="primary"
              >
                查询
              </Button>
            </span>
            </Row>
          <br></br>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginTop: "10px",
            }}
          >
            <div className={styles.menuPie}>
              <li>
                总任务数
                <br />
                <div className={styles.dataStyle}>
                  {totalCount ? totalCount : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                待办数
                <br />
                <div className={styles.dataStyle1}>
                  {unfinishCount ? unfinishCount : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                超时待办数
                <br />
                <div className={styles.dataStyle3}>
                  {dovertimeCount ? dovertimeCount : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                已办事项
                <br />
                <div className={styles.dataStyle2}>
                  {finishCount + overtimeCount
                    ? finishCount + overtimeCount
                    : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                完成率
                <br />
                <div className={styles.dataStyle3}>
                  {allFinishRate ? allFinishRate : 0}%
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                及时完成率
                <br />
                <div className={styles.dataStyle3}>
                  {finishRate ? finishRate : 0}%
                </div>
              </li>
            </div>
          </div>
          <Row
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginTop: "20px",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
                flexDirection: "column",
              }}
            >
              <div
                id="ksRun"
                style={{
                  width: "100%",
                  height: "350px",
                  marginLeft: "20px",
                  marginRight: "30px",
                  backgroundColor: "white",
                  borderStyle: "solid",
                  borderColor: "#ccc",
                  borderWidth: "1px",
                }}
              ></div>
              <br></br>
              <span style={{ textAlign: "center", width: "100%" }}>
                * 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
                <br></br>
                <br></br>
              </span>
            </Col>
          </Row>
          <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"50px"}}><Icon type="appstore"/> 未完成（{this.text}）</h2>
          <Row
            style={{
              marginTop: "10px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
              }}
            >
              <Table
                style={{
                  width: "100%",
                  textAlign: "center",
                  marginBottom: "30px",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.detailcolumns}
                pagination={true}
                loading={false}
                size="small"
                bordered
              />
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app, loading }) => ({ login, app, loading }))(
  BI012FormRunAnalysis
);