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,
  ROLE_ORG_USER,
} 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";
// eslint-disable-next-line import/first
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,
          true,
          // issue?.processNode && issue?.processNode != PROCESS_START, // true,
          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_QUERY_PERSON) {
        return [true, true, false, false, false];
      }

      // 如果是交办单位人员
      if (duty == ROLE_ORG_USER) {
        return [true, true, false, false, false];
      }

      // 其他人员
      return [true, false, false, false, false];
    }, [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_ORG_USER,
        ROLE_QUERY_PERSON,
      ]}
      loading={loading}
    >
      <IssueForm
        issueId={id}
        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>
  );
};