<template>
    <div v-if="data.length" class="search-helper-field height_100">
      <div class="search-helper-field">
          <section class="search-helper-left-nav" value="#hrefNumAndText">
              <div v-for="(field,index) in data" :key="'field'+index" class="search-helper-left-nav__item" :class="field.value == currentField?'isActive':''" @click="changeGroup(field)">
                  <div v-if="index == 0" class="search-helper-left-nav__mask--top"></div> 
                  <div class="search-helper-left-nav__icon--circle"></div> 
                  <div class="search-helper-left-nav__icon--arrow"></div> 
                  <a>{{field.label}}</a>
              </div>
          </section>
      </div>
      <div ref="searchField" class="height_100 search-helper-right" >
          <div v-for="(item) in data" :id="item.value" :key="item.label" class="search-helper-field__table">
              <div :ref="item.value" class="title" :class="item.value == currentField?'isActive':''" >{{ item.label }}</div>
              <table class="splitFourTds">
                  <thead>
                      <tr>
                          <td>符号</td> 
                          <td>作用</td> 
                          <td>示例</td> 
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(child,index) in item.children" :key="child.value+index">
                            <td>{{ child.value }}</td>
                            <td>
                                <div v-html="child.role"></div>
                            </td>
                            <td>
                                <div v-html="child.example"></div>
                            </td>
                      </tr>
                  </tbody>
              </table>
          </div>    
      </div>
      
      
    </div>
</template>
  
<script>
  export default {
    components: {},
    props: {
    },
    data() {
      return {
          data:[
            {
                label:'逻辑运算符',
                value:'logicalOperator',
                children:[
                    {
                        label: 'AND',
                        value: 'AND',
                        role:'要求符号两边的关键词同时存在，对位置顺序没有要求；<br>或者要求符号两边的搜索条件同时满足；<br>当关键词之间存在空格且不存在逻辑运算符时，进行AND操作',
                        example:'太阳能 AND 电池<br>TI=纳米 AND PA=清华大学'
                    },
                    {
                        label: 'OR',
                        value: 'OR',
                        role:'要求符号两边的关键词至少出现任意一个;<br>或者要求符号两边的搜索条件至少满足一个',
                        example:'太阳能 OR 电池<br>TI=纳米 OR PA=清华大学'
                    },
                    {
                        label: 'NOT',
                        value: 'NOT',
                        role:'要求排除符号后面的关键词；<br>或者要求匹配符号后面搜索条件的结果从匹配符号前面搜索条件的结果中排除；<br>逻辑运算符的优先级顺序为NOT>AND>OR，可以通过添加()的方式提高相应部分检索式的优先级。',
                        example:'太阳能 NOT 电池<br>TI=纳米 NOT PA=清华大学'
                    },
                ]
            },
            {
                label:'通配符',
                value:'wildcard',
                children:[
                    {
                        label: '*',
                        value: '*',
                        role:'代表0个或多个字符，可以用在关键词或号码的任意位置使用；<br>'
                            +'在一个关键词中最多能用两个，且不能与其他通配符同时使用；<br>'
                            +'用在关键词中间或末尾时，可以用于所有文本和号码类型字段，且*前需要保留2个以上的字符；<br>'
                            +'不支持在引号中使用。',
                        example:'*车<br>天*'
                    },
                ]
            },
            {
                label:'位置符',
                value:'position',
                children:[
                    {
                        label: '$PREn',
                        value: '$PREn',
                        role:'两个限定位置顺序的关键词之间间隔不超过n个单词或汉字(0≤n≤99)；<br>'
                            +'位置符的优先级高于逻辑运算符',
                        example:'AB=(太阳能 $PRE2 电池 $PRE2 硅)'
                    },
                ]
            },
            {
                label:'其他',
                value:'other',
                children:[
                    {
                        label: '()',
                        value: '()',
                        role:'将括号内的逻辑优先运算',
                        example:'汽车 AND (发动机 OR 引擎)'
                    },
                    {
                        label: '""',
                        value: '""',
                        role:'要求引号内的关键词位置顺序均固定；<br>'
                            +'短语查询，固定引号内的关键词位置顺序',
                        example:'"electric vehicle"'
                    },
                    {
                        label: '特殊字符',
                        value: '特殊字符',
                        role:'特殊字符作为一个单独的字符支持检索',
                        example:'AB=(85℃)'
                    },
                ]
            },
          ],
          currentField:'',
          observer:null,
          isClick:true
      };
    },
    watch: {},
    computed: {},
    created() {},
    mounted() {
      this.init()
    },
    beforeDestroy(){
      if(this.observer){
          this.observer.disconnect()
      }
    },
    methods: {
        addListen(){
            var that = this
            // 创建一个 Intersection Observer 实例
            this.observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting && !that.isClick) {
                        // 当元素进入视口时执行的逻辑
                        var id = entry.target.getAttribute('id')
                        that.currentField = id
                        // 可以在这里执行懒加载、动画触发等操作
                        // observer.unobserve(entry.target); // 如果只需要触发一次，可以取消观察
                    }
                });
            }, {
                root: null, // null 表示视口
                rootMargin: '0px',
                threshold: 0.8 // 当元素 10% 进入视口时触发
            });
    
            // 选择需要观察的元素
            const elements = this.$refs.searchField.childNodes;
            elements.forEach(element => {
                this.observer.observe(element);
            });
        },
        init(){
            if(this.data.length){
            this.$set(this,'currentField',this.data[0].value)
            }
            this.$nextTick(()=>{
                this.addListen()
            })
            setTimeout(()=>{
                this.isClick = false
            },500)
        },
        changeGroup(field){
            this.isClick = true
            this.currentField = field.value
            var dom = this.$refs[field.value]
            dom[0].scrollIntoView(
                {
                    behavior: "smooth",
                    block:'center'
                    // block:'nearest'
                }
            )
            setTimeout(()=>{
                this.isClick = false
            },500)
        },
    },
  };
  </script>
  <style lang="scss" scoped>
  .search-helper-field{
      padding-top: 40px;
      position: relative;
      .search-helper-field{
          position: absolute;
          left: -146px;
          top: 40px;
          .search-helper-left-nav {
              position: relative;
              border-left: 2px solid #eee;
              width: 144px;
              display: inline-block;
          }
          .search-helper-left-nav__item {
              position: relative;
              padding: 2px 0 2px 12px;
              font-size: 12px;
              color: #061632;
              line-height: 16px;
              vertical-align: top;
              margin-bottom: 12px;
              &:last-child{
                  margin-bottom: 0;
              }
          }
          .search-helper-left-nav__mask--top {
              position: absolute;
              top: 0;
              left: -3px;
              width: 4px;
              height: 8px;
              background: #fafbfc;
              display: inline-block;
          }
          .search-helper-left-nav__icon--circle {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 2px solid #eee;
              position: absolute;
              left: -8px;
              top: 5px;
              background: #fff;
              display: inline-block;
          }
          .search-helper-left-nav__icon--arrow {
              background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAAG3/V4gAAAAAXNSR0IArs4c6QAAAIVJREFUGBlj0EwWessAAhpJQv8ZQQSYByTgHCYMEbgAA+M1uCxMkIn1fyhcL0iQmYEx8eq8twtQBEES3Cwc3Bjav/39OQ1FkJGR8dv1uW8TMLSDjIABkCImlv+mV2e+u4ZXIZKGhSjWwCSQaUag/7iY2bNYGBkZ3v3/zyCELAljw7wH4gMAgs0pM1pGtHgAAAAASUVORK5CYII=) no-repeat 50%;
              width: 10px;
              height: 8px;
              position: absolute;
              left: -5px;
              top: 5px;
              display: none;
          }
          .search-helper-left-nav__mask--bottom {
              position: absolute;
              bottom: 0;
              left: -3px;
              width: 4px;
              height: calc(100% - 10px);
              background: #fafbfc;
          }
          .isActive{
              .search-helper-left-nav__icon--arrow {
                  display: inline-block;
              }
              .search-helper-left-nav__icon--circle {
                  display: none;
              }
              .search-helper-left-nav__icon--circle {
                  display: none;
              }
          } 
      }
      .isActive{
          color:#286212 !important;
      }
      .search-helper-right{
          overflow-y: auto;
          -ms-overflow-style: none; /* IE 和 Edge */
          scrollbar-width: none; /* Firefox */
          &::-webkit-scrollbar {
              display: none; /* Chrome, Safari, Opera */
          }
      }
      .search-helper-field__table{
          .title{
              height: 30px;
              line-height: 30px;
              font-size: 16px;
              color: #061632;
              margin-bottom: 8px;
              padding-left: 8px;
              font-weight: 700;
          }
          table td {
              padding: 8px;
              border: 1px solid #eaeaea;
              line-height: 24px;
              vertical-align: top;
              &:nth-child(1){
                  width: 120px;
              }
              &:nth-child(3){
                  width: 250px;
              }
          }
          table tbody {
              font-size: 14px;
              color: #061632;
          }
          table {
              width: 100%;
              border-collapse: collapse;
              border-spacing: 0;
              margin-bottom: 40px;
              thead{
                  background: #f4f5f7;
                  font-size: 16px;
                  color: #5e6c84;
                  td {
                      font-weight: 700;
                      border: 1px solid #f4f5f7;
                      border-bottom: none;
                  }
              }
          }
      }
  }
  </style>