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 {
  getIssueStatus,
  PROCESS_APPLY_END,
  PROCESS_END,
  PROCESS_APPLY_VERIFY,
  PROCESS_APPLY_DELAY,
  PROCESS_APPLY_REJECT,
  PROCESS_ASSIGNED,
  APPLY_READY,
} from '@/utils/biz';
import { ROLE_ORG_MANAGER } from '@/utils/user';
import { useModel } from '@/store';
import IssueStatus from './components/IssueStatus';
import IssueInfo from '../../components/issue-info';
import Apply from './components/Apply';

export default (props) => {

  const router = Taro.useRouter();
  const { id, act } = router.params;
  const { duty, user } = useModel('user');

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

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

    return [
      orgIssue?.processStatus == APPLY_READY || orgIssue?.processNode == PROCESS_END,
      orgIssue.processNode == PROCESS_ASSIGNED && duty != ROLE_ORG_MANAGER,
      orgIssue.processNode != PROCESS_END && orgIssue.processNode != PROCESS_APPLY_END ,
    ]

  }, [orgIssue, duty]);

  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, user?.orgId ).then(res => setOrgIssue(res));
    }
  }, [id, user]);
  
  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>
      
      <CellGroup style={{marginTop: '20px'}}>
        <IssueStatus issue={issue} />
      </CellGroup>

      {
        !readOnly && (
          <View style={{marginTop: '20px', padding: 'var(--main-space)'}}>
            <View>
              {
                showApplyEnd &&
                  <Apply block type="primary" applyType={PROCESS_APPLY_END} orgIssue={orgIssue}>申请办结</Apply>
              }
            </View>
            {
              showApplyVerify && (
                <View style={{marginTop: '20px'}}>
                  <Apply block type="primary" applyType={PROCESS_APPLY_VERIFY} orgIssue={orgIssue}>申请审核</Apply>
                </View>
              )
            }
            <View style={{marginTop: '20px', display: 'flex' }}>
              <Apply
                block
                plain
                hairline
                type="info"
                applyType={PROCESS_APPLY_DELAY}
                orgIssue={orgIssue}
              >申请延期</Apply>
              <Apply
                block
                plain
                hairline
                type="danger"
                applyType={PROCESS_APPLY_REJECT}
                orgIssue={orgIssue}
                style={{marginLeft: 'var(--main-space)'}}
              >申请驳回</Apply>
            </View>
          </View>
        )
      }
    </Page>
  )
}
