import { Button, Descriptions,Popconfirm, Row, Col, Form,Modal, Input, Select, Table } from 'antd';
import React , { useState }from 'react';
import { initFilter, extendRule, extendInclude, extendIgnoreDataRule,setDataFieldValue, guid, initQueryFilter } 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 = {
          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: "MineType",
                key: "MineType",
                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_Librarys[0].MineType",
                key: "Nav_Librarys[0].MineType",
                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);
        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_Librarys[0]?.MineType == 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,
          }
          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>
           <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> <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>
    }

}

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