<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { robotList } from '@/api/robot'
// import robotStore from '@/store/modules/robotStore'
// const userRobotStore = robotStore()
const router = useRouter()
const drawer = ref(false)
const robot_id = ref('')
const robotCards = ref([])
const loginOut = () => {
  drawer.value = false
  localStorage.removeItem('TOKEN')
  router.push('/login')
}
// const robotInfo = computed(() => {
//   return userRobotStore.robotInfo
// })
// 全屏功能
const fullScreen = () => {
  // 用来判断是不是全屏返回布尔值
  const full = document.fullscreenElement
  // 有兼容问题
  if (full) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
}
const getRobotList = async () => {
  robotCards.value = (await robotList({
    page: 1,
    page_size: 100
  })).list

}
onMounted(() => {
  // robot_id.value = robotInfo.id
  // getRobotList()
})

</script>

<template>
  <div class="setting-box">
    <!-- <span class="robot-name">机器人：{{ userRobotStore.robotInfo.name }}</span> -->
    <el-icon @click="fullScreen" style="margin-right: 15px;">
      <FullScreen />
    </el-icon>
    <el-icon @click="loginOut" style="color: var(--el-color-danger);">
      <SwitchButton />
    </el-icon>
    <!-- <el-popover placement="bottom" width="200px" trigger="click" offset="30" transition="el-fade-in">
      <template #reference>
        <span class="edit-icon" @click.stop>
          <el-image v-if="!robotInfo?.head_url" class="robot-head" src="@/assets/images/robot.png"></el-image>
          <el-image v-else class="robot-head" :src="robotInfo.head_url"></el-image>
        </span>
      </template>
      <template #default>
        <ul class="popover-list">
          <li class="robot">
            <el-image :src="robotInfo.head_url"></el-image>
            {{ robotInfo.name }}
          </li>
          <li class="delete-icon" @click="loginOut">
            <el-icon>
              <SwitchButton />
            </el-icon>
            退出登录
          </li>

        </ul>
      </template>

    </el-popover> -->

  </div>
  <!-- <el-drawer v-model="drawer" title="Settings" size="380px" show-close>
    <div class="drawer-box">
    
      <lebel class="select-label">选择您的机器人</lebel>
      <el-select v-model="robot_id" placeholder="选择机器人" @change="search">
        <el-option v-for="item in robotCards" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
    <el-divider><el-button type="danger" icon="SwitchButton" @click="loginOut">退出登录</el-button></el-divider>
  </el-drawer> -->
</template>

<style lang="scss" scoped>
.setting-box {
  line-height: $navbar-height;

  :deep(.el-dropdown) {
    vertical-align: initial;
  }

  .robot-name {
    font-size: 14px;
    color: var(--el-text-color-regular);
    margin-right: 15px;
  }

  .el-icon {
    position: relative;
    top: 4px;
    font-size: 20px;
    cursor: pointer;
    color: var(--el-text-color-secondary);

    &:hover {
      color: var(--el-color-primary);
    }
  }
}

.robot-head {
  height: 30px;
  width: 30px;
  border-radius: 30px;
  vertical-align: middle;
  transform: translateY(-2px);
}

.popover-list {
  padding: 10px 0;

  li {
    height: 40px;
    line-height: 40px;
    padding-left: 15px;

    // border-radius: 6px;
    // color: var(--el-color-primary);
    .el-icon {
      position: relative;
      top: 2px;
      margin-right: 4px;
    }

    // &:hover {
    //   background-color: var(--el-color-primary-light-9);
    // }
  }

  .robot {
    line-height: 40px;

    .el-icon {
      font-size: 25px;
      vertical-align: middle;
      transform: translateY(-3px);
    }

    .el-image {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      vertical-align: middle;
      margin-right: 5px;
      transform: translateY(-2px);
    }
  }

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

  .delete-icon {
    color: var(--el-color-danger);
    cursor: pointer;

    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
  }
}

:deep(.el-drawer__header) {
  border-bottom: 1px solid var(--el-text-color-regular);

}

.drawer-box {
  line-height: 1;
  padding: 0 20px;
  position: relative;

  // top: -40px;
  .select-label {
    font-size: 14px;
    line-height: 3;
  }
}


.el-divider {
  position: absolute;
  bottom: 40px;
  width: 91%;

  .el-button {
    width: 130px;
  }
}
</style>
