<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useBreadCrumb } from '@/stores/modules/breadCrumb'
import { useThemeStore } from '@/stores/modules/theme'

const router = useRouter()
const breadCrumb = useBreadCrumb()
const themeStore = useThemeStore()
const CancelRulesVisible = ref(false)

const handleGoBack = () => {
  const routeData = breadCrumb.getUpperRoute()
  router.push({
    name: routeData.label,
    query: routeData.query
  })
}
let monitoringQuery = ref()
const jumpLink = (label: string, query: any) => {
    if(label == 'Monitoring Settings') {
      CancelRulesVisible.value = true
      monitoringQuery.value = query
    } else {
      label &&
      router.push({
        name: label,
        query: query
      })
    }
}
const jumpLinkMonitoring = () => {
  CancelRulesVisible.value = false
  router.push({
    name: 'Monitoring Settings',
    query: monitoringQuery.value
  })
}
</script>

<template>
  <div
    class="v-breadcrumd"
    :class="{ 'is-dark': themeStore.theme === 'dark' }"
    v-if="breadCrumb.routeList.length > 1"
  >
    <span class="font_family icon-icon_back_b" @click="handleGoBack"></span>
    <template v-for="(routeItem, index) in breadCrumb.routeList" :key="routeItem.label">
      <template v-if="index + 1 !== breadCrumb.routeList.length">
        <span @click="jumpLink(routeItem.label, routeItem.query)" class="previous-route">{{
          routeItem.label
        }}</span>
        <span class="interval">|</span>
      </template>
      <span v-else>{{ routeItem.label }}</span>
    </template>
  </div>
  <div v-else></div>
    <!-- 取消保存 -->
    <el-dialog v-model="CancelRulesVisible" width="480">
      <div style="font-weight: 400">You have unsaved changes.</div>
      <div style="font-weight: 400">Are you sure you want to leave this page?</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="default" @click="CancelRulesVisible = false" style="width: 100px"
            >Cancel</el-button
          >
          <el-button class="el-button--warning" @click="jumpLinkMonitoring" style="width: 100px">
            OK
          </el-button>
        </div>
      </template>
      <template #header>
        <div class="cancel_header">
          <span class="iconfont_icon iconfont_warning">
            <svg class="iconfont icon_warning" aria-hidden="true">
              <use xlink:href="#icon-icon_tipsfilled_b"></use>
            </svg>
          </span>
          Unsaved Changes
        </div>
      </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.v-breadcrumd {
  display: flex;
  align-items: center;
  font-weight: 700;
  gap: 4px;
  .icon-icon_back_b {
    font-size: 18px;
    cursor: pointer;
  }
  .interval {
    margin: 0 2px;
    color: var(--color-neutral-3);
    transform: rotate(20deg);
  }
  .previous-route {
    color: var(--color-neutral-3);
    cursor: pointer;
    &:hover {
      color: var(--color-theme);
    }
  }
  &.is-dark {
    .interval,
    .previous-route {
      color: var(--color-neutral-2);
    }
  }
}
.cancel_header {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-1);
  display: flex;
  align-items: center;
}
.icon_warning {
  width: 22px;
  height: 22px;
  margin-right: 0;
  fill: var(--color-btn-warning-bg);
}
.iconfont_warning {
  display: flex;
  align-items: center;
}
</style>
