import React from 'react'
import { connect } from 'dva'
import { Button, Row, Col, Form, Input, Select, Transfer, message, Upload, Icon, Modal, DatePicker,Progress } from 'antd'
import {
  extend,
  extendRule,
  initFilter,
  getOnlyPropertyData,
  extendIgnoreDataRule,
  extendInclude,
  setDataFieldValue,
  getPropertyData,
  guid
} from '../../../utils/common'
import moment from 'moment'
import DropDownPagination from '../../common/DropDownPaginationEx'
import config from '../../../config'
import classNames from 'classnames'
import stylesStep from '../HI/StepForm.css';
import styles from '../../../baseComponents/Component.css'
import storage from '../../../utils/storage'
import FormPage from '../../FormPage';
import MultiSelectPagination from "../../common/MultiSelectPagination";
import FoTeamActivity from '../FO/FoTeamActivity'
const Option = Select.Option
const { TextArea } = Input

class PT014ShowPrintOld extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: {
        // PASSWORD: 'E10ADC3949BA59ABBE56E057F20F883E', // 默认密码为123456
      },
      btns: [],
      display:'none',
      BtnAgreeDisplay: 'none',
    }

  };

  componentDidMount() {
    this.props.form.resetFields()
    this.loadData()
  };

  componentWillReceiveProps(NextProps) {
    if (NextProps.data?.id && this.props.data?.id != NextProps.data?.id) {
      this.props.form.resetFields()
      this.loadData(NextProps.data?.id);
  }
  }

  loadData = () => {
    const { data, formId, login} = this.props
    const { id } = data || {}


    if (id) {
      let that=this;
      const json = initFilter(that.props.login.OrgId)
      extendRule(json, 'ID', 1, id)
      extendIgnoreDataRule(json)
      that.props.dispatch({
        type: 'app/getDataByPost',
        url: 'PT/PTSafetyPolicySurvey/GetCollectEdit',
        payload: json,
        onComplete: (ret) => {
          if (ret) {
            if(that.props.data && that.props.data.loadDataDeal)
            {
                that.props.data.loadDataDeal(1);
            }
            if (that.props.data.tableKey==="2" ||that.props.data.tableKey===undefined) {
              that.setState({ BtnAgreeDisplay: 'none' })
          }else{
              that.setState({ BtnAgreeDisplay: 'inline' })
          }
          that.setState({
              data: ret,
            })
          }
          else
          { message.error('请先尝试刷新，若仍然加载失败，请联系管理员排查!');}
        }
      })
    }
    else {
      this.props.form.resetFields()

      this.setState({
        data: {
          ...this.state.data,
          ORG_ID: this.props.login.OrgId,
          ID: guid(),
        },
      })
      const { form, } = this.props
      const { setFieldsValue } = form
      if (this.props.login.OrgCode) {
        setFieldsValue({
          CODE: (this.props.login.OrgCode),
        })
      }
    }
    // if (formId) {
    //   const btnJson = initFilter(this.props.login.OrgId, '', 'NUM', 0)
    //   extendRule(btnJson, 'PAGE_CUSTOM_FORM_ID', 1, formId)
    //   this.props.dispatch({
    //     type: 'FMUserEdit/getBtnList',
    //     payload: btnJson,
    //     onComplete: (ret) => {
    //       if (ret) {
    //         this.setState({
    //           btns: ret,
    //         })
    //       }
    //     }
    //   })
    // }


  };

  handleOk = () => {
    const { form, dispatch, data } = this.props
    const { validateFieldsAndScroll } = form
    validateFieldsAndScroll((errors, values) => {
      if (errors) return
      const json = initFilter(this.props.login.OrgId)
      extendRule(json, 'ID', 1, data.id)
      extendRule(json, 'TASK_ID', 1, data.TaskID)
      dispatch({
        type: 'app/getDataByPost',
        url: 'PT/PTSafetyPolicySurvey/IdentityUpdate',
        payload: json,
        onComplete: (ret) => {
          if (ret) {
            if (ret) {
              this.setState({ BtnAgreeDisplay: 'none' })
              this.BtnClose();
            }
            message.success('执行成功')
          }
        }
      })
    })
  };
  
  BtnClose = () => {
    if (typeof this.props.data.onCancel != "undefined"&&typeof this.props.data.onCancel == 'function')
        this.props.data.onCancel();
  }
  onClickCollect =(id,guidId) =>{
    const json = initFilter(this.props.login.OrgId, guidId)
      extendRule(json, 'ID', 1, id)
      this.props.dispatch({
        type: 'app/getDataByPost',
        url: 'PT/PTSafetyPolicySurvey/GetCollectEdit',
        payload: json,
        onComplete: (ret) => {
          if (ret) {
            this.setState({
              data: ret,
              display:'block'
            })
          }
        }
      })
  }
  render() {
    const { form } = this.props
    const { getFieldDecorator } = form

    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 18 },
    }
    const onSelectDepartment = ({ data, record }) => {
      
      if (data && data.length > 0) {
        this.setState({
          data: {
            ...this.state.data,
            DEPARTMENT_ID: data[0],
            Nav_Department: { NAME: record.NAME }
          }
        })
      }
      else {
        this.setState({
          data: {
            ...this.state.data,
            Nav_Department: { NAME: null },
            DEPARTMENT_ID: null,
          }
        })
      };
    }
    const onSelectUser = ({ data, record }) => {
      if (data && data.length > 0) {
        this.setState({
          data: {
            ...this.state.data,
            USER_ID: data[0],
            Nav_User: { NAME: record.NAME }
          }
        })
      }
      else {
        this.setState({
          data: {
            ...this.state.data,
            Nav_User: { NAME: null },
            USER_ID: null,
          }
        })
      };
    }
    const onSelectCollect = (value) => {
      var tmpData = { ...this.state.data }
      setDataFieldValue(tmpData, 'Nav_Collects', value)
      this.setState({
        data: tmpData,
      });
    }
    // const onSelectCollect = ({ data, record }) => {
    //   if (data && data.length > 0) {
    //     this.setState({
    //       data: {
    //         ...this.state.data,
    //         COLLECT_ID: data[0],
    //         Nav_Collect: { NAME: record.NAME }
    //       }
    //     })
    //   }
    //   else {
    //     this.setState({
    //       data: {
    //         ...this.state.data,
    //         Nav_Collect: { NAME: null },
    //         COLLECT_ID: null,
    //       }
    //     })
    //   };
    // }

    const onChange = (field, value,) => {
      const data = { ...this.state.data };
      data[field] = value;
      this.setState({
        data: data,
      });
    }
   
    return (

      <Form style={{ padding: 12, overflow: 'hidden' }}>
        <div className={styles.topBar}>
          <div className={classNames(styles.topBarLeftBtns, styles.antBtns_mr8)}>
          <Button type='primary' style={{ display: this.state.BtnAgreeDisplay }} onClick={() => this.handleOk()}>已阅</Button>
          </div>
        </div>
        <Row gutter={32}>
          <Col span={16}>
            <Row>
              <Col span={8}>
                <Form.Item
                  label={'发起时间'}
                  {...formItemLayout}
                >
                  {getFieldDecorator('CREATE_TIME', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.CREATE_TIME,
                    rules: [{  message: '请输入发起时间' }],
                  })(<Input disabled={true} maxLength={30} placeholder={'请输入发起时间'} />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={'年度'}
                  {...formItemLayout}
                >
                  {getFieldDecorator('YEAR', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.YEAR,
                    rules: [{  message: '请输入年度' }],
                  })(<Input disabled={true} maxLength={30} placeholder={'请输入年度'} />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={'发起部门'}
                  {...formItemLayout}
                >
                  {getFieldDecorator('Nav_Department.NAME', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.Nav_Department?.NAME,
                    rules: [{  message: '请输入发起部门' }],
                  })(<Input disabled={true} maxLength={30} placeholder={'请输入发起部门'} />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={'发起人员'}
                  {...formItemLayout}
                >
                  {getFieldDecorator('Nav_User.NAME', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.Nav_User?.NAME,
                    rules: [{  message: '请输入发起人员' }],
                  })(<Input disabled={true} maxLength={30} placeholder={'请输入发起人员'} />)}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  label={'征集截至时间'}
                  {...formItemLayout}
                >
                  <DatePicker
                    value={moment(this.state.data.COMPLETE_DATE)}
                    placeholder={'请输入征集截至时间'}
                    onChange={(value, dateString) => { onChange('COMPLETE_DATE', dateString, 0) }}
                  />
                </Form.Item>
              </Col>
              {/* <Col span={8}>
                <Form.Item
                  label={'征集截至时间'}
                  {...formItemLayout}
                >
                  {getFieldDecorator('COMPLETE_DATE', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.COMPLETE_DATE,
                    rules: [{  message: '请输入征集截至时间' }],
                  })(<Input disabled={true} maxLength={30} placeholder={'请输入征集截至时间'} />)}
                </Form.Item>
              </Col> */}
              {/* <Col span={8}>
                <Form.Item
                  label={'征集要求'}
                  {...formItemLayout}
                >
                  {getFieldDecorator('Nav_Collect.NAME', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.Nav_Collect?.NAME,
                    rules: [{  message: '请输入征集要求' }],
                  })(<Input disabled={true} maxLength={30} placeholder={'请输入征集要求'} />)}
                </Form.Item>
              </Col> */}
               <Col span={8}>
                <Form.Item
                  label={'征集要求'}
                  {...formItemLayout}
                >
                  <MultiSelectPagination api={'PT/CollectRequirements/OrderPaged'}
                    data={
                      {
                        navField: 'ID,NAME',
                        saveField: 'COLLECT_ID,Nav_Collect.NAME',
                        labelField: "Nav_Collect.NAME",
                        showField: "NAME",
                        filterField: "NAME",
                        idField: "SAFETY_POLICY_ID",
                        selectLabelField: "NAME",//不配置则默认取labelField，如果labelField也不配置，默认取NAME字段
                      }
                    }
                    colConfig={{ field: "Nav_Collects" }}
                    record={this.state.data} onChange={onSelectCollect} onFilter={({ params }) => {
                      params.OrderType = 1
                      params.OrgId = this.state.data ? this.state.data.ORG_ID : this.props.login.OrgId
                    }} />
                </Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>
        {/* <Row>
        {
                    this.state.data ?  <table style={{ width: '100%', textAlign: 'left'}} className={stylesStep.PrintForm1}>
                    <tr>
                    <td  style={{width:"100px"}} className={stylesStep.fontBold}>序号</td>
                    <td className={stylesStep.fontBold}>发布范围</td>
                    </tr>
                    {
                                    this.state.data?.Nav_Ranges && this.state.data?.Nav_Ranges.map((item,i)=>{
                                        return <tr>
                                            <td>
                                                {i+1}
                                            </td>
                                            <td>
                                                {item.Nav_Department?.NAME}
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
        </Row> */}
        <Row>
        {
                    this.state.data ?  <table style={{ width: '100%', textAlign: 'left'}} className={stylesStep.PrintForm1}>
                    <tr>
                    <td  style={{width:"100px"}} className={stylesStep.fontBold}>序号</td>
                    <td  style={{width:"100px"}} className={stylesStep.fontBold}>意向方针</td>
                    <td className={stylesStep.fontBold}>比例</td>
                    </tr>
                    {
                                    this.state.data.IntentionalGuids && this.state.data.IntentionalGuids.map((item,i)=>{
                                        return <tr>
                                            <td>
                                                {i+1}
                                            </td>
                                             <td>
                                                {
                                                  item.GUIDELINES_NAME 
                                                }
                                            </td>
                                            <td>
                                              <Progress percent={item.RATE } status="active" onClick={() => this.onClickCollect(this.state.data.ID,item.GUIDELINES_ID)} />
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>:null 
                }
        </Row>
        <br></br>
        <Row>
          <table style={{tableLayout:'fixed',width:'100%', display:this.state.display}} className={stylesStep.PrintForm1}>
                    <tr>
                    <td style={{width:"100px"}}className={stylesStep.fontBold}>序号</td>
                    <td width='10%' className={stylesStep.fontBold}>填写人</td>
                    <td width='10%' className={stylesStep.fontBold}>填写人部门</td>
                    <td width='10%' className={stylesStep.fontBold}>意向方针</td>
                    <td className={stylesStep.fontBold}>其他意见</td>
                    <td width='10%'className={stylesStep.fontBold}>填写时间</td>
                    </tr>
                    {
                                    this.state.data.Nav_Feedbacks && this.state.data.Nav_Feedbacks.map((item,i)=>{
                                        return <tr>
                                             <td>
                                                {i+1}
                                            </td>
                                             <td>
                                                {
                                                  item.Nav_User?.NAME 
                                                }
                                            </td>
                                            <td>
                                                {
                                                  item.Nav_Department?.NAME
                                                }
                                            </td>
                                            <td>
                                                {
                                                  item.Nav_Guidelines?.NAME
                                                }
                                            </td>
                                            <td>
                                                {
                                                  item.OTHER_SUGGESTIONS
                                                }
                                            </td>
                                            <td>
                                                {
                                                  item.CREATE_TIME
                                                }
                                            </td>
                                        </tr>
                                    })
                                }
                    </table>
        </Row>
      </Form>
    )
  }
}

export default connect(({ login, FMBase, custom }) => ({ login, FMBase, custom }))(Form.create()(PT014ShowPrintOld))
