<template>
  <div class="advancedSearch">
    <div v-if="DBType!='CN' && DBType!='WD'" style="width:100%;display:flex;align-items:center;margin-bottom:10px;">
        <div style="min-width:100px">专利数据库：</div>
        <el-select v-model.number="projectId" @change="changeProject" style="width:100%" size="small" filterable remote clearable placeholder="请选择" v-SelectLazyLoading="lazyLoading" :remote-method="remoteMethod" @focus="remoteMethod('')">
            <el-option
                v-for="item in projectQuery.data"
                :key="item.id"
                :label="item.name"
                :value="parseInt(item.id)"
            >
            </el-option>
        </el-select>
    </div>
    <div>
        <el-input type="textarea" v-model="condition" :rows="3" placeholder='高级检索语句，例：TI=(石墨烯 NOT 石墨烯薄膜 OR "graphene film") AND AD=2018 AND GD=20180205~20190101'></el-input>
        <div style="display:flex;justify-content: flex-end;margin-top:20px">
            <el-button type="danger" plain size="small" style="width:100px" @click="cancel">清空</el-button>
            <el-button type="primary" size="small" style="width:100px" @click="search">检索</el-button>
        </div>
    </div>
    <div>
        <!-- <div>
            <div><b>表达式与语法：</b></div>
            检索条件表达式,可支持AND、OR、NOT等逻辑符号(不区分大小写),其中:<br>
            1、如果检索条件中含有空格或者换行且需要作为一个整体条件查询时需要使用双引号括起来,例如:<span class="red">TI=(石墨烯 NOT 石墨烯薄膜 OR "graphene film")</span><br>
            2、如果检索条件中包含多个检索条件,则需要使用（）括起来；例如：<span class="red">TI =(NOT 晶体管 AND  计算机 OR 电子)</span><br>
            3、号码与人如果需要查询多个可以使用空格分割;例如：<span class="red">PN=(CN106455703B CN203913378U)</span><br>
            4、日期栏位的值支持yyyy、yyyyMM、 yyyyMMdd等格式以及多种范围运算符(=、>、>=、<、<=);例如：<span class="red">AD=20060202~20090101;AD>2006;AD<=2015等</span><br>
            5、专利类型(PT)栏位的值包括:1、8 为发明 检索发明,2、9 为新型,3 为外观（注意:仅中国专利）；例如：<span class="red">PT=1</span><br>
            6、法律状态(LG)栏位的值包括:1: 有效、2: 失效、3: 审中(注意:仅中国专利)；例如：<span class="red">LG=1</span><br>
            7、国家(地区)相关栏位的值为国家地区代码，需要大写，例如:CN代表中国、US代表美国、JP代表日本等;<br>
        </div> -->
        <div>
            <!-- <div><b>检索栏位包括：</b></div>
            <div class="field">
                <p v-for="item in field.filter(item=>{return item.DBType.indexOf(DBType)!=-1 && item.value!='projectName'})" :key="item.label"><span style="color:red">{{ item.value }}</span>：{{ item.label }}</p>
            </div> -->
            <div style="margin:15px 0;"><b>省市代码（仅中国专利）：</b></div>
            <div v-html="changeRed('province')" style="display:flex;flex-wrap:wrap;line-height:1.5em;">
               
            </div>
            <div style="margin:15px 0;"><b>国别代码：</b></div>
            <div style="display:flex;flex-wrap:wrap;justify-content: space-between;line-height:1.5em;">
                <span v-for="(item) in countryList" :key="item.value" style="margin:0 10px;"><span class="red">{{ item.value }}</span><span style="margin-left:10px;">{{ item.label }}</span></span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import mixins from './mixins'
export default {
    name:'AdvancedSearch',
  components: {},
  mixins: [ mixins],
  props:['countryList','DBType','editData'],
  data() {
    return {
        condition:'',
        field:this.$constants.searchField,
    };
  },
  watch: {
  },
  computed: {},
  
  created() {},
  mounted() {
    this.getField()
    if(this.editData && this.editData.component == 'AdvancedSearch'){
      if(this.editData.data){
        this.$set(this,'condition',this.editData.data)
      } 
      this.initProject(this.editData.otherCondition)      
    }
  },
  methods: {
    getField(){
      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.DBType.indexOf(this.DBType)==-1){
          continue
        }
        for(var j = 0;j<item.children.length;j++){
            var child = item.children[j]
            if(child.DBType.indexOf(this.DBType)==-1){
                continue;
            }
            fields.push(child)
            if(child.after && child.after.length){
                fields.push(...child.after)
            }
        }
      }
      this.field = fields
    },
    changeRed(val){
        if(val == 'province'){
            // var str = '11 北京 12 天津 13 河北 14 山西 15 内蒙 21 辽宁 22 吉林 23 黑龙江 31 上海 32 江苏 33'
            //         +'浙江 34 安徽 35 福建 36 江西 37 山东 41 河南 42 湖北 43 湖南 44 广东 45 广西 51 四' 
            //         +'川 52 贵州 53 云南 54 西藏 61 陕西 62 甘肃 63 青海 64 宁夏 65 新疆 66 海南 71 台'
            //         +'湾 81 广州 83 武汉 85 重庆 87 西安 89 沈阳 91 大连 93 哈尔滨 94 深圳 95 青岛 97 宁'
            //         +'波 HK 香港'
            var obj = {
                "11": "北京",
                "12": "天津",
                "13": "河北",
                "14": "山西",
                "15": "内蒙",
                "21": "辽宁",
                "22": "吉林",
                "23": "黑龙江",
                "31": "上海",
                "32": "江苏",
                "33": "浙江",
                "34": "安徽",
                "35": "福建",
                "36": "江西",
                "37": "山东",
                "41": "河南",
                "42": "湖北",
                "43": "湖南",
                "44": "广东",
                "45": "广西",
                "51": "四川",
                "52": "贵州",
                "53": "云南",
                "54": "西藏",
                "61": "陕西",
                "62": "甘肃",
                "63": "青海",
                "64": "宁夏",
                "65": "新疆",
                "66": "海南",
                "71": "台湾",
                "81": "广州",
                "83": "武汉",
                "85": "重庆",
                "87": "西安",
                "89": "沈阳",
                "91": "大连",
                "93": "哈尔滨",
                "94": "深圳",
                "95": "青岛",
                "97": "宁波",
                "HK": "香港"
            }
            var str = ''
            for(let key in obj){
                str = str + `<span style="margin:0 10px;width:80px"><span style='color:red;'>${key}</span><span style="margin-left:10px">${obj[key]}</span></span>`
            }
            return str
        }
        return ''
        // return str.replace(regx,"<div style='color:red;'>&nbsp;$& </div>")
    },
    cancel(){
        this.condition = ''
    },
    search(){
        var a = this.condition
        // if(a.trim().indexOf('(')!=0){
        //     a = `${a}`
        // }
        var params = {
            DBType:this.DBType,
            component:'AdvancedSearch',
            data:a.trim()
        }
        if(this.projectId){
            params.otherCondition = {
                projectId:this.projectId,
                projectName:this.projectName,
                show:`projectName=(${this.projectName})`,
                search:`projectId=(${this.projectId})`
            }
        }
        this.$emit('search',a.trim(),params)
    },
  },
};
</script>
<style lang="scss" scoped>
.advancedSearch{
    padding: 10px;
}
.field{
    display: flex;
    flex-wrap:wrap;
    p{
        width:200px;
        margin:5px;
    }
}
.red{
    color:red
}
</style>