import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Cell, CellGroup, Field, Button, Popup } from '@antmjs/vantui';
import DatePicker from '@/components/DatePicker';
import { getDateStr } from '@/utils/date';
import { postTaIssueApply } from '@/services/taissueapply';
import { putTaOrgIssue } from '@/services/taorgissue';
import { warn } from '@/utils/message';
import {
  PROCESS_APPLY_DELAY,
  PROCESS_APPLY_END,
  PROCESS_APPLY_REJECT,
  PROCESS_APPLY_VERIFY
} from '@/utils/biz';

const today = new Date();
export default (props) => {

  const { orgIssue, applyType, ...leftProps } = props;

  const [show, setShow] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [showDatePicker, setShowDatePicker] = React.useState(false);

  // 申请表记录
  const [formData, setFormData] = React.useState({});

  const setFieldValue = (key, value) => {
    setFormData({
      ...formData,
      [key]: value,
    })
  }

  const onDateClick = () => {
    setShow(false);
    setShowDatePicker(true);
  }
  
  const onDateChange = (dt) => {
    const date = getDateStr(dt);
    setFieldValue('content', date);
    setShowDatePicker(false);
    setShow(true);
  }

  const onClick = () => {
    if (applyType == PROCESS_APPLY_VERIFY || applyType == PROCESS_APPLY_END) {
      onSubmit();
    } else {
      setShow(true);
    }
  }

  const onSubmit = () => {
    try {
      warn(!orgIssue || !orgIssue.issueId, '未找到问题单');

      if (applyType == PROCESS_APPLY_VERIFY || applyType == PROCESS_APPLY_END) {
        warn(!orgIssue.attachList || !orgIssue.attachList.length, '请上传照片');
        warn(!orgIssue.result, '请填写整改结果');
      }

      warn(applyType == PROCESS_APPLY_DELAY && !formData.content, '请设置延期时间');
      warn(applyType == PROCESS_APPLY_REJECT && !formData.remark, '请填写驳回理由');
    } catch (e) {
      return ;
    }

    const data = {
      applyType,
      issueId: orgIssue.issueId,
      ...formData
    }

    if (applyType == PROCESS_APPLY_VERIFY || applyType == PROCESS_APPLY_END) {
      // 先保存数据
      setSubmitting(true);
      putTaOrgIssue(orgIssue.orgIssueId, orgIssue).then(() => {
        // 再调用申请接口
        postTaIssueApply(data).then(() => {
          Taro.navigateBack({delta: 1});
          setSubmitting(false);
        }).catch(() => {
          setSubmitting(false);
        })
      }).catch(() => {
        setSubmitting(false);
      })
    } else {
      // 直接调用申请接口
      postTaIssueApply(data).then(() => {
        Taro.navigateBack({delta: 1});
        setSubmitting(false);
      }).catch(() => {
        setSubmitting(false);
      })
    }
  }

  
  return (
    <>
      <DatePicker
        type="date"
        minDate={today}
        show={showDatePicker}
        value={formData.content}
        onCancel={() => setShowDatePicker(false)}
        onChange={onDateChange}
      />
      <Popup position="bottom" show={show} onClose={() => setShow(false)}>
        <CellGroup>
          {
            applyType == PROCESS_APPLY_DELAY && (
              <Cell
                isLink
                title="延期时间"
                value={formData.content}
                onClick={onDateClick}
              />
            )
          }
          <Cell title="理由说明" />
          <Field
            type="textarea"
            autosize={{ minHeight: '120px' }}
            value={formData.remark}
            onChange={e => setFieldValue('remark', e.detail)}
          />
          <View style={{display: 'flex'}}>
            <Button block plain type="default" onClick={() => setShow(false)}>取消</Button>
            <Button block plain type="primary" loading={submitting} onClick={onSubmit}>确定</Button>
          </View>
        </CellGroup>
      </Popup>
      <Button {...leftProps} onClick={onClick}>{props.children}</Button>
    </>
  )
}
