<script lang="tsx" setup>
import { type InputInst } from 'naive-ui'
const router = useRouter()


const loading = ref(true)

setTimeout(() => {
  loading.value = false
}, 700)


const stylizingLoading = ref(false)


/**
 * 输入字符串
 */
const inputTextString = ref('')
const refInputTextString = ref<InputInst | null>()


const refReaderMarkdownPreview = ref<any>()

const placeholder = computed(() => {
  return '基于知识库提问'
})


const handleResetState = () => {
  inputTextString.value = ''

  stylizingLoading.value = false
  refReaderMarkdownPreview.value?.abortReader()
  refReaderMarkdownPreview.value?.resetStatus()
}
handleResetState()

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

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


</script>

<template>
  <LayoutCenterPanel
    :loading="loading"
  >
    <!-- 内容区域 -->
    <div
      flex="~ col"
      h-full
    >
      <div
        flex="~ justify-between items-center"
      >
        <div class="index-header-block">
          <div class="logo">
            <img
              src="../assets/images/logo.png"
              alt=""
            >
          </div>
          <div class="index-header">
            <h2>个人知识库</h2>
            <span
              class="search"
              @click="gotoSearch"
            >
              <svg
                t="1751009112601"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5234"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                width="200"
                height="200"
              ><path
                d="M470.4 912c-112 0-224-41.6-310.4-128C-9.6 611.2-9.6 332.8 160 160c172.8-172.8 451.2-172.8 620.8 0 172.8 172.8 172.8 451.2 0 620.8C697.6 867.2 582.4 912 470.4 912z m0-803.2c-92.8 0-185.6 35.2-256 105.6-140.8 140.8-140.8 374.4 0 515.2 140.8 140.8 374.4 140.8 515.2 0 140.8-140.8 140.8-374.4 0-515.2-70.4-70.4-166.4-105.6-259.2-105.6z"
                p-id="5235"
              /><path
                d="M905.6 976l-160-160c-19.2-19.2-19.2-51.2 0-70.4s51.2-19.2 70.4 0l160 160c19.2 19.2 19.2 51.2 0 70.4-19.2 22.4-51.2 22.4-70.4 0z"
                p-id="5236"
              /></svg>
            </span>
          </div>
        </div>
      </div>

      <div
        flex="1 ~ col"
        min-h-0
        pb-20
        style="align-items: center;justify-content: center;color: #999;font-size: 16px;"
      >
        欢迎大家在这里输入关键词咨询公司规则
      </div>

      <div
        flex="~ col items-center"
        flex-basis="10%"
        p="14px"
        py="0"
        class="bottom-block"
      >
        <div
          relative
          flex="1"
          w-full
          class="index-bottom"
          style="margin-bottom: 10px;"
        >
          <a
            href="Javascript:;"
            class="click-router"
            @click="gotoChat()"
          ></a>
          <n-input
            ref="refInputTextString"
            v-model:value="inputTextString"
            type="textarea"
            h-full
            class="textarea-resize-none text-15"
            :style="{
              '--n-border-radius': '20px',
              '--n-padding-left': '20px',
              '--n-padding-right': '20px',
              '--n-padding-vertical': '10px',
            }"
            :placeholder="placeholder"
          />
        </div>
      </div>
    </div>
  </LayoutCenterPanel>
</template>

<style lang="scss">
  .index-header-block {
    padding: 0 14px;
    width: 100%;
    .logo {
      padding: 10px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      width: 100%;

      img {
        max-width: 140px;
      }
    }
    .index-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        font-size: 18px;
        color: #232323;
      }
      .search {
        display: flex;
        justify-content: center;
        height: 34px;
        width: 34px;
        align-items: center;
        border-radius: 6px;
        background: #f2f2f2;
        svg {
          width: 16px;
          height: 16px;
        }
      }
    }
  }
  .index-bottom {
    .click-router {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
    }
  }
  .knowledge__list {
    padding: 14px;

    .knowledge__list-items {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #f2f2f2;
      gap: 10px;

      &:last-child {
        border-bottom: none;
      }

      .items-img {
        width: 60px;
        height: 60px;
        border-radius: 2px;
        background: #f2f2f2;
      }
      .items-info {
        h2 {
          font-size: 15px;
          line-height: 1.5;
          color: #232323;
          font-weight: normal;
          margin-bottom: 6px;
        }
        .items-info-content {
          display: flex;
          gap: 8px;
          font-size: 13px;
          line-height: 1.5;
          color: #999;
          align-items: center;
        }
      }
    }
  }
  .bottom-block .n-input {
    border-radius: 14px;
  }
  .bottom-block .n-input.n-input--textarea .n-input__textarea-el {
    max-height: 60px;
  }
</style>
