import { defineComponent, ref, watch } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane } from 'naive-ui';
import PersonInfo from './components/personInfo';
import SchoolInfo from './components/schoolInfo/index';
import { useUserStore } from '/src/store/modules/users';
import { useRoute } from 'vue-router';
import { eventGlobal } from '/src/utils';
export default defineComponent({
  name: 'base-setting',
  setup(props, { emit, attrs }) {
    const activeTab = ref('person' as any);
    const user = useUserStore();
    const route = useRoute();
    if (route.query.activeTab) {
      activeTab.value = route.query.activeTab;
      eventGlobal.emit('base-setting-emit', activeTab.value);
    }
    watch(
      () => route.query.activeTab,
      val => {
        activeTab.value = val;
        eventGlobal.emit('base-setting-emit', val);
      }
    );

    // 切换tab
    const onChangeTab = (value: string) => {
      if (!value) return;
      activeTab.value = value;
    };
    return () => (
      <div class={styles.listWrap}>
        <NTabs
          class={styles.customTabs}
          v-model:value={activeTab.value}
          size="large"
          // animated
          pane-wrapper-style="margin: 0 -4px"
          pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
          onUpdate:value={(val: any) => {
            eventGlobal.emit('base-setting-emit', val);
          }}>
          <NTabPane name="person" tab="个人信息">
            <PersonInfo></PersonInfo>
          </NTabPane>
          {(user.info.isSuperAdmin ||
            user.info.teacherJobType === 'HEADMASTER') && (
            <NTabPane name="school" tab="学校设置">
              <SchoolInfo onChangeTab={onChangeTab} />
            </NTabPane>
          )}
        </NTabs>
      </div>
    );
  }
});
