import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Tab, Tabs } from '@antmjs/vantui';
import Page from '@/layouts/index';
import PowerList from '@/components/PowerList';
import Card from '@/components/IssueCard';
import { getTaIssue } from '@/services/taissue';
import { ROLE_INSPECTOR, ROLE_MANAGER } from '@/utils/user';
import { getIssueStatus, PROCESS_ASSIGNED, PROCESS_END, PROCESS_START } from '@/utils/biz';

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);
const sid3 = Math.random().toString(36).substring(2, 8);
const sid4 = Math.random().toString(36).substring(2, 8);
const sid5 = Math.random().toString(36).substring(2, 8);
const sid6 = Math.random().toString(36).substring(2, 8);

// 只有督查员能看到当前页面
export default (props) => {
  // const { user } = useModel('user');

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

  const [active, setActive] = React.useState(0);

  const [
    param1,
    param2,
    param3,
    param4,
    param5,
    param6,
  ] = React.useMemo(() => {
    return [
      { mine },
      { mine, bizStatus: PROCESS_START },
      { mine, bizStatus: PROCESS_ASSIGNED },
      { mine, bizStatus: PROCESS_END },
      { mine, bizStatus: 'expired' },
      { mine, bizStatus: 'reject' },
    ];
  }, [mine])

  const onClick = (item) => {
    Taro.navigateTo({
      url: `/pages/issue/edit/index?id=${item.issueId}`
    })
  }

  const onTabChange = (e) => {
    const { index } = e.detail;
    setActive(index)
  }

  return (
    <Page roles={[ROLE_INSPECTOR]}>
      <Tabs sticky onChange={onTabChange}>
        <Tab title="全部" style={tabStyle}>
          {active == 0 && (
            <PowerList
              sid={sid1}
              request={getTaIssue}
              params={param1}
              renderItem={(item) => (
                <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
              )}
            />
          )}
        </Tab>
        <Tab title="未交办" style={tabStyle}>
        {active == 1 && (
          <PowerList
            sid={sid2}
            request={getTaIssue}
            params={param2}
            renderItem={(item) => (
              <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
            )}
          />
          )}
        </Tab>
        <Tab title="已交办" style={tabStyle}>
          {active == 2 && (
          <PowerList
            sid={sid3}
            request={getTaIssue}
            params={param3}
            renderItem={(item) => (
              <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
            )}
          />
          )}
        </Tab>
        <Tab title="已办结" style={tabStyle}>
          {active == 3 && (
          <PowerList
            sid={sid4}
            request={getTaIssue}
            params={param4}
            renderItem={(item) => (
              <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
            )}
          />
          )}
        </Tab>
        <Tab title="已逾期" style={tabStyle}>
          {active == 4 && (
          <PowerList
            sid={sid5}
            request={getTaIssue}
            params={param5}
            renderItem={(item) => (
              <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
            )}
          />
          )}
        </Tab>
        <Tab title="已打回" style={tabStyle}>
          {active == 5 && (
          <PowerList
            sid={sid6}
            request={getTaIssue}
            params={param6}
            renderItem={(item) => (
              <Card key={item.issueId} issue={item} onClick={() => onClick(item)} />
            )}
          />
          )}
        </Tab>
      </Tabs>
    </Page>
  )
}
