import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import Page from '@/layouts/index';
import { Cell, CellGroup, Field, Button, Radio, RadioGroup } from '@antmjs/vantui';
import Uploader from '@/components/Uploader/index';
import { putTaIssueApply, getTaIssueApplyById } from '@/services/taissueapply';
import { warn } from '@/utils/message';
import { APPLY_PASS, APPLY_REJECT, PROCESS_APPLY_DELAY, PROCESS_APPLY_REJECT } from '@/utils/biz';
import { getTaOrgIssueByIssueId } from '@/services/taorgissue';
import Issue from '../components/Issue';
import useTitle from '../useTitle';

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

  const router = Taro.useRouter();
  const { id, applyType, issueId } = router.params;

  const [loading, setLoading] = React.useState(false);
  const [applyInfo, setApplyInfo] = React.useState({});
  const [orgIssue, setOrgIssue] = React.useState({});
  
  const [submitting, setSubmitting] = React.useState(false);
  const [formData, setFormData] = React.useState({});
  
  useTitle(applyType);

  const setFieldValue = (key, value) => {
    setFormData({
      ...formData,
      [key]: value,
    })
  }
  
  const onSubmit = () => {
    try {
      warn(!formData.verifyStatus, '请选择审批结果');
      warn(!formData.verifyDesc && formData.verifyStatus == 'reject', '请填写审批说明');
    } catch (e) {
      return ;
    }

    const data = {
      ...applyInfo,
      ...formData
    }

    setSubmitting(true);
    putTaIssueApply(data.applyId, data).then(() => {
      Taro.navigateBack({delta: 1});
      setSubmitting(false);
    }).catch(() => {
      setSubmitting(false);
    })
  }
  
  React.useEffect(() => {
    if (id) {
      setLoading(true);
      getTaIssueApplyById(id).then(res => {
        setApplyInfo(res);

        getTaOrgIssueByIssueId(res.issueId, res.orgId).then(r => {
          setOrgIssue(r);
        });

        setLoading(false);
      }).catch(() => {
        setLoading(false);
      });
    }
  }, [id]);
  
  return (
    <Page loading={loading}>
      <Issue issueId={issueId} />
     
     {
        applyInfo.applyType == PROCESS_APPLY_DELAY && (
          <CellGroup style={{marginTop: '20px'}}>
            <Cell
              title="延期日期"
              value={applyInfo.content}
            />
            <Cell title="申请说明" />
            <Field
              readonly
              type="textarea"
              autosize={{ minHeight: '120px' }}
              value={applyInfo.remark}
            />
          </CellGroup>
        )
     }

     {
        applyInfo.applyType == PROCESS_APPLY_REJECT && (
          <CellGroup style={{marginTop: '20px'}}>
            <Cell title="申请说明" />
            <Field
              readonly
              type="textarea"
              autosize={{ minHeight: '120px' }}
              value={applyInfo.remark}
            />
          </CellGroup>
        )
     }

     {
        applyInfo.applyType != PROCESS_APPLY_DELAY && applyInfo.applyType != PROCESS_APPLY_REJECT && (
          <CellGroup style={{marginTop: '20px'}}>
            <Cell title="整改结果" />
            <Field
              readonly
              type="textarea"
              autosize={{ minHeight: '120px' }}
              value={orgIssue.result}
            />
    
            <Cell title="整改照片" border={false} />
            <Cell
              renderTitle={
                <Uploader
                  disabled
                  value={orgIssue.attachList}
                />
              }
            />
          </CellGroup>
        )
     }
          
      <CellGroup style={{marginTop: '20px'}}>
        <Cell
          title="审批结果"
        >
          <RadioGroup
            direction="horizontal"
            value={formData.verifyStatus}
            onChange={(e) => setFieldValue('verifyStatus', e.detail)}
          >
            <Radio name={APPLY_PASS} checkedColor="var(--main-bg-color)">通过</Radio>
            <Radio name={APPLY_REJECT} checkedColor="red">驳回</Radio>
          </RadioGroup>
        </Cell>
        <Cell title="审批说明" />
        <Field
          type="textarea"
          autosize={{ minHeight: '120px' }}
          value={formData.verifyDesc}
          onChange={(e) => setFieldValue('verifyDesc', e.detail)}
        />
      </CellGroup>
      <View style={{marginTop: '20px', padding: 'var(--main-space)'}}>
        <Button block type="primary" loading={submitting} onClick={onSubmit}>审 批</Button>
      </View>
    </Page>
  )
}
