<template>
    <div style="padding:10px" class="mySearch">
        <!-- 表单检索 -->
        <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.label]"
                                        :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="" > -->
                                <slot :row="list[i]">
                                    <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" @change="getShowLabel(list[i])" 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%">
                                        <myTextarea size='small' style="width:100%;" v-model="list[i].value" :placeholder="list[i].placeholder"></myTextarea>
                                        <!-- <el-input class="autoInput" size='small' style="width:100%;" v-model="list[i].value" :placeholder="list[i].placeholder"></el-input>  -->
                                    </div>
                                </slot>
                               
                              
                                <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:80px" v-if="!searchResult">
                        <!-- <span v-if="list.length==1" style="opacity: 0;"> 内容 </span> -->
                        <span v-if="list.length==1" class="btns"> 
                            <el-button size="small" @click="add(i)"><i class="el-icon-plus"></i></el-button>
                            <el-button size="small" @click="deleteList(i)" class="pointerEvents" style="opacity:0;"><i class="el-icon-delete"></i></el-button>
                        </span>
                        <span v-else class="btns">
                            <el-button size="small" @click="add(i)"><i class="el-icon-plus"></i></el-button>
                            <el-button size="small" @click="deleteList(i)"><i class="el-icon-delete"></i></el-button>
                        </span>
                        
                    </div>
                </div>

            </div>
            <div class="button_group" v-if="showOperate">
                <!-- <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>
import myTextarea from '../textarea/index.vue'
export default {
    components:{
        myTextarea
    },
    props:{
        //显示操作
        showOperate:{
            type:Boolean,
            default:()=>{
                return true
            }
        },
        //逻辑符
        logical:{
            type:Array,
            default: ()=>{ return [
                {
                    name:'并且',
                    label:'AND',
                    value:'AND',
                },
                {
                    name:'或者',
                    label:'OR',
                    value:'OR',
                },
                {
                    name:'非',
                    label:'NOT',
                    value:'AND NOT'
                },
            ] }
        },
        //逻辑符配置
        logicalProps:{
            type:Object,
            default:()=>{
                return {
                    label:'label',
                    value:'value',
                }
            }
        },
        //运算符
        operator:{
            type:Array,
            default: ()=>{ return [
                {
                    label:'=',
                    value:'='
                },
                {
                    label:'>',
                    value:'>',
                    
                },
                {
                    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.filedList =[].concat(...this.field.map(item=>{return item.children}))
            if(this.list.length == 0){
                this.rule()
            }
            this.getFieldObj()
            // this.list.length = 0
            
        },
        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: {
        getShowLabel(row){
            row.show.value = []
            if(!row.value){
                return
            }
            var arr = this.constants[row.field]
            row.value.forEach(value=>{
                var obj = arr.find(item=>{
                    return item.value == value
                })
                row.show.value.push(obj?obj.label:'')
            })
        },
        change(list){
            var a = this.filedList.find(item=>{
                return item.value == list.field
            })
            list.dataType = a.dataType
            list.placeholder = a.placeholder
            list.show.label = a.label
            if(list.dataType==2 || list.dataType==3){
                var type = list.dataType
                this.$set(list,'value', '')
                this.$set(list,'dataType',0)
                this.$nextTick(()=>{
                    this.$set(list,'value', [])
                    this.$set(list,'dataType',type)
                })
                
            }else{
                this.$set(list,'value', '')
            }
        },
        getFieldObj(field='TX'){
            var obj = {
                field:field,
                logical:this.logical.length>0?this.logical[0][this.logicalProps.value]:'',
                operator:this.operator.length>0?this.operator[0][this.operatorProps.value]:'',
            }
            var a = this.filedList.find(item=>{
                return item.value == field
            })
            if(!a){
                obj.dataType = 1
                obj.field='TX'
                obj.placeholder='请输入关键词，例：石墨烯 OR &quot;computer and phone&quot;'
                obj.value = ''
                obj.show = {
                    label:'关键词'
                }
                return obj
            }
            obj.dataType = a.dataType
            obj.placeholder = a.placeholder
            obj.show = {
                label:a.label
            }
            if(a.dataType==2 || a.dataType==3){
                this.$set(obj,'value', [])
            }else{
                this.$set(obj,'value', '')
            }
            return obj
        },
        //校验
        rule(){
            if(this.list.length>=1){
                this.createSearch()
                return false
            }else{
                this.list.push(this.getFieldObj())
                // this.rule()
            }
        },
        //增加
        add(index){
            var obj = this.getFieldObj()
            if(index || index == 0){
                this.list.splice(index+1,0,obj)
                return
            }
            this.list.push(obj)
        },
        //鼠标悬浮文字提示
        getTitle(val){
            if(val){
                var obj = this.filedList.find(item=>{
                    return item.value == val
                })
                if(obj){
                    return obj.label + '('+ val + ')'
                }
                return '';
            }
        },
        //删除
        deleteList(index){
            this.list.splice(index,1)
        },
        //重置
        reset(){
            this.list = [
                this.getFieldObj(),
                // {
                //     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(),this.list)
    },
    // 二次检索和重新检索
    searchTwo(val) {
      var a = {
        searchStr: this.searchStr.trim(),
        data:this.list
      }
      if (val == 'repeat') {//二次检索
        a.isRepeat = true
      } else {//重新检索
        a.isRepeat = false
      }
      this.$emit('search', a)
    },
    },
}
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
.btns{
    display: flex;
    // align-items: center;
}
    .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>