import React from 'react';
import './index.scss';
import Input from '../../libs/Input';
// import Button from '../../libs/Button';
import { Button, Select } from 'antd';

// import Default from '../../assets/scale_default.png'
const Option = Select.Option;

function typeStatus(type) {
  switch (type) {
    case 1:
      return '企业体检';
    case 2:
      return '培训活动';
    case 3:
      return '未检调查';
    case 4:
      return '刑执监督';
  }
}
class QuestionnairContent extends React.PureComponent {
  state = {
    questionnairSign: false,
    questionnairTitle: '',
    questionnairDescription: '',
    questionnairBusinessType: '',
  };

  componentDidMount() {
    const { title, content, businessType } = this.props.initData;
    console.log(title);
    this.setState({
      questionnairTitle: title,
      questionnairDescription: content,
      // questionnairBusinessType: typeStatus(businessType)
      questionnairBusinessType: businessType,
    });
  }
  //新增题目时内容页滚动到底部
  componentDidUpdate() {
    if (this.scrollBottom) {
      const scrollHeight = this.content.scrollHeight;
      this.page.scrollTo(0, scrollHeight);
    }
    if (this.scrollTo) {
      this.page.scrollTo(0, this.scrollTo);
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isFirst) {
      this.scrollBottom = true;
    } else {
      this.scrollBottom = false;
    }
    if (nextProps.scrollTo !== this.props.scrollTo) {
      this.scrollTo = nextProps.scrollTo;
    } else {
      this.scrollTo = false;
    }
    this.setState({
      questionnairSign: nextProps.questionnairSign,
      // questionnairTitle: nextProps.questionnairTitle,
      // questionnairDescription: nextProps.questionnairDescription
    });
  }

  handleSign = () => {
    const { onChangeSign } = this.props;
    this.setState(
      (prevState) => ({
        questionnairSign: !prevState.questionnairSign,
      }),
      () => {
        onChangeSign(this.state.questionnairSign);
      }
    );
  };

  handleChange = ({ target: { value, name } }) => {
    console.log(value, name);
    this.setState({
      [name]: value,
    });
  };

  handleBlur = () => {
    // const { onBlurTitle } = this.props;
    // if (onBlurTitle) {
    //   onBlurTitle(this.state.questionnairTitle);
    // }
  };

  render() {
    const {
      questionnairSign,
      questionnairTitle,
      questionnairDescription,
      questionnairBusinessType,
    } = this.state;
    const { submitQuestionTemp, editors, btnLoading } = this.props;
    console.log(questionnairBusinessType);
    const questionnairtitleEl = (
      <div className="title-inner">
        <span style={{ color: 'red' }}>*</span>
        <Input
          placeholder="问卷标题"
          value={questionnairTitle}
          name="questionnairTitle"
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          style={{
            height: 45,
            borderColor: 'transparent',
            textAlign: 'center',
            fontSize: 18,
            color: '#666',
            fontFamily: 'PingFangSC-Medium',
          }}
          className="title-input"
        />
      </div>
    );
    const questionnairDescriptionEl = (
      <div className="title-inner" style={{ marginTop: 10 }}>
        <Input
          placeholder="问卷描述"
          value={questionnairDescription}
          name="questionnairDescription"
          onChange={this.handleChange}
          onBlur={this.handleBlur}
          style={{
            height: 25,
            borderColor: 'transparent',
            textAlign: 'left',
            fontSize: 16,
            color: '#666',
            fontFamily: 'PingFangSC-Medium',
          }}
          className="title-input"
        />
      </div>
    );
    const questionnairBusinessType1 = (
      <div className="title-inner" style={{ marginTop: 10 }}>
        <span style={{ color: 'red' }}>*</span>
        <Select
          placeholder="业务类型"
          value={questionnairBusinessType}
          style={{
            width: '100%',
            textAlign: 'center',
            fontSize: 18,
            color: '#666',
            fontFamily: 'PingFangSC-Medium',
          }}
          onChange={(value) =>
            this.handleChange({
              target: { name: 'questionnairBusinessType', value },
            })
          }
        >
          <Option value={1}>企业体检</Option>
          <Option value={2}>培训活动</Option>
          <Option value={3}>未检调查</Option>
          <Option value={4}>刑执监督</Option>
        </Select>
      </div>
    );
    return (
      <div className="questionnair-page" ref={(el) => (this.page = el)}>
        <div className="questionnair-page-banner">
          {/* <div className='banner-text' onClick={this.handleSign} style={{ color: questionnairSign ? '#FFBF47' : '' }}>
            <i className="iconfont icon-dengpao"></i>
            <span style={{ marginLeft: 6 }}>{questionnairSign ? '取消标记' : '标记'}</span>
          </div> */}
        </div>
        <div className="questionnair-page-title">
          {questionnairtitleEl}
          {questionnairDescriptionEl}
          {questionnairBusinessType1}
        </div>
        <div
          className="questionnair-page-content"
          ref={(el) => (this.content = el)}
        >
          {/*如果组件没有子节点，this.props.children返回false*/}
          {this.props.children || (
            <div className="questionnair-page-default">
              {/* <img src={Default} style={{ width: 130 }}/> */}
              <div className="page-default-text">
                您还没有添加题目哦，请点击左侧控件开始出题吧
              </div>
            </div>
          )}
        </div>
        {this.props.children && (
          <div className="questionnair-page-footer">
            <div className="footer-text">
              <Button
                loading={btnLoading}
                type="primary"
                onClick={() => {
                  if (this.props.isThereEditor()) {
                    return;
                  }
                  // this.props.isThereEditor();
                  submitQuestionTemp(editors, {
                    questionnairTitle,
                    questionnairDescription,
                    questionnairBusinessType,
                  });
                }}
              >
                提交问卷模板
              </Button>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default QuestionnairContent;