<template>
  <div class="header">
    <div class="left">
      <img class="first" src="../assets/three.png" alt="" />
      <div class="shu"></div>
      <img class="logo" src="../assets/white-logo.png" alt="" />
    </div>
    <div class="right">
      <div
        @click="dialogVisible = true"
        class="pointer"
        style="padding-top: 6px"
      >
        <el-badge
          :hidden="isNewMessage.length == 0"
          :value="isNewMessage.length"
          class="mr30"
        >
          <el-icon size="20" color="#00a9dc">
            <BellFilled />
          </el-icon>
        </el-badge>
      </div>
      <img class="user-icon" src="../assets/user.png" alt="" />
      <div class="user">{{ userName }}</div>
      <div class="quit" @click="quit">[退出]</div>
    </div>
    <el-dialog v-model="dialogVisible" title="拍照通知" width="30%">
      <el-table :data="isNewMessage" border>
        <el-table-column align="center" type="index" />
        <el-table-column align="center" property="shipName" label="船名" />
        <el-table-column align="center" property="status" label="状态" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import store from "../store";
import router from "../router";
import api from "../apis/fetch";
import { onMounted, ref } from "_vue@3.2.20@vue";
import { BellFilled } from "@element-plus/icons";
import _ from "lodash";
export default {
  components: {
    BellFilled,
  },
  setup() {
    let userName = localStorage.staffName;
    function quit() {
      localStorage.removeItem("staffPhone");
      localStorage.removeItem("id");
      localStorage.removeItem("status");
      localStorage.removeItem("userType");
      localStorage.removeItem("staffName");
      store.commit("changeLogin", false);
      router.push({ path: "/login" });
    }
    let dialogVisible = ref(false);
    let isNewMessage = ref([]);
    function isWithinTime(t0 = new Date()) {
      let t1 = _.cloneDeep(t0);
      let t2 = _.cloneDeep(t0);
      t1.setHours(8);
      t1.setMinutes(30);
      t1.setSeconds(0);
      t2.setHours(9);
      t2.setMinutes(30);
      t2.setSeconds(0);
      let t00 = t0.getTime();
      let t11 = t1.getTime();
      let t22 = t2.getTime();
      return t00 > t11 && t00 < t22;
    }
    async function getUnphotographNotice() {
      console.log("heart");
      let { data } = await api.getUnphotographNotice();
      if (data.status == 0) {
        for (let i of data.result) {
          isNewMessage.value.push({
            shipName: i,
            status: "未拍照",
          });
        }
      } else {
        isNewMessage.value = 0;
      }
    }
    onMounted(() => {
      getUnphotographNotice();
      setInterval(async () => {
        if (isWithinTime()) {
          getUnphotographNotice();
        }
      }, 2 * 60 * 1000);
    });
    return {
      quit,
      userName,
      isNewMessage,
      dialogVisible,
    };
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 60px;
  background: #212029;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left,
.right {
  display: flex;
  align-items: center;
}

.first {
  width: 22px;
  height: 20px;
  margin: 0 22px;
}

.shu {
  width: 1px;
  height: 60px;
  background: #101015;
  margin-right: 22px;
}

.logo {
  width: 120px;
  height: 40px;
}

.title {
  font-size: 21px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  margin-left: 26px;
}

.user-icon {
  width: 18px;
  height: 18px;
  margin-right: 16px;
}

.user,
.quit {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-right: 16px;
}
</style>
