import React from "react";
import { Spin, Form, Modal, Button } from "antd";
import ajax from "jquery/src/ajax/xhr.js";
import $ from "jquery/src/ajax";
import ReactToPrint from "react-to-print";

const detail = React.createClass({
  getInitialState() {
    return {
      loading: false,
      data: {}
    };
  },

  // 获取详情
  getInfo() {
    this.setState({
      loading: true,
    })
    $.ajax({
      method: 'get',
      dataType: 'json',
      crossDomain: false,
      url: globalConfig.context + '/api/admin/RD/details',
      data: {
        id: this.props.rowdata.id,
      },
      success: function (data) {
        this.setState({
          data: data.data,
        })
        this.addBrowse()
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        })
      }.bind(this)
    )
  },
  // 浏览+1
  addBrowse() {
    let i = 20
    this.timer = setInterval(() => {
      i--;
      if (i == 0) {
        clearInterval(this.timer);
        $.ajax({
          method: 'post',
          dataType: 'json',
          crossDomain: false,
          url: globalConfig.context + '/api/admin/RD/addBrowse',
          data: {
            id: this.props.rowdata.id,
          },
          success: function (data) {

          }.bind(this),
        }).always(
          function () {

          }.bind(this)
        )
      }
    }, 1000)

  },
  // 下载+1
  addDownload() {
    $.ajax({
      method: 'post',
      dataType: 'json',
      crossDomain: false,
      url: globalConfig.context + '/api/admin/RD/addDownload',
      data: {
        id: this.props.rowdata.id,
      },
      success: function (data) {

      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    )
  },

  componentWillMount() {
    this.getInfo();
  },

  componentWillUnmount() {
    clearInterval(this.timer)
  },

  render() {
    const { data } = this.state
    return (
      <Modal
        title={null}
        visible={this.props.visible}
        onCancel={this.props.onCancel}
        footer={null}
        width={800}
        maskClosable={false}
      >
        <Form
          layout="horizontal"
          onSubmit={this.handleSubmit}
          id="demand-form"
          style={{ paddingBottom: '0px' }}
        >
          <ReactToPrint
            trigger={() => (
              <Button
                type="primary"
                style={{
                  float: "right",
                  marginTop: 10,
                  position: "absolute",
                  top: 0,
                  right: 60,
                  zIndex: 9,
                }}
              >
                打印
              </Button>
            )}
            content={() => this.refs.all}
          />
          <Spin spinning={this.state.loading}>
            <div className="clearfix"
              style={{ padding: "30px 80px" }}
              ref={(e) => {
                this.refs.all = e;
              }}
            >
              <h1 style={{ textAlign: "center", marginBottom: 30 }}>{data.rdName}</h1>
              <div className="formitems">项目起止时间：{data.rdStartS + " - " + data.rdEndS}</div>
              <div className="formitems">公司名称：{data.userName}</div>
              <div className="formitems">项目负责人：{data.consultantName}</div>
              <div className="formitems">技术领域：{data.technicalField}</div>
              <div className="formitems">技术来源：{data.technologySource}</div>
              <div className="formitems">研发费用总预计：{data.totalAmount}{" 万元"}</div>
              <div className="formitems">研发目的/立项目的/实施方式
                <p>
                  为维持良好的锅炉运行和性能，需要正确的对火焰侧操作和控制。
                  我公司锅炉炉瞠出口设有两套传统式的烟温探针，测温元件为热电偶，
                  测量范围0~570%C，在实际运行过程中由于执行机构等部件在高温环
                  境中容易出现故障，测温元件磨损、高温变形，当炉内温度超过580C时
                  为保护烟温探针要将其退出检测，导致炉瞠出口烟温不能连续在线检测
                  目前，锅炉烟温探针只能在锅炉启动初期对炉瞠出口烟温进行检测，以
                  防止再热器干烧超温。锅炉正常运行过程中烟温探针不能连续有效的提
                  供炉瞠出口烟气温度数据，对锅炉运行人员的操作参考性大大降低，在
                  火电机组发展的当今不利于锅炉和机组的安全性和经济性。为解决烟温
                  探针在运行中遇到的以上问题，加强对炉瞠出口烟温的连续测量，提高
                  锅炉的运行和性能，提高机组运行安全性，提出锅炉炉瞠红外测温设备
                  的研究与应用。
                </p>
              </div>
              <div className="formitems">核心技术/创新点
                <p>
                  提高测量精度及测量范围是解决该问题的前提条件，本项目的核心技术为
                  利用远红外探测器对锅炉燃烧过程中的产物-热CO2气体的温度进行探测。
                  该远红外探测器采用特殊设计的红外滤色镜的薄膜热电堆，使其光谱响应
                  只接受CO2特殊红外光谱段的能量，其他波长的红外能量都被滤除，它能
                  直接用来测量“视场”CO2气体的温度，真实反映锅炉炉瞠出口温度，利用
                  这一先进的测量方法来测量锅炉炉瞠出口温度，使其温度测量可以保持连
                  续性及准确性。
                </p>
              </div>
              <div className="formitems">成果
                <p>
                  本项目应用目前市场先进科技技术，实现了改动量小，改造费用低，工期
                  短的特性达到理想效果，该工程配置充足的研发资金，由伤害成套院进行
                  可行性研究报告，通过集团招标平台进行脱硝、脱硫除尘一体化 EPC工
                  程招标，小组成员参与的方式，推动研发活动顺利进
                </p>
              </div>
            </div>
          </Spin>
        </Form>
      </Modal>
    );
  },
});

export default detail;
