<script setup lang="ts">
import { useRequest } from "vue-request";
import { myRequest } from "@/requests/request.ts";
import { userinfo } from "@/store/store.ts";
import _ from "lodash";
import { SwitchButton } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { formatError } from "@/utils/utils.ts";
import { ref } from "vue";
import YlUserinfo from "@/components/yl-layout/yl-userinfo.vue";
import router from "@/router/router.ts";
import { updateMenu } from "@/utils/menu.ts";

const show = ref(false);

const { data: weather } = useRequest(() =>
  myRequest(`/api/weather`, userinfo.token),
);
const { runAsync: logout } = useRequest(
  () => myRequest(`/api/user/login`, userinfo.token, {}, "delete"),
  { manual: true },
);
const { runAsync: update } = useRequest(
  (param: userinfo) => myRequest(`/api/user`, userinfo.token, param, "put"),
  { manual: true },
);
const toLogout = () => {
  logout()
    .then((res) => {
      if (res.code === 200) {
        userinfo.login = false;
        userinfo.token = "";
        router.push("/");
        updateMenu();
      }
    })
    .catch((err) => {
      ElMessage.error(formatError(err));
      userinfo.login = false;
      userinfo.token = "";
    });
};
const toUpdateUserinfo = (data: userinfo) => {
  update(data)
    .then(() => {
      userinfo.userinfo = { ...data };
      show.value = false;
    })
    .catch((res) => ElMessage.error(formatError(res)));
};
</script>

<template>
  <div class="flex between header" style="height: 100%">
    <div class="logo">
      <el-image src="/static/image/logo.png" class="rotate" />
    </div>
    <div class="content">
      <el-carousel
        height="60px"
        autoplay
        :interval="6000"
        indicator-position="none"
        direction="vertical"
        :pause-on-hover="false"
      >
        <el-carousel-item
          v-for="(item, key) in weather?.data.split(';')"
          :key="key"
        >
          <span>{{ key ? "明" : "今" }}日天气：{{ item }}</span>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="user flex around">
      <el-avatar
        class="cursor-pointer"
        :src="
          _.get(userinfo, 'userinfo.avatar', '') || '/static/image/avatar.png'
        "
        @click="show = true"
      />
      <el-tooltip content="注销登录" placement="bottom" effect="light">
        <el-icon size="20" color="red" class="cursor-pointer" @click="toLogout">
          <SwitchButton
        /></el-icon>
      </el-tooltip>
    </div>
  </div>
  <el-dialog title="修改信息" v-model="show" width="40rem">
    <YlUserinfo @update="toUpdateUserinfo" :userinfo="userinfo.userinfo" />
  </el-dialog>
</template>

<style scoped>
.header {
  background: linear-gradient(
    90deg,
    #cc6aa555,
    #108ee955,
    #2dcca755,
    #cc6aa555,
    #108ee955
  );
  background-size: 400% 400%;
  overflow: hidden;
  animation: bg-pan-left 8s infinite both;
  padding-right: 3rem;
}
@keyframes bg-pan-left {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%;
  }
}
.logo {
  width: 60px;
}
.rotate {
  animation: rotate-cw 3s infinite linear both;
}
@keyframes rotate-cw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.content {
  width: calc(100vw - 200px);
  text-align: center;
  line-height: 60px;
}
.user {
  width: 7rem;
}
</style>
