<script setup lang="ts">
import { message } from 'ant-design-vue'
import { ref } from 'vue'
import { routeToSearch } from '@/router'

const query = ref('')

function onSearch() {
  const q = query.value.trim()
  if (q.length == 0) {
    message.warning('请输入查询关键词')
    return
  }

  routeToSearch({ type: 'advanced', query: query.value })
}
</script>

<template>
  <div class="advanced-search-wrap">
    <h1 class="title">高级搜索</h1>
    <a-divider></a-divider>
    <div class="search-box-wrap">
      <div>查询表达式：</div>
      <div>
        <a-textarea v-model:value="query" placeholder="请输入查询表达式。例如：TP=(建筑工程)" :rows="4" />
      </div>
      <div class="operation-wrap">
        <div class="query-keyword">
          <a-space>
            <div class="info">
              <ul style="padding-left: 20px;">
                <li>TP=主题</li>
                <li>TI=论文标题</li>
              </ul>
              <ul class>
                <li>KW=关键词</li>
                <li>AU=作者</li>
              </ul>
              <ul class>
                <li>AB=摘要</li>
                <li>UN=机构</li>
              </ul>
              <ul class>
                <li>PY=年份</li>
              </ul>
            </div>
          </a-space>
          <div class="input-tip">
            <br />检索举例：
            <br />1、TP=(建筑工程) OR (TP=(建筑工程) AND AU=(张晓林))  可以检索到主题包含"建筑工程"的文献 或 主题中包含"建筑工程"、作者为张晓林的文献
            <br />2、TP=(施工技术 AND 工程技术) AND KW=(工程设计) 可以检索到 主题包含"施工技术"和"工程技术"和关键词是"工程设计"的文献
          </div>
        </div>
        <a-space class="button-box">
          <a-button>清除</a-button>
          <a-button type="primary" @click="onSearch"> 
            <svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
              <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 
              256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 
              8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 
              23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
            </svg>
          </a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.advanced-search-wrap {
  width: 80%;
  margin: 0 auto;
  margin-top: 10%;

  h1.title {
    font-size: 2rem;
    text-align: center;
  }

  .search-box-wrap {
    > div {
      margin-top: 10px;
    }

    .operation-wrap {
      // text-align: right;
      .query-keyword {
        float: left;
      }
      .button-box {
        float: right;
      }
    }

    .query-keyword {
      border: 1px solid #f0f0f0;
      border-radius: 4px;
      width: 100%;
      max-width: 580px;
      ul {
        list-style-type: none;
      }
      .info {
        justify-content: space-between;
        flex-wrap: nowrap;
        display: flex;
        font-size: 12px;
        color: #081322;
      }
      .input-tip {
        font-size: 12px;
        color: #878787;
        padding: 0 20px 20px 20px;
      }
    }
  }
}
</style>