<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> 
                        <td>检索范围</td> 
                        <td>示例和备注</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(child,index) in item.children" :key="child.value+index">
                        <td>{{ child.value }}</td>
                        <td>{{ child.label }}</td>
                        <td>{{ child.type }}</td>
                        <td>
                            {{ getDBType(child.DBType)}}
                        </td>
                        <td><div v-html="examples[child.value]"></div></td>
                    </tr>
                </tbody>
            </table>
        </div>    
    </div>
    
    
  </div>
</template>

<script>
export default {
  components: {},
  props: {
  },
  data() {
    return {
        data:[],
        currentField:'',
        observer:null,
        DBTypes:this.$constants.DBTypes,
        isClick:true,
        examples:{
            TI:'TI=汽车',
            CL:'CL=汽车<br><div class="desc">外部专利检索检索主权利要求，内部专利检索检索权利要求全文</div>',
            FT:'ins=汽车',
            TX:'TX=(汽车 and 座椅)<br><div class="desc">支持申请号、公开号、公告号、发明人、申请人、权利人、标题、权利要求、说明书等相关内容检索</div>',
            AB:'AB=汽车',
            AN:'AN=CN202411470542.5',
            ANO:'ANO=CN202411470542.5',
            PNO:'PNO=CN119073855A',
            GN:'GN=CN119073855A',
            PN:'PN=CN119073855A',
            PRN:'PRN=JP2013270967',
            PCTAN:'PCTAN=US2017/023191',
            PT:'PT=(1 OR 8)<br><div class="desc">1 OR 8: 发明专利，2 OR 9: 新型，3: 外观（注意:仅中国专利）</div>',
            LG:'LG=1<div class="desc">1: 有效，2: 失效，3: 审中(注意:仅中国专利)；</div>',
            IC:'IC=A21B3/04',
            MC:'MC=汽车',
            IC1:'IC1=H',
            IC2:'IC2=H04',
            IC3:'IC3=H04W',
            IC4:'IC4=A21B3',
            LOC:'LOC=01-01',
            LOC1:'LOC1=01',
            CT:'CT=32D',
            EC:'EC=32D',
            AD:'AD=20010101<br>AD=2001~2002',
            GD:'GD=20010101<br>GD=2001~2002',
            PD:'PD=20010101<br>PD=2001~2002',
            PCTD:'PCTD=20010101<br>PCTD=2001~2002',
            PRD:'PRD=20010101<br>PRD=2001~2002',
            PCTENTRY_DATE:'PCTENTRY_DATE=20010101<br>PCTENTRY_DATE=2001~2002',
            IN:'IN=李书福',
            FI:'FI=李书福',
            PA:'PA=清华大学',
            FP:'FP=清华大学',
            PE:'PE=李书福',
            AT:'AT=吴观乐',
            AGN:'AGN=柳沈',
            DZ:'DZ=北京',
            // ADD:'ADD=北京',
            // RDD:'RDD=北京',
            CO:'CO=CN',
            GJ:'GJ=CN',
            CO:'CO=CN',
            PAC:'PAC=CN',
            PAP:'PAP=江苏',
            PAA:'PAA=苏州',
            PEC:'PEC=CN',
            PEP:'PEP=江苏',
            PEA:'PEA=苏州',
            DR:'DR=昆山',
            CC:'CC=CN119225639A',
            UCC:'UCC=CN119225639A',
        },
    };
  },
  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.3 // 当元素 10% 进入视口时触发
        });

        // 选择需要观察的元素
        const elements = this.$refs.searchField.childNodes;
        elements.forEach(element => {
            this.observer.observe(element);
        });
    },
    init(){
        var data = JSON.parse(JSON.stringify(this.$constants.searchField))
        var fields = []
        for(var i = 0;i<data.length;i++){
            var item = data[i]
            if(item.value == 'project'){
                continue
            }
            var children = []
            for(var j = 0;j<item.children.length;j++){
                var child = item.children[j]
                children.push(child)
                if(child.after && child.after.length){
                    children.push(...child.after)
                }
            }
            if(children && children.length>0){
                fields.push(
                    {
                        ...item,
                        children:children
                    }
                )
            }
      }
      this.data = fields
      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)
    },
    getDBType(DBTypes){
        return DBTypes.map(item=>{
            return this.DBTypes[item]
        }).join('、')
    },
  },
};
</script>
<style lang="scss">
    .search-helper-field{
        .desc{
            color:#1D8820;
            font-size: 12px;
            line-height: 16px;
        }
    }
</style>
<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;
            width:237px;
            &:nth-child(1){
                width: 120px;
            }
            &:nth-child(3){
                width: 120px;
            }
        }
        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>