import React, {useEffect, useState} from 'react';
import { useModel } from 'umi';
import {Card, Row, Col} from 'antd'
import {createSubmitForm} from "@/utils/createForm";
import ImgUpload from '../../components/ImgUpload'

import PersonExchange from './PersonExchange'
import DateExchange from './DateExchange'
import {batchDicData} from "@/utils/utils";
import styles from '../../index.less'


const ShiftsForm = (props) => {
  const {initialState} = useModel('@@initialState')
  const {type, form, disabled, level} = props;

  const [leaveType, setLeaveType] = useState('2')

  /**
   * @页面数据
   */
  const checkPerson = async (_, value) => {
    if (value){
      const {auserId, auserName, buserId, buserName} = value;
      if (leaveType !=='1' && auserId && auserName && buserId && buserName) {
        return Promise.resolve();
      }
      if (leaveType === '1' && auserName && auserId){
        return Promise.resolve();
      }
      return Promise.reject(new Error('请选择调班人员'));
    }
    return Promise.reject(new Error('请选择调班人员'));
  };

  const { emergencyType } = batchDicData(
    [ 'emergencyType'],
    initialState?.dicTotalsList || []
  )

  const daysChange = range => {
    form.setFieldsValue({adjustmentDays: range})
  }

  const typeChange = val => {
    console.log(val, typeof val)
    setLeaveType(val)
    form.setFieldsValue({
      personBOS: {},
      timeBOS: [{}],
      adjustmentDays: 1
    })
  }
  const shiftsData = [
    {autoLayout: {}, span: 12, disabled, label: '调班名称', name: 'adjustmentName', require: true, type: 'input'},
    {autoLayout: {}, span: 12, disabled, label: '调班类型', name: 'adjustmentType', require: true, type: 'select',
      selectData: [
        {label: '个人调班', value: '1'},
        {label: '对调调班', value: '2'},
        {label: '顶班调班', value: '3'}
        ],
      onChange: typeChange
    },
    {autoLayout: {}, span: 24, disabled, label: '调班人选', name: 'personBOS', require: true, validator: checkPerson, type: 'auto',
      auto: <PersonExchange type={leaveType}  disabled={disabled}/>,
    },
    {autoLayout: {}, span: 24, disabled, label: '调班日期', name: 'timeBOS', require: true, type: 'autoFL',
      auto: <DateExchange type={leaveType} name="timeBOS" onRange={daysChange} disabled={disabled}/>,
    },
    {autoLayout: {}, span: 12, disabled: true, label: '调班天数', name: 'adjustmentDays', require: true, type: 'input' },
    {autoLayout: {}, span: 12, disabled, label: '紧急程度', name: 'urgency', require: true, type: emergencyType.type, selectData: emergencyType.selectData},
    {autoLayout: {}, span: 24, disabled, label: '调班事由', name: 'adjustmentReason', require: true, type: 'textArea' },
    {autoLayout: {}, span: 24, disabled, label: '附件', name: 'enclosurs', type: 'auto', auto:  <ImgUpload type={type}/> },
  ]

  useEffect(() => {
    setLeaveType(String(level))
  }, [level])

  return (
    <Card>
      <Row gutter={24} style={{width: '65%'}} className={styles.no_list_box}>
        {shiftsData.map((item, index) => (
          <Col key={index} span={item.span || 24}>
            {createSubmitForm(item)}
          </Col>
        ))}
      </Row>
    </Card>
  );
};

export default ShiftsForm