<template>
  <div class="header-bar">
    <el-row>
      <el-col :span="8" style="text-align: left">
        <router-link to="/">
          <div class="navbar-brand">
            <img id="logo" src="@/assets/logo.svg" width="38px" height="38px" alt="ClayTop"/>
            <span> ClayTop </span>
          </div>
        </router-link>
      </el-col>
      <el-col :span="8" style="text-align: center">
        <div class="navbar-title">&nbsp;</div>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <div class="navbar-btns">
          <el-button type="primary" @click="home" link>首页</el-button>
          <el-button type="primary" @click="about" link>关于ClayTop</el-button>
          <el-button type="primary" @click="tutorial" link>使用教程</el-button>
          <el-button type="primary" @click="$message('敬请期待...')" link>其它</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const home = () => {
  this.$router.push({
    path: '/'
  })
}
const about = () => {
  this.$router.push({
    path: '/about'
  })
}
const tutorial = () => {
  this.$message({
    dangerouslyUseHTMLString: true,
    message: '<div style="text-align: left">时间原因，暂未编写。<br/><br/>目前【开发方式】和【使用方式】可先参考 README.md。 <br/><br/><div style="text-align: right">—— by clay</div></div>',
    type: 'info',
    center: true,
    duration: 5000,
    showClose: false,
    offset: 100
  })
}

</script>

<style lang="scss" scoped>
.header-bar {
  .navbar-brand {
    display: inline-block;
    margin: 0 18px 0 35px;
    /*padding: 0 0 0 8px;*/
    line-height: 22px;
    font-size: 20px;

    img {
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      /*font-family: "Microsoft YaHei";*/
      color: #06080A;
    }
  }

  .navbar-title {
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
  }

  .navbar-btns {
    vertical-align: middle;
    text-align: right;

    .el-button:last-child {
      margin-right: 20px;
    }

    .el-button--text {
      color: #06080A;
    }
  }
}
</style>
