<template>
  <div class="tools">
    <div class="user-container" @click="enterUrl">
      <div class="color-21 mark-icon">
        <img :src="imgIcon" alt="" />
        <span>{{ '知识库' }}</span>
      </div>
    </div>
    <el-popover :width="280" :show-arrow="false" popper-class="user-setting">
      <template #reference>
        <div class="user-container">
          <div class="user-wrapper">
            <span class="max-w-120px p-r-5px">
              <div class="nowrap-ellipsis text-right color-21"
                style="color: #212121;font-weight: 600; line-height: 1.5;">
                {{ userStore.userName || userData.staffName }}
              </div>
              <div class="nowrap-ellipsis text-right color-21" style="color: #666; font-size: 12px; line-height: 1.5;">
                {{ userData.abbreviation }}
              </div>
            </span>
            <el-avatar size="default">
              <el-icon size="20px">
                <svg-icon name="ep:user-filled" />
              </el-icon>
            </el-avatar>
          </div>
        </div>
      </template>
      <template #default>
        <div class="avatar-info">
          <div class='flex justify-start align-mid flex-items-center'>
            <el-avatar :src="getAssetsImages('avatar.png')">
            </el-avatar>
            <div class="p-r-5px p-l-8px">
              <div class="text-left font-600 font-size-18px color-21">
                {{ userStore.userName || userData.staffName }}
              </div>
              <div class="text-left">
                账号: {{ userData.mobileNo.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
              </div>
            </div>
          </div>
        </div>
        <div class="horizontal-line"></div>
        <!-- <div class="user-setting-menu">
          <div class="menu-wrapper" v-show="isNonEmptyArray(tenantInfoList) && tenantInfoList.length > 1"
            @click="userCommand('changeTenant')">
            <span class="color-21">切换公司</span>
            <span>
              <Icon icon="ep:arrow-right" :size='16' />
            </span>
          </div>
        </div> -->
        <!-- <div class="horizontal-line" v-show="isNonEmptyArray(tenantInfoList) && tenantInfoList.length > 1"></div> -->
        <div class="user-setting-menu">
          <div class="menu-wrapper" @click="userCommand('updatePwd')">
            <span class="color-21">修改密码</span>
            <span>
              <Icon icon="ep:arrow-right" :size='16' />
            </span>
          </div>
        </div>
        <div class="horizontal-line"></div>
        <div class="user-setting-menu">
          <div class="menu-wrapper" @click="userCommand('stopUser')">
            <span class="color-21">注销登录</span>
            <span>
              <Icon icon="ep:arrow-right" :size='16' />
            </span>
          </div>
        </div>
        <template v-if="bindList && bindList.length">
          <div class="horizontal-line"></div>
          <div class="user-setting-menu">
            <div class="menu-wrapper" @click="userCommand('passKeyUnbind')">
              <span class="color-21">通行密钥解绑</span>
              <span>
                <Icon icon="ep:arrow-right" :size='16' />
              </span>
            </div>
          </div>
        </template>
        <div class="horizontal-line"></div>
        <div class="login-out">
          <div class="login-out-btn" @click="userCommand('logout')">
            {{ '退出登录' }}
          </div>
        </div>
      </template>
    </el-popover>
    <Retrievepassword :schemaInfo="retrievepassword"></Retrievepassword>
    <!-- <ChangeTenant :schemaInfo="schemaInfo" @confirm="selectSure" @close="() => { schemaInfo.visible = false; }">
    </ChangeTenant> -->
  </div>
</template>

<script lang="ts" setup name="Tools">
import { ElMessageBox } from 'element-plus';
import Retrievepassword from '../Retrievepassword/index.vue'
import useUserStore from '@/store/modules/user'
import imgIcon from '@/assets/images/知识库.png'
import { getAssetsImages, isNonEmptyArray } from '@/utils/common';

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData)

const { proxy } = getCurrentInstance() as any;
const router = useRouter()

// ! 修改密码逻辑
const retrievepassword = ref({
  visible: false,
})

const bindList = ref([])

const enterUrl = () => {
  window.open('https://data-assets.zgene.cn/1zcdj');
}

function userCommand(command: 'logout' | 'updatePwd' | 'passKeyUnbind' | 'stopUser') {
  switch (command) {
    case 'updatePwd':
      retrievepassword.value.visible = true
      break
    case 'logout':
      logout()
      break
    case 'stopUser':
      stopLogonUser()
      break
    case 'passKeyUnbind':
      ElMessageBox.confirm('确定解绑吗, 是否继续?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
      }).then(() => {
        // TODO
        // let list: any = [];
        // bindList.value.forEach(item => {
        //   list.push(item.guid)
        // })
        // webAuth.unbindWebAuths(list).then((respones: any) => {
        //   console.log(respones)
        //   if (respones.data.code == '00000') {
        //     bindList.value = [];
        //     ElMessage({
        //       type: "success",
        //       message: "解绑成功！",
        //     });
        //   }
        // })
      })
  }
}

function logout() {
  // proxy.$openMessageBox("是否确认退出登录", "warning", () => {
  //   userApi.logout().then(() => {
  //     userStore.logout({
  //       logMessage: 'logout-常触发退出登录'
  //     })
  //     localStorage.removeItem("token");
  //     localStorage.removeItem("refreshToken");
  //     localStorage.removeItem("tokenTimestamp");
  //     localStorage.removeItem("user");
  //     proxy.$router.push('/portalLogin')
  //   })
  // })
}

/** 注销账号 */
function stopLogonUser() {
  // proxy.$openMessageBox(userData?.isAdmin === 'Y' ? "是否确认注销当前管理员用户及其所在企业下所有的用户？" : "是否确认注销当前用户？", "warning", () => {
  //   staffInfoApi.stopLogonUser(userData?.staffGuid).then((res) => {
  //     if (res.data.code == '00000') {
  //       ElMessage({
  //         type: "success",
  //         message: "注销账号成功",
  //       });
  //       userApi.logout().then(() => {
  //         userStore.logout({
  //           logMessage: 'logout-常触发退出登录'
  //         })
  //         localStorage.removeItem("token");
  //         localStorage.removeItem("refreshToken");
  //         localStorage.removeItem("tokenTimestamp");
  //         localStorage.removeItem("user");
  //         proxy.$router.push('/portalLogin')
  //       })
  //     } else {
  //       ElMessage({
  //         type: "error",
  //         message: "注销账号失败",
  //       });
  //     }
  //   });
  // })
}

onMounted(() => {
  // webAuth.getCurrentUserWebAuths().then((res: any) => {
  //   let list = res.data;
  //   if (list && list.length) {
  //     bindList.value = list;
  //   }
  // })
});
</script>



<style lang="scss" scoped>
:deep(.el-popper) {
  padding: 0;
}

:deep(.user-setting) {
  padding: 0 !important;
}

:deep(.el-radio-group) {
  .el-radio--large {
    width: 420px;
  }
}

.tools {
  display: flex;
  align-items: center;
  white-space: nowrap;


  .buttons {
    .item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      width: 34px;
      cursor: pointer;
      vertical-align: middle;

      .el-icon {
        color: var(--el-text-color-primary);
        transition: var(--el-transition-color);
      }
    }

    .item-pro {
      display: inline-flex;
      align-items: center;
      width: auto;
      padding: 0 10px;
      transform-origin: right center;
      animation: pro-text 3s ease-out infinite;

      @keyframes pro-text {

        0%,
        20% {
          transform: scale(1);
        }

        50%,
        70% {
          transform: scale(1.2);
        }

        100% {
          transform: scale(1);
        }
      }

      .title {
        padding-left: 5px;
        font-weight: bold;
        font-size: 14px;
        background-image: linear-gradient(to right, #ffa237, #fc455d);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}

.avatar-info {
  padding-bottom: 10px;
}

:deep(.user-container) {
  display: inline-block;
  cursor: pointer;
  height: var(--g-header-height-portal);
  // line-height: var(--g-header-height-portal);
  display: flex;
  align-items: center;
  padding: 0;

  .user-wrapper {
    display: flex;
    align-items: center;
    padding-left: 12px;
    padding-right: 24px;

    .el-avatar {
      vertical-align: middle;
      margin-top: -2px;
    }
  }
}

.user-container:hover {
  background: #f6f6f6;
}

.segmentation {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: var(--g-header-height-portal);
  /* 容器的高度为视口高度 */
}

.vertical-line {
  width: 1px;
  /* 分割线的宽度 */
  height: 70%;
  /* 分割线的高度 */
  background-color: #fff;
  /* 白色背景 */
}

.horizontal-line {
  border: none;
  height: 1px;
  background-color: #E5E5E5;
  width: 100%;
  /* 宽度为容器的100% */
}

.menu-wrapper {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.menu-wrapper:hover {
  background: #F5F5F5;
}

.login-out {
  cursor: pointer;
  text-align: center;
  padding: 0 10px;
}

.login-out-btn {
  height: 32px;
  line-height: 32px;
  margin-top: 10px;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(217, 217, 217, 1);
}

.color-21 {
  color: #212121;
  font-size: 14px;
  padding-right: 12px;

  &.mark-icon {
    padding: 0 16px;
    display: flex;
    align-items: center;
    position: relative;

    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }

    &::after {
      height: 40px;
      content: '';
      border-right: 1px solid #E5E5E5;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}

:deep(.el-input.captcha) {
  .el-input__wrapper {
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  }

  .el-input-group__append {
    width: 150px;
    margin-left: 8px;
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  }

  img {
    cursor: pointer;
  }
}
</style>