<template>
  <div class="header">
    <div class="logo">
      <img :src="logoImg" alt="" />
      <span>健康服务预约平台</span>
    </div>
    <div class="logout" @click.stop="logoutEvt">
      <img :src="logout" alt="" />
      <span>退出</span>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
export default {
  name: "Header",
  components: {},
  data() {
    return {
      logoImg: require("@/assets/imgs/login/logo.png"),
      logout: require("@/assets/imgs/login/logout.png"),
    };
  },
  methods: {
	  logoutEvt(){
		  this.$confirm({
				title: '提示',
				content: '退出登录',
				okText: '确认',
				cancelText: '取消',
				onOk: ()=>{
					Cookies.remove('JSESSIONID');
					this.$router.push({
						path: '/login'
					})
				},
				onCancel: ()=>{
					
				}
		  })
	  }
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;

  justify-content: space-between;
  background: #2c2c31;
  .logout {
    padding: 2.5px 24.5px;
    color: white;
    cursor: pointer;
    line-height: 30px;
    span {
      margin-left: 3px;
      position: relative;
      top: 1px;
    }
  }
  .logo {
    padding: 2.5px 21.5px;
    span {
      color: white;
      line-height: 30px;
      margin-left: 8px;
    }
    img {
      height: 25px;
    }
  }
}
</style>