<template>
    <div class="flex headerbox">
        <div class="flex-1">
          <div class="flex mt-1 ml-2 fc-w fz-14 ai-c weatherbox">
            <span>{{roleInfo.weather}}</span>
            <span class="ml-1">{{roleInfo.temp}}</span>
          </div>
        </div>
        <div class="flex flex-1 ai-c jc-c title">合作社服务平台</div>
        <div class="flex flex-1 jc-e">
          <div class="outlogin" @click="logout">退出登录</div>
        </div>
    </div>
  </template>
  <script>
  import { defineComponent, reactive, onMounted, toRefs } from "vue";
  import axios from "axios";
  export default defineComponent({
    components: {
       
    },
    setup(props, context) { 
      const data = reactive({
        roleInfo:{
          weather: '',
          temp: ''
        }
      });
      onMounted(() => {
        methods.getWeater()
      })
      const methods = {
        logout() {
            localStorage.clear()
            this.$router.push({
              path: '/',
            })
        },
        getWeater() {
          jQuery.ajax({
            url: "https://api.asilu.com/weather/",
            type: "GET",
            dataType: "jsonp",
            data: {
              city: "临沂",
              key: "adfdb863ddb1101bb6b40c0700d6203b",
            },
            success: function (res) {
              data.roleInfo.weather = res.weather[0].weather
              data.roleInfo.temp = res.weather[0].temp
            },
          });
        },
      };
      return {
        ...data,
        ...methods,
      };
    },
  });
  </script>
  <style scoped>
  .headerbox{
    width: 100%;
    height: 85px;
    background: url("/public/images/header.png") no-repeat center;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    z-index: 9;
  }
  .title{
    font-size: 42px;
    color: #FFFFFF;
    letter-spacing: 9px;
    height: 66px;
  }
  .weatherbox{
    margin-left: 9%;
    margin-top: 28px;
  }
  .outlogin{
    width: 120px;
    height: 35px;
    line-height: 38px;
    background: url("/public/images/outlogin.png");
    background-size: 100% 100%;
    margin-top: 15px;
    color: #fff;
    font-size:12px;
    margin-right: 8%;
    cursor: pointer;
  }
  </style>
  