import React, { Component } from "react";
import { Form, Radio } from "antd";
import PicturesWall from "./changeComponent/picturesWall.js";


/**
 * 订单保密&违约说明
 */
const FormItem = Form.Item;
class ConfidenBreach extends Component {
  constructor(props) {
    super(props);
  }

  onChange(value, updateKey) {
    this.props.onChange(value, updateKey)
  }

  render() {
    const { orderNo, data: { nda, ndaUrl, breachClauseUrl, breachClause1, breachClause2 } } = this.props;
    
    let ndaString = nda !== null && nda !== undefined ? nda.toString() : ''

    return (
      <div>
        <div style={{display: 'flex', alignItems: 'center' }}>
          <h3
            style={{
              marginLeft: 10,
              fontWeight: 800,
              marginBottom: 10,
            }}
          >
            保密&违约说明 &nbsp; &nbsp; &nbsp;
          </h3>
          <div style={{ padding: '10px', backgroundColor: 'yellow', color: '#000' }}>
            <p>营销说明：未如实填报，责任由营销本人全部承担</p>
            <p>技术说明：请认真阅读保密/违约条款，并规避相关事项，含保密要求的企业，发送任何资料必须脱密</p>
          </div>
        </div>
        
        <FormItem
          labelCol={{ span: this.props.labelCol || 5 }}
          wrapperCol={{ span: this.props.wrapperCol || 19 }}
          label={<span><strong style={{ color: "#f00" }}>*</strong>是否签订保密协议</span>}
        >
          <Radio.Group
            onChange={(e) => { this.onChange(e.target.value, 'nda') }}
            value={ndaString}
          >
            <Radio value='0'>无</Radio>
            <Radio value='1'>有</Radio>
          </Radio.Group>

          {nda == 1 ? (
            <div>
              <PicturesWall
                domId={"ndaImg"}
                orderNo={orderNo}
                fileList={(e) => { this.onChange(e, 'ndaUrl') }}
                pictureUrl={ndaUrl}
                url="/api/admin/orderChange/uploadFile"
                sign="nda"
              />
              <p>图片建议：要清晰。</p>
            </div>
          ) : null}

        </FormItem>
        <FormItem
          labelCol={{ span: this.props.labelCol || 5 }}
          wrapperCol={{ span: this.props.wrapperCol || 19 }}
          label={<span><strong style={{ color: "#f00" }}>*</strong>是否有违约条款</span>}
        >
          <Radio.Group
            onChange={e => {this.onChange(e.target.value, 'breachClause1')}}
            value={breachClause1}
          >
            <Radio value='0'>无</Radio>
            <Radio value='1'>有，有限责任违约条款</Radio>
            <Radio value='2'>有，无限责任违约条款</Radio>
          </Radio.Group>

          {breachClause1 && '1,2'.indexOf(breachClause1) > -1 ? (
            <div>
              <Radio.Group
                onChange={(e) => { this.onChange(e.target.value, 'breachClause2') }}
                value={breachClause2}
              >
                <Radio value='1'>与技术服务有关</Radio>
                <Radio value='0'>与技术服务无关</Radio>
              </Radio.Group>

              <div>
                <PicturesWall
                  domId={"breachClauseImg"}
                  orderNo={orderNo}
                  fileList={(e) => { this.onChange(e, 'breachClauseUrl') }}
                  pictureUrl={breachClauseUrl}
                  url="/api/admin/orderChange/uploadFile"
                  sign="breach_clause"
                />
                <p>图片建议：要清晰。</p>
              </div>
            </div>

          ) : null}

        </FormItem>
      </div >
    );
  }
}

export default ConfidenBreach;
