import './style.css'
import {administratorOnly, apiGet, checkerOnly, useAmis, userOnly} from '../../components/constants.js'
import {userChangePasswordDialog} from '../../components/user/dialog-user-change-password.js'
import {tabUser} from './tab-user.js'
import {tabData} from './tab-data.js'
import {tabSettings} from './tab-settings.js'
import {tabCheck} from './tab-check.js'
import {tabPermissions} from './tab-permissions.js'
import {tabMarket} from './tab-market.js'

useAmis((information) => {
  return {
    id: 'header-service',
    className: 'h-full',
    type: 'service',
    api: apiGet('${base}/user/state'),
    onEvent: {
      fetchInited: {
        actions: [
          {
            expression: '${!event.data.responseData.token}',
            actionType: 'url',
            args: {
              url: '/pages/login/index.html',
              blank: false,
            },
          },
        ],
      },
    },
    body: [
      {
        id: 'root-page',
        type: 'page',
        title: {
          type: 'flex',
          justify: 'flex-start',
          items: [
            {
              type: 'avatar',
              className: 'mr-2 bg-transparent',
              src: '/logo.svg',
              shape: 'square',
              fit: 'contain',
            },
            {
              type: 'flex',
              className: 'w-50',
              direction: 'column',
              items: [
                {
                  type: 'tpl',
                  className: 'font-bold text-white',
                  tpl: information.title,
                },
                {
                  type: 'tpl',
                  className: 'font-bold text-xs text-gray-200',
                  tpl: '提供合法合规的数据要素可信供给工具',
                },
              ]
            }
          ]
        },
        // subTitle: '提供合法合规的数据要素可信供给工具',
        headerClassName: 'bg-gray-800 text-white',
        toolbarClassName: 'bg-gray-800',
        toolbar: [
          {
            type: 'action',
            label: '数据市场',
            icon: 'fa fa-store',
            level: 'link',
            className: 'text-bold text-white',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'setValue',
                    componentId: 'root-page',
                    args: {
                      value: {
                        activePage: 'market',
                      }
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'action',
            label: '我的资源',
            icon: 'fa fa-database',
            level: 'link',
            className: 'text-bold text-white',
            onEvent: {
              click: {
                actions: [
                  {
                    actionType: 'setValue',
                    componentId: 'root-page',
                    args: {
                      value: {
                        activePage: 'tab',
                      }
                    }
                  }
                ]
              }
            }
          },
          {
            type: 'divider',
            direction: 'vertical',
            color: '#4d4d4d',
          },
          {
            type: 'dropdown-button',
            label: '${username}',
            align: 'right',
            trigger: 'hover',
            btnClassName: 'text-white',
            level: 'link',
            buttons: [
              {
                label: '修改密码',
                ...userChangePasswordDialog(),
              },
              {
                label: '退出登陆',
                actionType: 'ajax',
                api: apiGet('${base}/user/logout'),
                reload: 'header-service',
              },
            ],
          },
        ],
        bodyClassName: 'p-0',
        data: {
          activePage: 'market',
          tabActiveKey: 'data'
        },
        body: [
          {
            visibleOn: "${activePage === 'market'}",
            type: 'wrapper',
            body: tabMarket(),
          },
          {
            visibleOn: "${activePage === 'tab'}",
            className: 'h-full border-0',
            type: 'tabs',
            tabsMode: 'vertical',
            activeKey: '${tabActiveKey}',
            tabs: [
              // tabOverview(),
              {
                hash: 'data',
                visibleOn: userOnly,
                title: '数据资源',
                icon: 'fa fa-database',
                reload: true,
                body: tabData()
              },
              {
                hash: 'permission',
                visibleOn: userOnly,
                title: '权属管理',
                icon: 'fa fa-key',
                reload: true,
                body: tabPermissions(),
              },
              {
                hash: 'check',
                visibleOn: checkerOnly,
                title: '审核审查',
                icon: 'fa fa-shield-halved',
                reload: true,
                body: tabCheck(),
              },
              {
                hash: 'user',
                visibleOn: administratorOnly,
                title: '用户管理',
                icon: 'fa fa-user',
                reload: true,
                body: tabUser(),
              },
              {
                hash: 'settings',
                ...tabSettings(),
              }
            ],
          }
        ],
      },
    ],
  }
})