<template>
  <div class="flex">
    <template v-if="!isMobile">
      <!--全屏 -->
      <!--      <div class="setting-item" @click="toggle">-->
      <!--        <svg-icon-->
      <!--          :icon-class="isFullscreen ? 'fullscreen-exit' : 'fullscreen'"-->
      <!--        />-->
      <!--      </div>-->

      <!--      &lt;!&ndash; 布局大小 &ndash;&gt;
      <el-tooltip
        :content="$t('sizeSelect.tooltip')"
        effect="dark"
        placement="bottom"
      >
        <size-select class="setting-item" />
      </el-tooltip>

      &lt;!&ndash; 语言选择 &ndash;&gt;
      <lang-select class="setting-item" />-->
    </template>

    <!-- 用户头像 -->
    <el-dropdown class="setting-item" trigger="click">
      <div class="flex-center h100% p10px">
        <img
          v-if="userStore.user.avatar"
          :src="getHeader"
          object-fit="cover"
          style="
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin-right: 10px;
          "
        />
        <el-badge
          v-if="unReadMessageNum > 0"
          :value="unReadMessageNum"
          :max="10"
        >
          <span>{{ userStore.user.username }}</span>
        </el-badge>
        <span v-else>{{ userStore.user.username }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item divided @click="userCenter">
            个人中心
          </el-dropdown-item>
          <el-dropdown-item divided @click="openMessageDialog">
            <el-badge
              v-if="unReadMessageNum > 0"
              :value="unReadMessageNum"
              :max="10"
            >
              <span>消息中心</span>
            </el-badge>
            <span v-else>消息中心</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click="logout">
            {{ $t("navbar.logout") }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 设置 -->
    <template v-if="defaultSettings.showSettings">
      <!--      <div class="setting-item" @click="settingStore.settingsVisible = true">-->
      <!--        <svg-icon icon-class="setting" />-->
      <!--      </div>-->
    </template>

    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="980px"
      :append-to-body="true"
      min-height="800px"
      @close="dialog.visible = false"
    >
      <el-tabs type="border-card" @tab-click="clickTab">
        <el-tab-pane label="通知消息">
          <div class="mainContentBox">
            <avue-crud
              :option="options"
              v-model:page="page"
              :table-loading="loading"
              @size-change="handleQuery"
              @row-click="clickItem"
              @current-change="handleQuery"
              :data="pageData"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane label="系统消息">
          <div class="mainContentBox">
            <avue-crud
              :option="options"
              v-model:page="page1"
              :table-loading="loading"
              @size-change="handleQuery1"
              @current-change="handleQuery1"
              :data="pageData1"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <UserCenter ref="userCenterRef" />
  </div>
</template>
<script setup>
import {
  useAppStore,
  useTagsViewStore,
  useUserStore,
  useSettingsStore,
} from "@/store";
import defaultSettings from "@/settings";
import { DeviceEnum } from "@/enums/DeviceEnum";
import UserCenter from "@/views/login/userCenter.vue";
import { userMessageNum, userMessage, readMessage } from "@/api/system/message";
const appStore = useAppStore();
const options = ref({});
const loading = ref(false);
const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();
const settingStore = useSettingsStore();
const unReadMessageNum = ref(null);
const getHeader = computed(() => {
  let url = import.meta.env.VITE_APP_UPLOAD_URL + userStore.user.avatar;
  return import.meta.env.VITE_APP_UPLOAD_URL + userStore.user.avatar;
});
const route = useRoute();
const router = useRouter();
const page = ref({ total: 0, currentPage: 1, pageSize: 10 });
const page1 = ref({ total: 0, currentPage: 1, pageSize: 10 });
const pageData = ref([]);
const pageData1 = ref([]);
const dialog = reactive({
  title: "消息管理",
  visible: false,
  type: "0",
  state: "0",
});
const clickItem =(row) =>{
  if(row.msgId === '3'){
    window.open("/quality/faultHandle",'_blank')
  }
  if(row.msgId === '4'){
    window.open("/outsource",'_blank')
  }
}
const openMessageDialog = () => {
  handleQuery();
  dialog.visible = true;
};
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);

const { isFullscreen, toggle } = useFullscreen();

const checkUnReadMessageNum = () => {
  userMessageNum({}).then((data) => {
    unReadMessageNum.value = data.data;
  });
};
options.value = {
  border: true,
  align: "center",
  menuBtn: false,
  menuAlign: "center",
  viewBtn: false,
  editBtn: false,
  menu: false,
  addBtn: false,
  refreshBtn: false,
  column: [
    {
      label: "标题",
      prop: "title",
      width: 150,
      overHidden: true,
    },
    {
      label: "内容",
      prop: "content",
      width: 450,
      overHidden: true,
      html: true,
      formatter: (val) => {
        return val.content;
      },
    },
    {
      label: "时间",
      prop: "created",
    },
  ],
};
/**
 * 注销
 */
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false,
  }).then(() => {
    userStore
      .logout()
      .then(() => {
        router.replace(`/login`);
        tagsViewStore.delAllViews();
      })

  });
}
const clickTab = (targetName) => {
  if (targetName.index === "0") {
    handleQuery(null, null);
  } else {
    handleQuery1(null, null);
  }
};
const handleQuery = (params, done) => {
  loading.value = true;
  const querySearch = {
    type: "1",
    pageSize: page.value.pageSize,
    pageNo: page.value.currentPage,
  };
  queryMessageList(querySearch, page, pageData, done);
};
const queryMessageList = (searchParams, pageObj, pageDataList, done) => {
  userMessage(searchParams)
    .then(({ data }) => {
      pageDataList.value = data.records;
      pageObj.value.total = data.totalCount;
      pageObj.value.currentPage = data.pageNo;
      pageObj.value.pageSize = data.pageSize;

      if (data.records) {
        let unreadIds = data.records
          .filter((item) => item.readState === "0")
          .map((mes) => mes.id);
        if (unreadIds.length > 0) {
          readMessage(unreadIds).then((data) => {});
        }
      }
    })
    .finally(() => {
      loading.value = false;
      if (done) {
        done();
      }
    });
};
const handleQuery1 = (params, done) => {
  loading.value = true;
  const querySearch = {
    type: "0",
    pageSize: page1.value.pageSize,
    pageNo: page1.value.currentPage,
  };
  queryMessageList(querySearch, page1, pageData1, done);
};

onMounted(() => {
  checkUnReadMessageNum();
});

const userCenterRef = ref();
const userCenter = () => {
  userCenterRef.value && userCenterRef.value?.show();
};
</script>
<style lang="scss" scoped>
.setting-item {
  display: inline-block;
  min-width: 40px;
  height: $navbar-height;
  line-height: $navbar-height;
  color: var(--el-text-color);
  text-align: center;
  cursor: pointer;
  margin-right: 10px;

  &:hover {
    background: rgb(0 0 0 / 10%);
  }
}
.layout-top,
.layout-mix {
  .setting-item,
  .el-icon {
    color: var(--el-color-white);
  }
}
.el-scrollbar{
  height: auto !important;
}
.dark .setting-item:hover {
  background: rgb(255 255 255 / 20%);
}
:deep(.el-badge__content.is-fixed) {
  position: absolute;
  right: calc(1px + var(--el-badge-size) / 2);
  top: 0;
  transform: translateX(125%);
  z-index: var(--el-index-normal);
}
</style>
