import React, { useEffect, useState } from 'react'

import { Image, View } from '@tarojs/components'

import Taro from '@tarojs/taro'

import { getQueryAllCustomerType } from '@/api/user'

import NavBar from '@/components/NavBar/index'

import { AtIcon } from 'taro-ui'

import './index.scss'

import bg from '../../assets/authQuery/auth-bg.png'
import step from '../../assets/authQuery/three-step.png'

const gridList = [{ id: 0, No: 'GT' }, { id: 3, No: 'GX' }]

interface CustomerType {
  id: number,
  name: string,

  pId: number
}

const CateGrid: React.FC = () => {

  useEffect(() => {
    GetQueryAllCustomerType()
  }, [])

  const [customerType, setCustomerType] = useState<CustomerType[]>([])

  const goPage = (records): void => {
    let type: number
    if (records.id === 0) {
      type = customerType[0].id
    } else {
      type = customerType[1].id
    }

    Taro.navigateTo({
      url: `/pages/AuthOpra/index?type=${type}&No=${records.No}`
    });

  }

  /**
   * @description 获取产品分类
   */

  const GetQueryAllCustomerType = async () => {
    const data = await getQueryAllCustomerType()
    console.log(data);
    setCustomerType(data)
  }

  return (
    <View className='CateGrid'>
      {
        gridList.map((item, index) => (
          <Image
            key={item.id}
            className='gridImg'
            src={require(`../../assets/authQuery/auth${item.id}.png`)}
            onClick={() => goPage(item)}
          />
        ))
      }
    </View>
  )
}


const AuthQuery: React.FC = () => {
  return (
    <View className='AuthQuery'>
      <NavBar
        fixed
        title=''
        icon={<AtIcon value='chevron-left' size='30rpx' color='#fff' />
        }
      />
      <Image className='AuthQuery-img' src={bg} />
      <Image className='step' src={step} mode='aspectFill' />
      <CateGrid />
    </View>
    // <image src='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png' ></image>
  )
}

export default AuthQuery
