import { View, Image, Text } from '@tarojs/components'
import { FC, useState } from 'react'
import styles from './index.module.scss'
import defaultAvatar from '../../styles/image/defaultAvatar.png'
import NormalButton from '@/components/normalButton'
import Tag from '@/components/tag'
import Divider from '@/components/Divider'
import LayoutBlock from '@/components/layoutBlock'
import IconCard from '@/components/iconCard'
import { IconNames } from '@/components/iconfont/iconfont'
import useUserInfo from '@/use/useUserInfo'
import { goLink } from '@/common/common'

type IconCardType = {
  iconName: IconNames
  name: string
  path: string
}

const feature: IconCardType[] = [
  {
    iconName: 'icon-lingquseka',
    name: '领取色卡',
    path: '',
  },
  {
    iconName: 'icon-pandiansaoma',
    name: '盘点扫码',
    path: '',
  },
  {
    iconName: 'icon-fahuoliebiao',
    name: '发货列表',
    path: '/pages/delivery/index',
  },
  {
    iconName: 'icon-yaoqingma',
    name: '邀请码',
    path: '',
  },
  {
    iconName: 'icon-tihuoliebiao',
    name: '提货列表',
    path: '/pages/takeDelivery/index',
  },
  {
    iconName: 'icon-shouhouzhongxin',
    name: '退货退款',
    path: '/pages/refundPage/index',
  },
  {
    iconName: 'icon-shoukuanliebiao',
    name: '收款列表',
    path: '/pages/newCollection/index',
  },
  {
    iconName: 'icon-kehuxinxi',
    name: '客户列表',
    path: '',
  },
]

const fabric: IconCardType[] = [
  {
    iconName: 'icon-yansequyang',
    name: '颜色取样',
    path: '/pages/colorRelated/takeColor/index',
  },
  {
    iconName: 'icon-qusechazhao',
    name: '取色查找',
    path: '/pages/colorRelated/findColor/index',
  },
  {
    iconName: 'icon-yangpinduibi',
    name: '样品对比',
    path: '/pages/colorRelated/sampleComparison/index',
  },
]

const statisticAnalysis: IconCardType[] = [
  {
    iconName: 'icon-xiaoshou',
    name: '销售',
    path: '/pages/saleStatistic/index',
  },
  {
    iconName: 'icon-duizhang',
    name: '对账',
    path: '',
  },
  {
    iconName: 'icon-yuncangkucun',
    name: '云仓库存',
    path: '',
  },
  {
    iconName: 'icon-qianzhicangkucun',
    name: '前置仓库存',
    path: '',
  },
]

// 用户信息
const UserInfo: FC = () => {
  const { removeToken, removeUserInfo, userInfo } = useUserInfo()
  console.log('userInfo==>', userInfo)
  // const [userInfo, setUserInfo] = useState({
  //   avatarUrl: '',
  //   username: '',
  //   userno: '',
  // })

  // 退出登录
  const handleLogout = () => {
    removeToken()
    removeUserInfo()
    goLink('/pages/login/index', {}, 'reLaunch')
  }

  const handleClickIconCard = (item: IconCardType) => {
    console.log('item==>', item)
    goLink(item.path, {}, 'navigateTo')
  }

  return (
    <>
      <LayoutBlock circle>
        <View className={styles.topBar}>
          <View className={styles.left}>
            <UserAvatar src={userInfo.userInfo?.avatar_url} />
          </View>
          <View className={styles.middle}>
            <Text className={styles.username}>{userInfo.userInfo?.user_name}</Text>
            <Text className={styles.userno}>{userInfo.userInfo.user_code}</Text>
          </View>
          <View className={styles.right}>
            <NormalButton plain type='primary' round size='normal' onClick={handleLogout}>
              退出登录
            </NormalButton>
          </View>
        </View>
        <View className={styles.bottomBar}>
          <Tag type='primary' size='normal' circle plain customStyle={{ marginRight: '10px' }}>
            {userInfo.userInfo.department_name}
          </Tag>
          <Divider direction='vertical'></Divider>
          <Text className={styles.userTitle}>IT-开发总监</Text>
        </View>
      </LayoutBlock>
      <LayoutBlock circle>
        <View className={styles.layoutTitle}>功能特色</View>
        <View className={styles['grid-container']}>
          {feature.map(item => {
            return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
          })}
        </View>
      </LayoutBlock>
      <LayoutBlock circle>
        <View className={styles.layoutTitle}>布料取色</View>
        <View className={styles['grid-container']}>
          {fabric.map(item => {
            return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
          })}
        </View>
      </LayoutBlock>
      <LayoutBlock circle>
        <View className={styles.layoutTitle}>统计分析</View>
        <View className={styles['grid-container']}>
          {statisticAnalysis.map(item => {
            return <IconCard iconName={item.iconName} title={item.name} onClick={() => handleClickIconCard(item)}></IconCard>
          })}
        </View>
      </LayoutBlock>
    </>
  )
}
// 用户头像
const UserAvatar = ({ src }) => {
  return (
    <View className={styles.userAvatar}>
      <Image className='full-100' src={src ? src : defaultAvatar} />
      {src ? null : <Text className={styles['userAvatar-text']}>编辑</Text>}
    </View>
  )
}

// 我的
const User = () => {
  return (
    <>
      <View className={styles.main}>
        <UserInfo />
      </View>
    </>
  )
}

export default User