import React, { useState } from "react";
import Taro from "@tarojs/taro";
import { Tab, Tabs, Search } from "@antmjs/vantui";
import Page from "@/layouts/index";
import PowerList from "@/components/PowerList";
import Card from "@/components/IssueCard";
import { getTaIssueApply } from "@/services/taissueapply";
import { ROLE_MANAGER, ROLE_ORG_MANAGER } from "@/utils/user";
import { useModel } from "@/store";

const tabStyle = {
  overflow: "hidden",
  height: "calc(100vh - 45px)",
  overflow: "hidden",
};

const sid1 = Math.random().toString(36).substring(2, 8);
const sid2 = Math.random().toString(36).substring(2, 8);

export default (props) => {
  const router = Taro.useRouter();
  const { title, applyType = "" } = router.params;
  const [issueId, setIssueId] = useState("");

  const { duty } = useModel("user");

  React.useMemo(() => {
    if (title) {
      Taro.setNavigationBarTitle({ title });
    } else {
      Taro.setNavigationBarTitle({ title: "申请列表" });
    }
  }, [title]);

  const { user } = useModel("user");

  const [param1, param2] = React.useMemo(() => {
    return [
      { applyType, sourceType: "inspector", duty, issueId },
      { applyType, sourceType: "feedback", duty }
    ]
  }, [applyType, issueId, duty]);

  const onClick = (item) => {
    if (!user) return;

    if (!item.verifyDate) {
      if (duty != ROLE_MANAGER && duty != ROLE_ORG_MANAGER) {
        Taro.navigateTo({
          url: `/pages/apply/detail/index?id=${item.applyId}&issueId=${item.issueId}&applyType=${item.applyType}`,
        });
      } else {
        Taro.navigateTo({
          url: `/pages/apply/verify/index?id=${item.applyId}&issueId=${item.issueId}&applyType=${item.applyType}`,
        });
      }
    } else {
      Taro.navigateTo({
        url: `/pages/apply/detail/index?id=${item.applyId}&issueId=${item.issueId}&applyType=${item.applyType}`,
      });
    }
  };
  const onSearch = (e) => {
    const { value } = e.target;
    console.log(value);
    setIssueId(value);
  };
  return (
    <Page>
      <Search
        // onChange={(e) => setIssueId(e.detail)}
        placeholder="请输入问题单号"
        onSearch={onSearch}
        clearable
      />
      <Tabs sticky>
        <Tab title="督查员" style={tabStyle}>
          <PowerList
            sid={sid1}
            request={getTaIssueApply}
            params={param1}
            renderItem={(item) => (
              <Card
                key={item.applyId}
                applyInfo={item}
                stText={title}
                onClick={() => onClick(item)}
              />
            )}
          />
        </Tab>
        <Tab title="市民" style={tabStyle}>
          <PowerList
            sid={sid2}
            request={getTaIssueApply}
            params={param2}
            renderItem={(item) => (
              <Card
                key={item.applyId}
                applyInfo={item}
                stText={title}
                onClick={() => onClick(item)}
              />
            )}
          />
        </Tab>
      </Tabs>
    </Page>
  );
};
