<template>
    <div style="padding:10px">
        <!-- 表单检索 -->
        <div>
            <div class="content_border">
                <div v-for="(items,i) in list" :key="i" class="content"> 
                    <!-- <el-row :gutter="24"> -->
                        <!-- 逻辑符 -->
                        <!-- <el-col :span="5"> -->
                            <span style="width:150px" v-if="!searchResult">
                                <span v-if="i==0" style="opacity: 0;"> 内容 </span>
                                <el-select v-else v-model="list[i].logical" size='small' width='100%' >
                                    <el-option
                                        v-for="item in logical"
                                        :key="item[logicalProps.value]"
                                        :label="item[logicalProps.value]"
                                        :value="item[logicalProps.value]">
                                    </el-option>
                                </el-select>
                            </span>
                        <!-- </el-col> -->
                        <!-- 搜索条件 -->
                        <!-- <el-col :span="7"> -->
                            <!-- <el-select v-model="list[i].field" @change="change(list[i])" filterable size='small' style="width:250px" :title="getTitle(list[i].field)">
                                <el-option
                                    v-for="item in field"
                                    :key="item[fieldProps.value]"
                                    :label="item[fieldProps.label]+'('+item[fieldProps.value]+')'"
                                    :value="item[fieldProps.value]">
                                </el-option>
                            </el-select> -->
                            <el-cascader :options="field" v-model="list[i].field" :props="deftProps" filterable size='small' @change="change(list[i])" style="width:250px" :title="getTitle(list[i].field)" :show-all-levels="false"></el-cascader>
                        <!-- </el-col> -->
                        <!-- 运算符 -->
                        <!-- <el-col :span="3" style="padding:0"> -->
                            <el-select v-model="list[i].operator" size='small' style="width:150px" v-if="!searchResult">
                                <el-option
                                    v-for="item in operator"
                                    :key="item[operatorProps.value]"
                                    :label="item[operatorProps.label]"
                                    :value="item[operatorProps.value]">
                                </el-option>
                            </el-select>
                        <!-- </el-col> -->
                        <!-- 搜索值 -->
                        <!-- <el-col :span="9"> -->
                            <div style="width:100%;display: flex;justify-content: center;align-items: center;" >
                            <!-- <div style="" > -->
                                <div v-if="list[i].dataType==2" style="display:flex;width:100%">
                                    <el-date-picker
                                        v-model="list[i].value[0]"
                                        style="width:50%"
                                        type="date"
                                        size='small'
                                        value-format="yyyyMMdd"
                                        placeholder="开始，例：20000101">
                                    </el-date-picker>
                                    <el-date-picker
                                        style="width:50%"
                                        v-model="list[i].value[1]"
                                        type="date"
                                        size='small'
                                        value-format="yyyyMMdd"
                                        placeholder="结束，例：20001231">
                                    </el-date-picker>
                                </div>
                                <div v-else-if="list[i].dataType==3" style="width:100%">
                                    <el-select v-model="list[i].value" size="small" multiple filterable collapse-tags placeholder="请选择,可多选" style="width:100%">
                                        <el-option
                                            v-for="item in constants[list[i].field]"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div v-else style="width:100%"><el-input size='small' style="width:100%" v-model="list[i].value" :placeholder="list[i].placeholder"></el-input> </div>
                              
                                <template v-if="searchResult">
                                    <div style="display: flex;margin-left: 10px;">
                                      <el-button size="small" type="primary" @click="searchTwo('repeat')">二次检索</el-button>
                                      <el-button size="small" type="primary" @click="searchTwo('new')">重新检索</el-button>
                                    </div>
                                </template>
                              </div>
                        <!-- </el-col> -->
                    <!-- </el-row> -->
                    <div style="width:50px">
                        <span v-if="list.length==1" style="opacity: 0;"> 内容 </span>
                        <el-button v-else size="small" @click="deleteList(i)"><i class="el-icon-delete"></i></el-button>
                    </div>
                </div>

            </div>
            <div class="button_group" v-if="searchValue">
                <el-button size="small" type="primary" @click="add">增加</el-button>
                <el-button size="small" type="primary" @click="search2">检索</el-button>
                <el-button size="small" @click="reset">重置</el-button>
                <!-- <el-button size="small" @click="createSearch" v-if="searchValue">生成检索式</el-button> -->
            </div>
           
        </div>
        <!-- 检索式检索 -->
        <div v-if="searchValue">
            <p><b>检索式检索</b><span style="margin-left:10px">[例： TI=计算机 ]</span></p>
            <div>
                <el-input type="textarea" :rows="4" readonly v-model="searchStr"></el-input>
            </div>
            <!-- <div class="button_group">
                <el-button size="small" type="primary" @click="search2">检索</el-button>
            </div> -->
        </div>
    </div>
</template>
<script>
export default {
    props:{
        //逻辑符
        logical:{
            type:Array,
            default: ()=>{ return [
                {
                    label:'并且',
                    value:'&&'
                },
                {
                    label:'或者',
                    value:'||'
                },
            ] }
        },
        //逻辑符配置
        logicalProps:{
            type:Object,
            default:()=>{
                return {
                    label:'label',
                    value:'value',
                }
            }
        },
        //运算符
        operator:{
            type:Array,
            default: ()=>{ return [
                {
                    label:'=',
                    value:'='
                },
                {
                    label:'>',
                    value:'>'
                },
                {
                    label:'<',
                    value:'<'
                },
            ] }
        },
        //运算符配置
        operatorProps:{
            type:Object,
            default:()=>{
                return {
                    label:'label',
                    value:'value',
                }
            }
        },
        //搜索值
        field:{
            type:Array,
            default: ()=>{ return [] }
        },
        //搜索值配置
        fieldProps:{
            type:Object,
            default:()=>{
                return {
                    label:'label',
                    value:'value',
                }
            }
        },
        //是否展示检索式
        searchValue:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        //默认值
        list:{
            type:Array,
            default:()=>{
                return []
            }
        },
        // 是否是从检索结果页面进入,true是从检索结果页面进入
        searchResult: {
          type:Boolean,
          default: () => {
            return false
          }
        },
        // 国家及地区
        countryList: {
          type: Array,
          default: () => {
            return []
          }
        }
    },
    data() {
        return {
            // list:[],
            searchStr:'',
            constants:this.$constants,
            deftProps:{
                emitPath:false
            },
            filedList:[]
        }
    },
    watch:{
        field(){
            this.list.length = 0
            this.rule()
        },
        list: {
            handler(val) {
                this.createSearch()
            },
            deep: true,// 深度监听
        }
    },
    mounted() {
        this.filedList =[].concat(...this.field.map(item=>{return item.children}))
        this.rule()
        if (this.countryList) {
          let a = JSON.parse(JSON.stringify(this.countryList))
          this.constants.GJ=a.filter(item => {
            return item.value != 'CN'
          })
          // this.constants.GJ=this.countryList
        }
    },
    methods: {
        change(list){
            var a = this.filedList.find(item=>{
                return item.value == list.field
            })
            list.dataType = a.dataType
            list.placeholder = a.placeholder
            if(list.dataType==2 || list.dataType==3){
                this.$set(list,'value', [])
            }else{
                this.$set(list,'value', '')
            }
        },
        //校验
        rule(){
            if(this.list.length>=1){
                return false
            }else{
                this.list.push({
                    logical:this.logical.length>0?this.logical[0][this.logicalProps.value]:'',
                    // field:this.field.length>0?this.field[0][this.fieldProps.value]:'',
                    field:'PN',
                    placeholder:'请输入公开号，例：CN102860161 OR CN1526554846',
                    operator:this.operator.length>0?this.operator[0][this.operatorProps.value]:'',
                })
                // this.rule()
            }
        },
        //增加
        add(){
            this.list.push({
                logical:this.logical.length>0?this.logical[0][this.logicalProps.value]:'',
                // field:this.field.length>0?this.field[0][this.fieldProps.value]:'',
                field:'PN',
                placeholder:'请输入公开号，例：CN102860161 OR CN1526554846',
                operator:this.operator.length>0?this.operator[0][this.operatorProps.value]:'',
            },
            // {
            //     logical:this.logical.length>0?this.logical[0][this.logicalProps.value]:'',
            //     field:this.field.length>0?this.field[0][this.fieldProps.value]:'',
            //     operator:this.operator.length>0?this.operator[0][this.operatorProps.value]:''
            // }
            )
        },
        //鼠标悬浮文字提示
        getTitle(val){
            if(val){
                return this.filedList.filter(item=>{
                    return item.value == val
                })[0].label + '('+ val + ')'
            }
        },
        //删除
        deleteList(index){
            this.list.splice(index,1)
        },
        //重置
        reset(){
            this.list = [
                {
                    logical:this.logical.length>0?this.logical[0][this.logicalProps.value]:'',
                    // field:this.field.length>0?this.field[0][this.fieldProps.value]:'',
                    field:'PN',
                    placeholder:'请输入公开号，例：CN102860161 OR CN1526554846',
                    operator:this.operator.length>0?this.operator[0][this.operatorProps.value]:''
                },
                // {
                //     logical:this.logical.length>0?this.logical[0][this.logicalProps.value]:'',
                //     field:this.field.length>0?this.field[0][this.fieldProps.value]:'',
                //     operator:this.operator.length>0?this.operator[0][this.operatorProps.value]:''
                // }
            ]
        },
        //生成检索式
        createSearch(){
            if(this.list.length == 0){
                this.searchStr = ''
                return 
            }
            var str = ''
            if(!this.list[0].field || !this.list[0].operator){
                return false
            }
            var a = false
            this.list.forEach((item,index) => {
                if(item.dataType == 3){
                    if(item.value.length>0){
                        a = true
                        if(index == 0){
                            if(item.value.length == 1){
                                str = str +''+ item.field + item.operator  + '(' + item.value[0] + ')'
                            }else{
                                str = str +''+ item.field + item.operator +'(' + item.value.join(' OR ')+')'
                            }
                           
                        }else{
                            if(item.value.length == 1){
                                str = str + " "+ item.logical + ' '+ item.field + item.operator + item.value[0]
                            }else{
                                str = str + " "+ item.logical + ' '+ item.field + item.operator + '(' + item.value.join(" OR ")+')'
                            }
                            
                        }
                    }
                }else if(item.dataType == 2){
                    if(item.value.length>0){
                        if(!item.value[0] && !item.value[1]){

                        }else{
                            if(index == 0){
                                if( item.value[0] && item.value[1] ){
                                    str = str  + ''+ item.field + item.operator + '(' + item.value[0] +'~'+item.value[1]+')'
                                }else if(!item.value[0] || !item.value[1]){
                                    str = str  + ''+ item.field + item.operator + (item.value[0] || item.value[1])
                                }
                            }else{
                                if( item.value[0] && item.value[1] ){
                                    str = str + " "+ item.logical + ' '+ item.field + item.operator + '(' + item.value[0] +'~'+item.value[1]+')'
                                }else if(!item.value[0] || !item.value[1]){
                                    str = str + " "+ item.logical + ' '+ item.field + item.operator + (item.value[0] || item.value[1])
                                }
                            }
                            
                        }    
                    }
                }else{
                    if(item.value){
                        a = true
                        var a = item.value.replace(/("[^"]*"|'[^']*')/g,'')
                        var arr = a.match(/\s{1}and|AND|OR|or|NOT|not\s{1}/g)
                        if(arr&&arr.length>0){
                            if(index == 0){
                                str = str +''+ item.field + item.operator +'(' + item.value+')'
                            }else{
                                str = str + " "+ item.logical + ' '+ item.field + item.operator +'(' + item.value+')'
                            }
                        }else{
                            if(index == 0){
                                str = str +''+ item.field + item.operator  + item.value
                            }else{
                                str = str + " "+ item.logical + ' '+ item.field + item.operator  + item.value
                            }
                        }
                    }
                        
                }
                
            });
            // if(!a){
            //     this.$message.info('请输入要检索的内容')
            //     return false
            // }
            this.searchStr = str
        },
        //表单检索
        search1(){
            var str = ''
            if(!this.list[0].field || !this.list[0].operator){
                return false
            }
            var a = false
            this.list.forEach((item,index) => {
                if(item.value){
                    a = true
                    if(index == 0){
                        str = str +'('+ item.field + item.operator + item.value+')'
                    }else{
                        str = str + item.logical + '('+ item.field + item.operator + item.value+')'
                    }
                }
            });
            if(!a){
                this.$message.info('请输入要检索的内容')
                return false
            }
            this.$emit('search',str)
        },
    //检索式检索
    search2() {
      this.$emit('search', this.searchStr.trim())
    },
    // 二次检索和重新检索
    searchTwo(val) {
      var a = {
        searchStr: this.searchStr.trim(),
      }
      if (val == 'repeat') {//二次检索
        a.isRepeat = true
      } else {//重新检索
        a.isRepeat = false
      }
      this.$emit('search', a)
    },
    },
}
</script>
<style lang="scss" scoped>
    .content_border{
        width:100%;
        // min-width: 1500px;
      //  display: flex;
       align-items: center; 
       justify-content: flex-start;
       flex-wrap:wrap;
    }
    .content_border .content{
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        // margin-bottom: 10px;
        padding-right:20px;
        
    }
    .content_border .content>*{
        padding:10px
    }
    .button_group{
        margin-top:20px;
        margin-right:20px;
        display: flex;
        justify-content: flex-end;
    }
    .button_group .el-button{
        width:92px
    }
    
</style>