import React from 'react';
import Taro from '@tarojs/taro';
import Page from '@/layouts/index';
import VABC from '@/components/VABC';
import { View, Text, Image } from '@tarojs/components';
import logo from '@/assets/image/logo.png';
import peopleicon from '@/assets/icons/peopleicon.png';
import icon11 from '@/assets/icons/icon11.png';
import iconExit from '@/assets/icons/exit.png';
import { useModel } from '@/store';
import { getSysOrgById } from '@/services/sysorg';
import { ROLE_CITIZEN, ROLE_QUERY_PERSON } from '@/utils/user';
import Head from './components/Head';
import styles from './style.module.less';

export default (props) => {

  const { user, person, duty, signOut, changePwd } = useModel('user');
  const [org, setOrg] = React.useState();

  const [
    show1,
    show2,
  ] = React.useMemo(() => {
    if (duty == ROLE_CITIZEN) {
      return [
        false, 
        false,
      ]
    }

    if (duty == ROLE_QUERY_PERSON) {
      return [
        true,
        false,
      ]
    }

    return [
      true,
      true,
    ]
  }, [duty]);

  const onExit = () => {
    signOut();
  }

  const onClick = () => {
    Taro.navigateTo({
      url: `/pages/message/list/index`
    })
  }

  const onChangePwd = (data) => {
    changePwd(data);
  }

  React.useEffect(() => {
    if (user) {
      getSysOrgById(user.orgId).then(setOrg);
    }
  }, [user]);

  return (
    <Page tabBar="mine">
      <VABC
        header={(
          <Head
            avatar={user?.avatar || person?.avatar || logo}
            name={user?.name || person?.name || '市民'}
            onChangePwd={onChangePwd}
            onExit={onExit}
          />
        )}
        footer={(
          <View className={styles['mine-pg-footer']}>
            <View className={styles.version}>
              <Text>版本: </Text>
              <Text>{VERSION}</Text>
            </View>
          </View>
        )}
      >
        <View className={styles['bg-menu-box']}>
          {
            show1 && (
              <View className={styles['bg-menu-item']}>
                <Image src={peopleicon} />
                <View className={styles['bg-menu-title']}>所在部门</View>
                <View className={styles['bg-menu-subtitle']}>{org?.name || '暂无'}</View>
              </View>
            )
          }
          {
            show2 && (
              <View className={styles['bg-menu-item']} onClick={onClick}>
                <Image src={icon11} />
                <View className={styles['bg-menu-title']}>消息通知</View>
              </View>
            )
          }
        </View>
      </VABC>
    </Page>
  )
}