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


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

  // 校验表单数据，对外部使用
  validFormData(data) {
    console.log(data)
    let flag = true;
    let msg = '';
    data.ndaUrl = data.ndaUrl || []
    data.breachClauseUrl = data.breachClauseUrl || []
    if (data.nda === undefined || data.nda === null || data.nda === '') {
      flag = false;
      msg = '请选择是否签订保密协议'
    } else if (data.nda == '1' && !data.ndaUrl.length) {
      flag = false;
      msg = '请上传保密协议图片'
    } else if (data.breachClause1 === undefined || data.breachClause1 === null || data.breachClause1 === '') {
      flag = false;
      msg = '请选择是否有违约条款'
    } else if (data.breachClause1 != '0' && !data.breachClause2) {
      flag = false;
      msg = '请选择与技术有关/无关'
    } else if (data.breachClause1 != '0' && !data.breachClauseUrl.length) {
      flag = false;
      msg = '请上传签约条款图片'
    }

    return { flag, msg }
  }

  // 转换表单数据，对外部使用
  transFormData(data) {
    let breachClause1, breachClause2 = ''
    if (data.breachClause == 0) {
      breachClause1 = '0'
    } else if (data.breachClause == 1) {
      breachClause1 = '1'
      breachClause2 = '1'
    } else if (data.breachClause == 2) {
      breachClause1 = '1'
      breachClause2 = '0'
    } else if (data.breachClause == 3) {
      breachClause1 = '2'
      breachClause2 = '1'
    } else if (data.breachClause == 4) {
      breachClause1 = '2'
      breachClause2 = '0'
    }
    return {
      nda: data.nda,
      ndaUrl: data.ndaUrl ? splitUrl(
        data.ndaUrl,
        ",",
        globalConfig.avatarHost + "/upload"
      ) : [],
      breachClause1,
      breachClause2,
      breachClauseUrl: data.breachClauseUrl ? splitUrl(
        data.breachClauseUrl,
        ",",
        globalConfig.avatarHost + "/upload"
      ) : []
    }
  }

  // 获取保密&违约说明数据，对外部使用
  getFormData(data) {
    const _data = Object.assign({}, data);
    _data.ndaUrl = _data.ndaUrl || [];
    _data.breachClauseUrl = _data.breachClauseUrl || [];
    if (_data.breachClause1 == '0') {
      _data.breachClause = '0'
    } else if (_data.breachClause1 == '1' && _data.breachClause2 == '1') {
      // 有限责任违约条款、与技术服务有关
      _data.breachClause = '1'
    } else if (_data.breachClause1 == '1' && _data.breachClause2 == '0') {
      // 有限责任违约条款、与技术服务无关
      _data.breachClause = '2'
    } else if (_data.breachClause1 == '2' && _data.breachClause2 == '1') {
      // 无限责任违约条款、与技术服务有关
      _data.breachClause = '3'
    } else if (_data.breachClause1 == '2' && _data.breachClause2 == '0') {
      // 无限责任违约条款、与技术服务无关
      _data.breachClause = '4'
    }
    _data.ndaUrl = _data.ndaUrl.map(item => item.response.data).join(',')
    _data.breachClauseUrl = _data.breachClauseUrl.map(item => item.response.data).join(',')
    delete _data.breachClause1
    delete _data.breachClause2
    return _data;
  }

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

  render() {
    const { orderNo } = this.props;
    const _data = this.props.data || {}
    const { nda, ndaUrl, breachClauseUrl, breachClause1, breachClause2 } = _data
    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;
