<script lang="tsx" setup>
const emit = defineEmits([
  'update-messages'
])
const router = useRouter()
const dialogVisible = ref(false)

interface Props {
  transparent?: boolean
  hasBorder?: boolean
}
withDefaults(
  defineProps<Props>(),
  {
    transparent: false,
    hasBorder: false
  }
)


const gotoHome = () => {
  router.push({
    name: 'Home',
    query: {
      tkn_8f9a1c7b3e24fd: 'c154d4a7-dad3-45d0-a11f-07893dd4fbba'
    }
  })
}

const cleanHandle = () => {
  dialogVisible.value = true
}

const close = () => {
  dialogVisible.value = false
}

const cleanChat = () => {
  dialogVisible.value = false
  emit('update-messages')
  window.$ModalMessage.success('操作成功')
}


</script>

<template>
  <div style="width: 100%;">
    <header
      class="navigation-nav-header-container b-b"
      :class="[
        transparent
          ? 'bg-bgcolor'
          : 'bg-transparent',
        hasBorder
          ? 'b-b-#000/8 b-b-solid'
          : 'b-b-transparent'
      ]"
    >
      <div class="header-block">
        <div
          class="header-block-div"
          @click="gotoHome()"
        >
          <span class="back"><svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            aria-hidden="true"
            focusable="false"
            role="presentation"
            class="icon icon-caret"
          >
            <path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z" />
          </svg></span>
          <span class="title">个人知识库</span>
        </div>
      </div>
      <div
        class="clean"
        @click="cleanHandle()"
      >
        <svg
          t="1750818177712"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1494"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="200"
          height="200"
        ><path
          d="M921.6 512 880.64 512 972.8 972.8C972.8 1001.088 949.888 1024 921.6 1024L102.4 1024C74.112 1024 51.2 1001.088 51.2 972.8L143.36 512 102.4 512C74.112 512 51.2 489.088 51.2 460.8L51.2 409.6C51.2 381.312 74.112 358.4 102.4 358.4L409.6 358.4 409.6 102.4C409.6 45.8496 455.4496 0 512 0 568.5504 0 614.4 45.8496 614.4 102.4L614.4 358.4 921.6 358.4C949.888 358.4 972.8 381.312 972.8 409.6L972.8 460.8C972.8 489.088 949.888 512 921.6 512ZM102.4 972.8 257.6384 972.8C254.1056 967.5008 252.4416 960.9472 253.6192 954.1888L284.7488 726.5024C287.2064 712.6016 300.4672 703.2832 314.3936 705.7408 328.32 708.1984 337.6128 721.4848 335.1808 735.4112L304.0512 963.072C303.4112 966.6816 302.0032 969.9328 300.1088 972.8L921.6 972.8 819.2 512 204.8 512 102.4 972.8ZM563.2 102.4C563.2 74.112 540.288 51.2 512 51.2 483.712 51.2 460.8 74.112 460.8 102.4L460.8 358.4 563.2 358.4 563.2 102.4ZM921.6 409.6 102.4 409.6 102.4 460.8 921.6 460.8 921.6 409.6Z"
          fill="#232323"
          p-id="1495"
        /></svg>
      </div>
    <!-- <div
      class="header-left"
    >
      <div
        flex="~ items-center justify-center"
        class="text-20"
        select-none
        cursor-pointer
        @click="handleToRepo()"
      >
        <div class="size-24 i-streamline-emojis:cloud-1"></div>
        <div class="flex-1 pl-10 font-600 text-center">{{ systemTitle }}</div>
      </div>
    </div>
    <div class="flex-1">
      <div
        flex="~ col items-center justify-center"
        px-36px
      >
        <slot name="bottom"></slot>
      </div>
    </div>

    <div class="header-right">
      <slot name="right"></slot>
    </div> -->
    </header>
    <div
      v-if="dialogVisible"
      class="confirm-popup-block"
    >
      <div class="confirm-popup">
        <div class="popup__header">
          <span class="popup__title">是否清空全部对话？</span>
        </div>
        <div class="popup__body">
          <span>清空后，对话内容无法恢复</span>
        </div>
        <div class="popup__footer">
          <span class="popup-footer">
            <a
              href="javascript:;"
              class="close"
              @click="close()"
            >取 消</a>
            <a
              href="javascript:;"
              class="ok"
              @click="cleanChat()"
            >确 定</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.navigation-nav-header-container {
  --at-apply: w-full flex;
  --at-apply: px-16;
  min-height: 44px;
  justify-content: space-between;
  align-items: center;

  .header-block {
    display: flex;
    align-items: center;
    min-height: 44px;

    .header-block-div {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      min-height: 44px;
    }
    .back {
      display: flex;
      align-items: center;

      svg {
        width: 16px;
        height: 16px;
        transform: rotate(180deg);
      }
    }
    .title {
      font-weight: bold;
      font-size: 16px;
    }
  }

  .clean {
    display: flex;
    justify-content: center;
    height: 34px;
    width: 34px;
    align-items: center;
    border-radius: 6px;
    border: 1px solid #E5E5E5;
    cursor: pointer;
    svg {
      width: 18px;
      height: 18px;
    }
  }

  .header-left,
  .header-right {
    --at-apply: flex items-center h-full text-16;
  }

  .header-left {
    --at-apply: h-50px;
  }

  .header-right {
    --at-apply: flex items-center h-full text-16;
  }
}
.confirm-popup-block {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  .confirm-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border: 1px solid #E5E5E5;
    border-radius: 12px;
    box-shadow: 0px 0px 10px #f2f2f2;
    width: 300px;
    max-width: 80%;
    .popup__title {
      display: block;
      text-align: center;
      font-size: 16px;
    }
    .popup__body {
      margin: 10px 0;
      span {
        display: block;
        text-align: center;
        font-size: 16px;
        color: #999;
      }
    }
    .popup__footer {
      margin-top: 30px;

      .popup-footer {
        display: flex;
        justify-content: center;

        a {
          font-size: 16px;
          color: #232323;
          padding: 5px 20px;
          border: 1px solid #232323;
          border-radius: 4px;

          &.ok {
            background: #232323;
            color: #fff;
          }
        }

        a + a {
          margin-left: 20px;
        }
      }
    }
  }
}

</style>
