import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Cell, CellGroup, Field, Button } from '@antmjs/vantui';
import Page from '@/layouts/index';
import Uploader from '@/components/Uploader/index';
import { getTaIssueById } from '@/services/taissue';
import { getTaOrgIssueByIssueId } from '@/services/taorgissue';

import IssueInfo from '../../components/issue-info';
import Apply from './components/Apply';

const status = {
  delay: '延期申请中',
  reject: '驳回申请中',
  end: '办结申请中',
}

export default (props) => {

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

  const [loading, setLoading] = React.useState(false);
  const [issue, setIssue] = React.useState();
  const [orgIssue, setOrgIssue] = React.useState({});

  const [
    readOnly,
    statusTxt,
    showEditBtn,
  ] = React.useMemo(() => {
    if (!orgIssue.issueId) return [];

    return [
      issue?.applyId,
      status[orgIssue.result],
      orgIssue.processStatus == 'start' && !issue?.applyId
    ]

  }, [issue, orgIssue.issueId]);

  const setFormData = (key, value) => {
    setOrgIssue({
      ...(orgIssue || {}),
      [key]: value,
    })
  }

  React.useEffect(() => {
    if (id) {
      setLoading(true)
      getTaIssueById(id).then(res => {
        setLoading(false);
        setIssue(res);
      }).catch(() => {
        setLoading(false);
      });

      getTaOrgIssueByIssueId(id).then(res => setOrgIssue(res));
    }
  }, [id]);
  
  return (
    <Page loading={loading}>
      <IssueInfo issue={issue} />
      <CellGroup style={{marginTop: '20px'}}>
        <Cell title="整改结果" />
        <Field
          type="textarea"
          readonly={readOnly}
          autosize={{ minHeight: '120px' }}
          value={orgIssue.result}
          onChange={e => setFormData('result', e.detail)}
        />
      </CellGroup>
      <CellGroup style={{marginTop: '20px'}}>        
        <Cell title="拍照或视频" border={false} />

        <Cell
          renderTitle={
            <Uploader disabled={readOnly} value={orgIssue.attachList} onChange={e => setFormData('attachList',e)} />
          }
        />
      </CellGroup>

      {
        readOnly && (
          <CellGroup style={{marginTop: '20px'}}>
            <Cell title="状态" value={statusTxt} />
          </CellGroup>
        )
      }

      {
        !readOnly && (
          <View style={{marginTop: '20px', padding: 'var(--main-space)'}}>
            <View>
              {
                showEditBtn ?
                  <Button block type="primary">保存修改</Button> :
                  <Apply block type="primary" applyType="end" orgIssue={orgIssue}>申请办结</Apply>
              }
            </View>
            {
              !showEditBtn && (
                <View style={{marginTop: '20px'}}>
                  <Apply block type="primary" applyType="org-verify" orgIssue={orgIssue}>申请审核</Apply>
                </View>
              )
            }
            <View style={{marginTop: '20px', display: 'flex' }}>
              <Apply
                block
                plain
                hairline
                type="info"
                applyType="delay"
                orgIssue={orgIssue}
              >申请延期</Apply>
              <Apply
                block
                plain
                hairline
                type="danger"
                applyType="reject"
                orgIssue={orgIssue}
                style={{marginLeft: 'var(--main-space)'}}
              >申请驳回</Apply>
            </View>
          </View>
        )
      }
    </Page>
  )
}