import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Cell, Tag, Notify } from '@antmjs/vantui';
import Page from '@/layouts/index';
import PowerList from '@/components/PowerList';
import { getTaCheckItem } from '@/services/tacheckitem';
import { ROLE_INSPECTOR } from '@/utils/user';

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

export default (props) => {

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

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

  const params = React.useMemo(() => ({
    checkId,
    itemType: 'loc',
    pageSize: 100,
    mustValid: true,
  }), [checkId]);

  const onClick = (item) => {
    if (item.answerNum >= item.num) {
      Notify.show({
        message: '当前测评问卷已收齐',
        type: 'warning',
      })
      return;
    }

    Taro.navigateTo({
      url: `/pages/check/edit/index?id=${item.itemId}&typ=${item.itemType}`
    })
  }
  
  return (
    <Page loading={loading} roles={[ROLE_INSPECTOR]}>
      <PowerList
        sid={sid1}
        request={getTaCheckItem}
        params={params}
        renderItem={item => {
          const color = item.answerNum >= item.num ? '#aeaeae' : 'var(--main-bg-color)';

          return (
            <Cell
              isLink
              key={item.itemId}
              title={item.name}
              onClick={() => onClick(item)}
            >
              <Tag color={color}>{`${item.answerNum}/${item.num}`}</Tag>
            </Cell>
          )
        }}
        onLoadingChange={setLoading}
      />
    </Page>
  )
}
