import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { CellGroup, Cell } from '@antmjs/vantui';
import Page from '@/layouts/index';
import { useModel } from '@/store';
import { ROLE_INSPECTOR, ROLE_MANAGER, ROLE_CITIZEN, ROLE_QUERY_PERSON } from '@/utils/user';
import { getTaIssueById } from '@/services/taissue';
import { getSysOrgById } from '@/services/sysorg';
import IssueForm from '../components/Issue';
import Save from './components/Save';
import Edit from './components/Edit';
import Assigned from './components/Assigned';
import Cancel from './components/Cancel';
import { PROCESS_END, PROCESS_START } from '@/utils/biz';

export default (props) => {

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

  const { user, duty } = useModel('user');

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

  React.useMemo(() => {
    if (id) {
      Taro.setNavigationBarTitle({
        title: '问题单详情'
      })
    } else {
      Taro.setNavigationBarTitle({
        title: '我要上报'
      })
    }
  }, [id]);

  // 各按钮状态
  const [
    readOnly,
    showOrg,
    canEdit,
    canAssigned,
    canCancel,
  ] = React.useMemo(() => {
    // 如果是督查员
    if (duty == ROLE_INSPECTOR) {
      return [
        issue && issue.processNode != PROCESS_START,
        false,
        issue && issue.processNode == PROCESS_START,
        false,
        false,
      ]
    }

    // 如果是管理员
    if (duty == ROLE_MANAGER) {
      return [
        issue && issue.processNode != PROCESS_START,
        true,
        false,
        issue && issue.processNode == PROCESS_START,
        issue && issue.processNode == PROCESS_START,
      ]
    }

    // 如果是市民 或者查询员
    if (duty == ROLE_CITIZEN || duty == ROLE_QUERY_PERSON) {
      return [
        true,
        false,
        false,
        false,
        false,
      ]
    }

    return [];
  }, [issue, duty]);

  // const onIssueChange = (val = {}) => {
  //   setIssue({
  //     ...(issue || {}),
  //     ...val,
  //   })
  // }

  React.useEffect(() => {
    if (id) {
      setLoading(true)
      getTaIssueById(id).then(res => {
        setLoading(false);
        if (res.orgId) {
          getSysOrgById(res.orgId).then(r => {
            setIssue({
              ...res,
              orgName: r?.name
            });
          }).catch(() => {
            setIssue(res);
          })
        } else {
          setIssue(res);
        }
      }).catch(() => {
        setLoading(false);
      });
    }
  }, [id]);

  return (
    <Page roles={[ROLE_INSPECTOR, ROLE_MANAGER, ROLE_CITIZEN, ROLE_QUERY_PERSON]} loading={loading}>
      <IssueForm
        issue={issue}
        readOnly={readOnly}
        showOrg={showOrg}
        showExpireDate={showOrg}
        renderAction={(formData) => (
          <View style={{ padding: 'var(--main-space)', background: '#fff' }}>
            {!id && <Save formData={formData} />}
            {canEdit && <Edit issue={issue} formData={formData} />}
            {canAssigned && <Assigned issue={issue} formData={formData} />}
            {canCancel && <Cancel issue={issue} />}
          </View>
        )}
      />
    </Page>
  )
}