import {Cell, InfiniteLoading} from '@nutui/nutui-react-taro'
import navTo from "@/utils/common";
import UserFooter from "./UserFooter";
import Taro from '@tarojs/taro'
import {ArrowRight, ShieldCheck, Truck, LogisticsError} from '@nutui/icons-react-taro'
import {CSSProperties, useEffect, useState} from "react";

const UserCell = () => {
  const [roleName, setRoleName] = useState<string>('')
  const InfiniteUlStyle: CSSProperties = {
    height: '88vh',
    padding: '16px',
    overflowY: 'auto',
    overflowX: 'hidden',
  }
  const onLogout = () => {
    Taro.showModal({
      title: '提示',
      content: '确定要退出登录吗？',
      success: function (res) {
        if (res.confirm) {
          Taro.clearStorageSync()
          Taro.removeStorageSync('access_token')
          Taro.removeStorageSync('TenantId')
          Taro.removeStorageSync('UserId')
          Taro.removeStorageSync('userInfo')
          Taro.reLaunch({
            url: '/pages/index/index'
          })
        }
      }
    })
  }

  useEffect(() => {
    setRoleName(Taro.getStorageSync('RoleCode'))
  }, []);

  return (
    <>
      <div style={InfiniteUlStyle} id="scroll">
        <InfiniteLoading>
          <Cell.Group divider={true}>
            <Cell
              className="nutui-cell-clickable"
              title={
                <div style={{display: 'inline-flex', alignItems: 'center'}}>
                  <ShieldCheck size={16}/>
                  <span className={'pl-3 text-sm'}>实名认证</span>
                </div>
              }
              align="center"
              extra={<ArrowRight color="#cccccc" size={18}/>}
              onClick={() => {
                navTo('/user/userVerify/index', true)
              }}
            />
          </Cell.Group>
          {
            (roleName === 'kuaidi' || roleName == 'zhandian') && (
              <Cell.Group divider={true}>
                <Cell
                  className="nutui-cell-clickable"
                  title={
                    <div style={{display: 'inline-flex', alignItems: 'center'}}>
                      <ShieldCheck size={16}/>
                      <span className={'pl-3 text-sm'}>实名认证审核</span>
                    </div>
                  }
                  align="center"
                  extra={<ArrowRight color="#cccccc" size={18}/>}
                  onClick={() => {
                    navTo('/user/userVerify/admin', true)
                  }}
                />
              </Cell.Group>
            )
          }
          {
            roleName === 'kuaidiyuan' && (
              <>
                <Cell.Group divider={true}>
                  <Cell
                    className="nutui-cell-clickable"
                    title={
                      <div style={{display: 'inline-flex', alignItems: 'center'}}>
                        <Truck size={16}/>
                        <span className={'pl-3 text-sm'}>车辆信息</span>
                      </div>
                    }
                    align="center"
                    extra={<ArrowRight color="#cccccc" size={18}/>}
                    onClick={() => {
                      navTo('/user/car/index', true)
                    }}
                  />
                </Cell.Group>
                <Cell.Group divider={true}>
                  <Cell
                    className="nutui-cell-clickable"
                    title={
                      <div style={{display: 'inline-flex', alignItems: 'center'}}>
                        <LogisticsError size={16}/>
                        <span className={'pl-3 text-sm'}>报险记录</span>
                      </div>
                    }
                    align="center"
                    extra={<ArrowRight color="#cccccc" size={18}/>}
                    onClick={() => {
                      navTo('/hjm/bx/bx', true)
                    }}
                  />
                </Cell.Group>
              </>
            )
          }
          {
            roleName === 'jiaojing' && (
              <Cell.Group divider={true}>
                <Cell
                  className="nutui-cell-clickable"
                  title={
                    <div style={{display: 'inline-flex', alignItems: 'center'}}>
                      <Truck size={16}/>
                      <span className={'pl-3 text-sm'}>违章记录</span>
                    </div>
                  }
                  align="center"
                  extra={<ArrowRight color="#cccccc" size={18}/>}
                  onClick={() => {
                    navTo('/hjm/violation/list', true)
                  }}
                />
              </Cell.Group>
            )
          }

          {
            roleName === 'youzheng' && (
              <Cell.Group divider={true}>
                <Cell
                  className="nutui-cell-clickable"
                  title={
                    <div style={{display: 'inline-flex', alignItems: 'center'}}>
                      <Truck size={16}/>
                      <span className={'pl-3 text-sm'}>违章记录</span>
                    </div>
                  }
                  align="center"
                  extra={<ArrowRight color="#cccccc" size={18}/>}
                  onClick={() => {
                    navTo('/hjm/violation/list', true)
                  }}
                />
              </Cell.Group>
            )
          }

          {/*<Cell.Group divider={true} description={*/}
          {/*  <div style={{display: 'inline-flex', alignItems: 'center'}}>*/}
          {/*    <span style={{marginTop: '12px'}}>管理</span>*/}
          {/*  </div>*/}
          {/*}>*/}
          {/*  <Cell*/}
          {/*    className="nutui-cell-clickable"*/}
          {/*    title={*/}
          {/*      <div style={{display: 'inline-flex', alignItems: 'center'}}>*/}
          {/*        <Presentation size={18}/>*/}
          {/*        <span style={{marginLeft: '5px'}}>分析</span>*/}
          {/*      </div>*/}
          {/*    }*/}
          {/*    align="center"*/}
          {/*    extra={<ArrowRight color="#cccccc" size={18}/>}*/}
          {/*    onClick={() => {*/}
          {/*      navTo('/bszx/bm-cert/bm-cert', true)*/}
          {/*    }}*/}
          {/*  />*/}
          {/*  <Cell*/}
          {/*    className="nutui-cell-clickable"*/}
          {/*    title={*/}
          {/*      <div style={{display: 'inline-flex', alignItems: 'center'}}>*/}
          {/*        <PickedUp size={18}/>*/}
          {/*        <span style={{marginLeft: '5px'}}>客户</span>*/}
          {/*      </div>*/}
          {/*    }*/}
          {/*    align="center"*/}
          {/*    extra={<ArrowRight color="#cccccc" size={18}/>}*/}
          {/*    onClick={() => {*/}
          {/*      navTo('/bszx/pay-log/pay-log', true)*/}
          {/*    }}*/}
          {/*  />*/}
          {/*  <Cell*/}
          {/*    className="nutui-cell-clickable"*/}
          {/*    title={*/}
          {/*      <div style={{display: 'inline-flex', alignItems: 'center'}}>*/}
          {/*        <Coupon size={18}/>*/}
          {/*        <span style={{marginLeft: '5px'}}>折扣</span>*/}
          {/*      </div>*/}
          {/*    }*/}
          {/*    align="center"*/}
          {/*    extra={<ArrowRight color="#cccccc" size={18}/>}*/}
          {/*    onClick={() => {*/}
          {/*      navTo('/user/profile/profile', true)*/}
          {/*    }}*/}
          {/*  />*/}
          {/*</Cell.Group>*/}
          {/*<Cell.Group divider={true} description={*/}
          {/*  <div style={{display: 'inline-flex', alignItems: 'center'}}>*/}
          {/*    <span style={{marginTop: '12px'}}>设置与帮助</span>*/}
          {/*  </div>*/}
          {/*}>*/}
          {/*  <Cell*/}
          {/*    className="nutui-cell-clickable"*/}
          {/*    title="店铺设置"*/}
          {/*    align="center"*/}
          {/*    extra={<ArrowRight color="#cccccc" size={18}/>}*/}
          {/*    onClick={() => Taro.navigateTo({url: '/website/modify'})}*/}
          {/*  />*/}
          {/*  <Cell*/}
          {/*    className="nutui-cell-clickable"*/}
          {/*    title="帮助中心"*/}
          {/*    align="center"*/}
          {/*    extra={<ArrowRight color="#cccccc" size={18}/>}*/}
          {/*    onClick={() => {*/}
          {/*      navTo('/user/profile/profile', true)*/}
          {/*    }}*/}
          {/*  />*/}
          {/*  <Cell*/}
          {/*    className="nutui-cell-clickable"*/}
          {/*    title="问题反馈"*/}
          {/*    align="center"*/}
          {/*    extra={<ArrowRight color="#cccccc" size={18}/>}*/}
          {/*    onClick={() => {*/}
          {/*      navTo('/user/profile/profile', true)*/}
          {/*    }}*/}
          {/*  />*/}
          {/*</Cell.Group>*/}
          <Cell.Group divider={true} description={
            <div style={{display: 'inline-flex', alignItems: 'center'}}>
              <span style={{marginTop: '12px'}}>账号管理</span>
            </div>
          }>
            <Cell
              className="nutui-cell-clickable"
              title="账号安全"
              align="center"
              extra={<ArrowRight color="#cccccc" size={18}/>}
              onClick={() => navTo('/user/profile/profile', true)}
            />
            <Cell
              className="nutui-cell-clickable"
              title="短信登录"
              align="center"
              extra={<ArrowRight color="#cccccc" size={18}/>}
              onClick={() => navTo('/passport/sms-login', true)}
            />
            <Cell
              className="nutui-cell-clickable"
              title="退出登录"
              align="center"
              extra={<ArrowRight color="#cccccc" size={18}/>}
              onClick={onLogout}
            />
          </Cell.Group>
          <UserFooter/>
        </InfiniteLoading>
      </div>
    </>
  )
}
export default UserCell