import { Button, Descriptions, Popconfirm, Row, Col, Form, Modal, Input, Select, Table } from 'antd';
import React, { useState } from 'react';
import { initFilter, extendRule, extendInclude, extendIgnoreDataRule, setDataFieldValue, GetFileModel, guid, initQueryFilter, showFiles } from "../../../utils/common";
import ReactToPrint from "react-to-print";
import stylesStep from '../HI/StepForm.css';
import config from "../../../config";
import XLSX from 'xlsx';
import { connect } from 'dva';
import moment from 'moment';
import { message } from "antd/lib/index";
import FormPage from '../../../components/FormPage'
import DropDownPagination from '../../common/DropDownPaginationEx'
class SK004CheckPost extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileForm: {
        title: "",
        visible: false,
      },
      inputText: "",
      inputText2: "",
      inputText3: "",
      departId: null,
      data: {},
      depart: {},
      departName: '',
      postName: '',
      phone: '',
      post: {},
      cards: {},
      dataList: [],
      MineType: 0,
      CHECK_CYCLE: 0,
      CHECK_TYPE: 0,
      CHECK_CYCLE_ID: null,
      BtnAgreeDisplay: 'none',
      showDetail: false,
      Details: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'NUM',
          key: "NUM",
          render: (text, record, index) => {
            return <label>{index + 1}</label>
          }
        },
        {
          title: "生产单元",
          dataIndex: "Nav_ProductionUnit.NAME",
          key: "Nav_ProductionUnit.NAME",
          // render: (text, record, index) => {
          //     return <label>{this.props.app.enums.SKProductionUnit.enums[record.MineType]}</label>
          //   }
        },
        {
          title: "辨识区域",
          dataIndex: "Nav_Area.NAME",
          key: "Nav_Area.NAME",
        },
        {
          title: "风险名称",
          dataIndex: "RISK_NAME",
          key: "RISK_NAME",
        },
        {
          title: "风险描述",
          dataIndex: "RISK_DESCRIPTION",
          key: "RISK_DESCRIPTION",
        },
        {
          title: "风险类别",
          dataIndex: "Nav_Type.NAME",
          key: "Nav_Type.NAME",
        },
        // {
        //   title: "风险评价L",
        //   dataIndex: "EVALUATE_L",
        //   key: "EVALUATE_L",
        // },
        // {
        //   title: "风险评价E",
        //   dataIndex: "EVALUATE_E",
        //   key: "EVALUATE_E",
        // },
        // {
        //   title: "风险评价C",
        //   dataIndex: "EVALUATE_C",
        //   key: "EVALUATE_C",
        // },
        // {
        //   title: "分值D",
        //   dataIndex: "EVALUATE_SCORE",
        //   key: "EVALUATE_SCORE",
        // },
        {
          title: "风险等级",
          dataIndex: "EVALUATE_LEVEL",
          key: "EVALUATE_LEVEL",
          render: (text, record, index) => {
            return <label>{this.props.app.enums.SKEvaluateLevelEnum.enums[record.EVALUATE_LEVEL]}</label>
          }
        },
        // {
        //   title: '操作',
        //   dataIndex: '',
        //   key: '',
        //   render: (text, record, index) => {
        //     return <Button type='defualt' size='small' onClick={(e) => { this.showModalCard(record) }} icon='eye' />
        //   }
        // }
      ],
      columndatas: [
        {
          title: '序号',
          dataIndex: 'NUM',
          key: "NUM",
          render: (text, record, index) => {
            return <label>{index + 1}</label>
          }
        },
        {
          title: "生产单元",
          dataIndex: "Nav_Library.Nav_ProductionUnit.NAME",
          key: "Nav_Library.Nav_ProductionUnit.NAME",
          // render: (text, record, index) => {
          //   return <label>{this.props.app.enums.SKProductionUnit.enums[record.Nav_Librarys[0]?.MineType]}</label>
          // }
        },
        {
          title: "辨识部门",
          dataIndex: "Nav_Department.NAME",
          key: "Nav_Department.NAME",
        },
        {
          title: "辨识岗位",
          dataIndex: "POST_NAME",
          key: "POST_NAME",
        },
        {
          title: '操作',
          dataIndex: '',
          key: '',
          render: (text, record, index) => {
            return <Button type='defualt' size='small' onClick={(e) => { this.showModal(record) }} icon='eye' />
          }
        }
      ]
    };
  };

  componentDidMount() {
    if (this.props.data?.btnConfig?.id) { this.loadData(); }
  }

  componentWillReceiveProps(NextProps) {
    if (NextProps.data?.btnConfig?.id && this.props.data?.btnConfig?.id != NextProps.data?.btnConfig?.id) { this.loadData(); }
  }
  BtnClose = () => {
    if (typeof this.props.data.onCancel != "undefined" && typeof this.props.data.onCancel == 'function')
      this.props.data.onCancel();
  }

  loadData = () => {
    let json = initFilter(this.props.login.OrgId);
    json.Parameter22 = this.props.data.ORG_ID_HV;
    extendIgnoreDataRule(json)
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'SK/SKEnterpriseLibrary/GetPostRiskList',
      onComplete: (ret) => {
        if (ret) {
          this.setState({ data: ret, dataList: ret });
        }
      }
    });
  }
  loadData2() {
    let temp = this.state.data
    if (this.state.inputText) {
      temp = temp.filter(t => t.Nav_Department?.NAME.includes(this.state.inputText));
    }
    if (this.state.inputText2) {
      temp = temp.filter(t => t.POST_NAME.includes(this.state.inputText2));
    }
    if (this.state.inputText3) {
      temp = temp.filter(t => t.Nav_Library?.Nav_ProductionUnit?.NAME.includes(this.state.inputText3));
    }
    this.setState({ dataList: temp })
  }
  onTableBtnExport() {
    const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
    let TableWrap = document.getElementById('tableId' + this.props.data.id);
    let Table = TableWrap.getElementsByTagName('table')[0];
    const wb = XLSX.utils.table_to_book(Table);
    XLSX.writeFile(wb, "岗位风险清单.xlsx")
  }


  showModal = (item) => {
    this.setState({
      showDetail: true,
    }, () => {
      this.setState({
        Details: item.Nav_Librarys,
        departName: item.Nav_Department?.NAME,
        postName: item.POST_NAME,
        phone: item.PHONE,
      });
    });
  };
  handleCancel = () => {
    this.setState({
      showDetail: false,
      Details: []
    });
  };
  closeModal = () => {
    this.setState({
      showDetail: false,
      Details: []
    });
  };
  handleCancelCard = () => {
    this.setState({
      showCard: false,
      cards: {}
    });
  };
  showModalCard = (record) => {
    this.setState({
      showCard: true,
    }, () => {
      let tmpData = [];
      if (record.Nav_Details) {
        for (var i = 0; i < record.Nav_Details.length; i++) {
          tmpData = tmpData + "\r\n" + (i + 1) + "、" + record.Nav_Details[i].MEASURES_NAME
        }
      }
      let temps = {
        RISK_NAME: record.RISK_NAME,
        RISK_CODE: "01",
        EVALUATE_LEVEL: this.props.app.enums.SKEvaluateLevelEnum.enums[record.EVALUATE_LEVEL],
        RISK_DESCRIPTION: record.RISK_DESCRIPTION,
        MEASURES_NAME: tmpData,
        RISK_TYPE: record.Nav_Type.NAME,
        EMERGENCY: record.EMERGENCY,
        photo: record.Nav_Photo[0]
      }
      this.setState({
        cards: temps,
      });
    });
  };
  closeModalCard = () => {
    this.setState({
      showCard: false,
      cards: {}
    });
  };
  handleSearch = ({ data, record }) => {
    this.setState({
      depart: {
        ...this.state.depart,
        DEPARTMENT_ID: data[0],
        Nav_Department: { NAME: record?.NAME },
      },
      inputText: record?.NAME,
      departId: record?.ID
    })
  };
  handleSearch2 = ({ data, record }) => {
    // const { value } = evt.target;
    // this.setState({ inputText2: value ? value : "" });
    this.setState({
      post: {
        ...this.state.post,
        POST_ID: data[0],
        Nav_Post: { NAME: record?.NAME },
      },
      inputText2: record?.NAME
    })
  };
  handleSearch3 = (value) => {
    this.setState({
      inputText3: value
    })
  }
  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    }
    const enums = this.props.data.enums ? this.props.data.enums : this.props.app.enums;
    // let aaa = Math.random();
    return <div>
      <div>
        <Modal
          visible={this.state.showCard}
          title="岗位风险点告知卡"
          maskClosable={false}
          onCancel={this.handleCancelCard}
          footer={null}
          className="antd-modal-fullscreen"
          closeModal={this.closeModalCard}
        >
          <br></br>
          <h2 style={{ textAlign: 'center', fontWeight: 'bold', margin: "auto", color: "red" }}> {this.state.postName}岗位风险点告知卡</h2>
          <br></br>
          <table style={{ margin: "auto", alignContent: "center", width: "1000px" }} className={stylesStep.PrintForm} >
            <tr>
              <td style={{ backgroundColor: "yellow", width: "120px", textAlign: 'center' }}>
                风险点名称
              </td>
              <td>
                {this.state.cards?.RISK_NAME}
              </td>
              <td style={{ backgroundColor: "red", color: "white", width: "150px", textAlign: 'center' }} rowSpan={3}>
                主要危险因素描述
              </td>
              <td rowSpan={3}>
                {this.state.cards?.RISK_DESCRIPTION}
              </td>
            </tr>
            <tr>
              <td style={{ backgroundColor: "yellow", width: "120px", textAlign: 'center' }}>风险点编号</td>
              <td>  {this.state.cards?.RISK_CODE}</td>
            </tr>
            <tr>
              <td style={{ backgroundColor: "yellow", width: "120px", textAlign: 'center' }}>风险等级</td>
              <td>  {this.state.cards?.EVALUATE_LEVEL}</td>
            </tr>
            <tr>
              <td style={{ backgroundColor: "yellow", width: "120px", textAlign: 'center' }}>安全标志</td>
              <td> {this.state.cards?.photo ? showFiles(this.state.cards?.photo, config.picServerHost, this)
                : <img title={"安全标志"} src={require("../../../../src/assets/aqbz.png")} />
              }
              </td>
              <td style={{ backgroundColor: "red", color: "white", width: "150px", textAlign: 'center' }}>主要风险控制措施</td>
              <td> {this.state.cards?.MEASURES_NAME}</td>
            </tr>
            <tr>
              <td style={{ backgroundColor: "rgba(1,203,253)", color: "white", width: "120px", textAlign: 'center' }}>责任单位</td>
              <td> {this.state?.departName}</td>
              <td style={{ backgroundColor: "red", color: "white", width: "150px", textAlign: 'center' }}>主要事故类型</td>
              <td> {this.state.cards?.RISK_TYPE}</td>
            </tr>
            <tr>
              <td style={{ backgroundColor: "rgba(1,203,253)", color: "white", width: "120px", textAlign: 'center' }}>责任人联系电话</td>
              <td> {this.state?.phone}</td>
              <td style={{ backgroundColor: "red", color: "white", width: "150px", textAlign: 'center' }}>应急处置措施</td>
              <td> {this.state.cards?.EMERGENCY}</td>
            </tr>
          </table>

          <br></br>
        </Modal>
        <br></br>
        <Modal
          visible={this.state.showDetail}
          title="岗位风险清单"
          maskClosable={false}
          onCancel={this.handleCancel}
          footer={null}
          className="antd-modal-fullscreen"
          closeModal={this.closeModal}
        >
          <Table
            dataSource={this.state.Details}
            columns={this.state.columns}
            pagination={true}
            bordered
            loading={false}
            size="small"
          />
        </Modal>
        <br></br>
        <Row style={{ width: "1250px", margin: "auto" }}>
          <Col span={5}>
            <Form.Item
              label={'生产单元'}
              {...formItemLayout}
            >
              <Select
                style={{ width: '180px' }}
                allowClear
                onChange={this.handleSearch3}
              >
                <Option value="30">露天矿</Option>
                <Option value="10">选矿厂</Option>
                <Option value="20">尾矿库</Option>
                <Option value="31">职能口</Option>
                <Option value="32">非金属</Option>
                <Option value="40">地下矿</Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={5} style={{ marginLeft: "10px" }}>
            {/* <Form.Item
                  label={'辨识部门'}
                  {...formItemLayout}
                >
                    <Input
                onChange={this.handleSearch}
                style={{ width: "150px" }}
              ></Input>
                </Form.Item> */}
            <Form.Item
              label={'辨识部门'}
              {...formItemLayout}
            >
              <DropDownPagination inputDataApi={'SK/SKEnterpriseLibrary/DepartOrderPaged'} fieldName={'Nav_Department.NAME'}
                data={this.state.depart} onSelect={this.handleSearch} onFilter={({ params }) => {
                  params.OrderType = 1
                  params.Keyword = this.state.inputText3
                  params.OrgId = this.props.login.OrgId
                }} />
            </Form.Item>
          </Col>

          <Col span={5} style={{ marginLeft: "10px" }}>
            <Form.Item
              label={'辨识岗位'}
              {...formItemLayout}
            >
              {/* <Input
                onChange={this.handleSearch2}
                style={{ width: "150px" }}
              ></Input> */}
              <DropDownPagination inputDataApi={'SK/SKEnterpriseLibrary/PostOrderPaged'} fieldName={'Nav_Post.NAME'}
                data={this.state.post} onSelect={this.handleSearch2} onFilter={({ params }) => {
                  params.OrderType = 1
                  params.Keyword = this.state.departId
                  params.OrgId = this.props.login.OrgId
                }} />
            </Form.Item>
          </Col>
          <Col span={1} style={{ marginLeft: "20px" }}><Button type='primary' onClick={() => this.loadData2()}>查询</Button></Col>
        </Row>
        <div>
          <h1 style={{ textAlign: 'center', margin: '15px' }}>岗位风险清单</h1>
          {this.state.dataList ?
            <Table style={{ width: "1250px", margin: "auto", alignContent: "center", backgroundColor: "white" }}
              dataSource={this.state.dataList}
              columns={this.state.columndatas}
              pagination={true}
              bordered
              loading={false}
              size="small"
            />
            : []}
        </div>
      </div>
      {
        GetFileModel(Modal, FormPage, this, this.state.fileForm.visible)
      }
    </div>
  }

}

export default connect(({ login, app }) => ({ login, app }))(SK004CheckPost)