<template>
  <el-container class="cim-header">
    <el-row class="tw-w-full tw-flex tw-flex-row tw-items-center">
      <el-col :span="6" class="flex tw-justify-start">
        <Weather style="margin-left: 15px"></Weather>
      </el-col>
      <el-col :span="12" class="flex tw-justify-center">
        <div class="cim-header-center">
          <span>{{ title }}</span>
        </div>
      </el-col>
      <el-col :span="6" class="flex tw-justify-end">
        <div style="width: 120px" class="tw-flex tw-flex-row tw-items-center tw-justify-center">
          <div class="tw-flex">
            <img class="tw-mr-5"  @click="goPage('/')" src="/public/images/home2.png" alt="">
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <div class="tw-mr-10" style="display: flex;align-items: center;">
                  <img src="/public/images/user2.png" alt="">
              </div>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goPage('/main/personalCenter')">账号信息</el-dropdown-item>
                <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
import {defineComponent, reactive, watch} from "vue";
import Weather from "../../weather/Weather.vue";
import {useRouter} from 'vue-router'
import {toRefs} from "@vueuse/core";

export default defineComponent({
  name: 'CimHeader',
  props: ['title'],
  components: {Weather},
  setup(props) {
    const router = useRouter()
    let data = reactive({
      title: props.title
    })
    watch(
        () => props.title,
        (newVal, oldVal) => {
          data.title = newVal
        }
    )
    let methods = {
      goPage(path) {
        router.push(
            {
              path: path
            }
        )
      },
      logout() {
        localStorage.clear()
        router.push({path: "/login"})
      }
    };

    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

