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 { 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',
}

export default (props) => {

  const router = Taro.useRouter();
  const { title, applyType = '' } = router.params;

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

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

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

  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}`
      })
    }
  }

  return (
    <Page>
      <Tabs sticky>
        <Tab title="督查员" style={tabStyle}>
          <PowerList
            request={getTaIssueApply}
            params={{ applyType, sourceType: 'inspector' }}
            renderItem={(item) => (
              <Card key={item.applyId} applyInfo={item} stText={title} onClick={() => onClick(item)} />
            )}
          />
        </Tab>
        <Tab title="市民" style={tabStyle}>
          <PowerList
            request={getTaIssueApply}
            params={{ applyType, sourceType: 'feedback' }}
            renderItem={(item) => (
              <Card key={item.applyId} applyInfo={item} stText={title} onClick={() => onClick(item)} />
            )}
          />
        </Tab>
      </Tabs>
    </Page>
  )
}
