<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        class="avue-breadcrumb"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal"
      >
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
<!--      <top-menu ref="topMenu" v-if="setting.menu"></top-menu>-->
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    <div class="top-bar__right">
      <div v-if="setting.color" class="top-bar__item">
        <top-color></top-color>
      </div>
      <div v-if="setting.theme" class="top-bar__item" style="display: none;">
        <top-theme></top-theme>
      </div>
      <div v-if="setting.lock" class="top-bar__item">
        <top-lock></top-lock>
      </div>
      <div v-if="setting.lang" class="top-bar__item">
        <top-lang></top-lang>
      </div>
      <div class="top-bar__item" v-if="setting.fullscreen">
        <top-full></top-full>
      </div>
      <div class="top-bar__item" v-if="setting.debug">
        <top-logs></top-logs>
      </div>
      <div class="top-user">
        <el-dropdown :hide-on-click="false" trigger="hover">
          <span class="el-dropdown-link top-user__trigger">
            <img class="top-bar__img" :src="userInfo.avatar" alt="" />
            {{ userInfo.real_name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
<!--              <el-dropdown-item @click="toDashboard">-->
<!--                <i class="icon-zuzhixiaxia" /> {{ $t('navbar.dashboard') }}-->
<!--              </el-dropdown-item>-->
<!--              <el-dropdown-item @click="toAllMenu">-->
<!--                <i class="icon-liebiao" /> {{ $t('navbar.allMenu') }}-->
<!--              </el-dropdown-item>-->
              <el-dropdown-item @click="toInfo">
                <i class="icon-yonghu" />{{ $t('navbar.userinfo') }}
              </el-dropdown-item>
              <el-dropdown-item divided>
                <i class="icon-hezuohuobanmiyueguanli" />
                <el-tooltip :content="roleName" placement="top" trigger="click">
                  <strong>
                    {{
                      func.contains(roleId, ',')
                        ? $t('navbar.roleName')
                        : $t('navbar.currentRoleName')
                    }}: {{ func.truncateString(roleName) }}
                  </strong>
                </el-tooltip>
              </el-dropdown-item>
              <el-dropdown-item
                v-if="Object.keys(roleObj).length < 5"
                v-for="(name, id) in roleObj"
                :key="id"
                @click="toRole(id, name)"
              >
                <i class="icon-changjingguanli" />
                {{ $t('navbar.switchRoleTo') }}: {{ name }}
              </el-dropdown-item>
              <el-dropdown-item v-if="Object.keys(roleObj).length >= 5" @click="switchRole">
                <i class="icon-changjingguanli" />
                {{ $t('navbar.switchRole') }}
              </el-dropdown-item>
              <el-dropdown-item divided>
                <i class="iconfont iconicon_group" />
                <el-tooltip :content="deptName" placement="top" trigger="click">
                  <strong>
                    {{
                      func.contains(deptId, ',')
                        ? $t('navbar.deptName')
                        : $t('navbar.currentDeptName')
                    }}: {{ func.truncateString(deptName) }}
                  </strong>
                </el-tooltip>
              </el-dropdown-item>
              <el-dropdown-item
                v-if="Object.keys(deptObj).length < 5"
                v-for="(name, id) in deptObj"
                :key="id"
                @click="toDept(id, name)"
              >
                <i class="icon-guanlianshebei" />
                {{ $t('navbar.switchDeptTo') }}: {{ name }}
              </el-dropdown-item>
              <el-dropdown-item v-if="Object.keys(deptObj).length >= 5" @click="switchDept">
                <i class="icon-guanlianshebei" />
                {{ $t('navbar.switchDept') }}
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided>
                <i class="icon-tuichu" /> {{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting v-if="setting.settingBtn"></top-setting>
        <el-dialog title="请选择身份信息后切换" append-to-body v-model="userBox" width="400px">
          <avue-form :option="userOption" v-model="userForm" @submit="toAll" />
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import topLock from './top-lock.vue';
import topMenu from './top-menu.vue';
import topSearch from './top-search.vue';
import topTheme from './top-theme.vue';
import topLogs from './top-logs.vue';
import topColor from './top-color.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topSetting from '../setting.vue';
import { getUserInfo as getUerDetailInfo } from '@/api/system/user';
import { getUserInfo as getUerOauthInfo } from '@/api/user';
import { validatenull } from '@/utils/validate';
import func from '@/utils/func';

export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topLang,
    topFull,
    topSetting,
  },
  name: 'top',
  inject: ['index'],
  data() {
    return {
      userId: '',
      roleId: '',
      roleName: '',
      roleObj: {},
      deptId: '',
      deptName: '',
      deptObj: {},
      userBox: false,
      userForm: {
        deptId: '',
        roleId: '',
      },
      userOption: {
        labelWidth: 'auto',
        submitBtn: true,
        emptyBtn: false,
        submitText: '切 换',
        column: [
          {
            label: '部门',
            prop: 'deptId',
            type: 'select',
            props: {
              label: 'deptName',
              value: 'id',
            },
            dicUrl: '/blade-system/dept/select',
            filterable: true,
            span: 24,
            display: false,
            rules: [
              {
                required: true,
                message: '请选择部门',
                trigger: 'blur',
              },
            ],
          },
          {
            label: '角色',
            prop: 'roleId',
            type: 'select',
            props: {
              label: 'roleName',
              value: 'id',
            },
            dicUrl: '/blade-system/role/select',
            filterable: true,
            span: 24,
            display: false,
            rules: [
              {
                required: true,
                message: '请选择角色',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  filters: {},
  created() {
    this.init();
  },
  computed: {
    func() {
      return func;
    },
    ...mapGetters([
      'setting',
      'userInfo',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'isHorizontal',
    ]),
  },
  methods: {
    init() {
      getUerDetailInfo().then(res => {
        // 获取绑定信息
        const roleId = res.data.data.roleId;
        const roleName = res.data.data.roleName;
        const roleIds = roleId.split(',');
        const roleNames = roleName.split(',');
        const deptId = res.data.data.deptId;
        const deptName = res.data.data.deptName;
        const deptIds = deptId.split(',');
        const deptNames = deptName.split(',');
        roleIds.forEach((id, index) => {
          if (id === this.roleId) {
            this.roleName = roleNames[index];
          } else {
            this.roleObj[id] = roleNames[index];
          }
        });
        deptIds.forEach((id, index) => {
          if (id === this.deptId) {
            this.deptName = deptNames[index];
          } else {
            this.deptObj[id] = deptNames[index];
          }
        });
        if (validatenull(this.roleName)) {
          this.roleName = roleName;
        }
        if (validatenull(this.deptName)) {
          this.deptName = deptName;
        }
      });
      getUerOauthInfo().then(res => {
        this.userId = res.data.userId;
        this.roleId = res.data.roleId;
        this.deptId = res.data.deptId;
      });
    },
    toDashboard() {
      this.$router.push(this.tagWel);
    },
    toAllMenu() {
      this.index.openMenu({}, true);
      this.$router.push(this.tagWel);
    },
    toInfo() {
      this.$router.push({ path: '/info/index' });
    },
    toRole(roleId, name) {
      const userInfo = { roleId, deptId: this.deptId };
      this.switchTo(userInfo, name);
    },
    toDept(deptId, name) {
      const userInfo = { roleId: this.roleId, deptId };
      this.switchTo(userInfo, name);
    },
    toAll(form, done) {
      let userInfo;
      if (!validatenull(form.deptId)) {
        userInfo = { roleId: this.roleId, deptId: form.deptId };
      }
      if (!validatenull(form.roleId)) {
        userInfo = { roleId: form.roleId, deptId: this.deptId };
      }
      this.switchTo(userInfo);
      done();
    },
    switchRole() {
      const columnRole = this.findColumn(this.userOption.column, 'roleId');
      const columnDept = this.findColumn(this.userOption.column, 'deptId');
      columnRole.dicUrl = `/blade-system/role/select?userId=${this.userId}`;
      columnRole.display = true;
      columnDept.dicUrl = '';
      columnDept.display = false;
      this.userBox = true;
    },
    switchDept() {
      const columnDept = this.findColumn(this.userOption.column, 'deptId');
      const columnRole = this.findColumn(this.userOption.column, 'roleId');
      columnDept.dicUrl = `/blade-system/dept/select?userId=${this.userId}`;
      columnDept.display = true;
      columnRole.dicUrl = '';
      columnRole.display = false;
      this.userBox = true;
    },
    switchTo(userInfo, name) {
      const tipMessage = validatenull(name)
        ? this.$t('navbar.switchTip') + ' ? '
        : this.$t('navbar.switchTip') + ` [${name}] ?`;
      this.$confirm(tipMessage, this.$t('confirmTip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store
          .dispatch('RefreshToken', userInfo)
          .then(() => {
            this.$message.success(this.$t('navbar.switchSuccess'));
            location.reload();
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    logout() {
      this.$confirm(this.$t('logoutTip'), this.$t('confirmTip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          if (this.website.oauth2.ssoMode) {
            window.location.href =
              this.website.oauth2.ssoBaseUrl +
              this.website.oauth2.ssoLogoutUrl +
              this.website.oauth2.redirectUri;
          } else {
            this.$router.push({ path: '/login' });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-user__trigger {
  display: inline-flex;
  align-items: center;
  outline: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;

  &:hover,
  &:focus {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .top-bar__img {
    margin: 0 5px 0 0;
  }
}
</style>
