<template>
  <div class="customSearch height_100" v-DivHeight="getDivHeight">
    <el-container style=" border: 1px solid #eee" :style="{height:tableHeight+'px'}">
        <el-aside v-if="DBType == 'WD'">
             <div>
                <div class="clearfix">
                    <span><el-checkbox v-model="checked" @change="change">全部国家地区</el-checkbox></span>
                    <span style="float: right; padding: 3px 0" type="text">{{ checkList.length }}/{{countryList1.length}}</span>
                </div>
                    <div style="padding:10px">
                      <el-input style="width:100%" v-model="suggest" @input="querySearch" placeholder="请输入内容"></el-input>
                    </div>
                    <div style="overflow-y:auto;overflow-x:hidden;" :style="{height:tableHeight-120+'px'}">
                       <el-checkbox-group v-model="checkList">
                        <div v-for="item in countryList1" :key="item.value" class="item">
                            <el-checkbox :label="item.value" :disabled="checked">{{ item.label }}({{ item.value }})</el-checkbox>
                        </div>
                            
                        </el-checkbox-group> 
                    </div>
                     
             </div>
        </el-aside>
        <el-main>
            <div>
                <myFormSearch ref="myFormSearch" :list="(editData && editData.component == 'customSearch')?editData.data:list" :field="field" :searchValue="true" @search="search">
                  <template v-slot:default="scope">
                    <div v-if="scope.row.field == 'projectName'" style="width:100%">
                      <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>
                  </template>
                </myFormSearch>
            </div>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
import mixins from './mixins'
export default {
  name:'customSearch',
  components: {
  },
  mixins: [ getTableHeight,mixins],
  props: ['countryList','DBType','selected','editData'],
  data() {
    return {
      list:[],
        
        checkList:[],
        checked:false,
        //搜索值
        field:JSON.parse(JSON.stringify(this.$constants.searchField)),
        countryList1:[],
        suggest:'',
    };
  },
  watch: {
    'checkList'(val){
      if(val.length == this.countryList1.length){
        this.checked = true
      }else{
        this.checked = false
      }
    },
    DBType(){
      this.getField()
    },
    'countryList'(){
      this.countryList1 = this.countryList.filter(item=>item.value!='CN')
    },
    'selected'(val){
      if(this.selected){
        this.checkList = JSON.parse(JSON.stringify(this.selected))
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    if(this.selected){
      this.checkList = JSON.parse(JSON.stringify(this.selected))
    }
    this.countryList1 = this.countryList.filter(item=>item.value!='CN')
    this.getField()
    if(this.editData && this.editData.component == 'customSearch'){
      if(this.editData.checkList){
        this.checkList = this.editData.checkList
      }
      var obj = this.initProject(this.editData.otherCondition)  
      if(obj && !this.editData.data.find(item=>{return item.field == 'projectName'})){
        this.editData.data.push(obj)
      }
    }
  },
  methods: {
    querySearch() {
        var restaurants = this.countryList.filter(item=>item.value!='CN')
        var results = this.suggest ? restaurants.filter(this.createFilter(this.suggest)) : restaurants;
        this.countryList1 = results
       
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.label.indexOf(queryString) !== -1 || restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
    getField(){
      // var a = JSON.parse(JSON.stringify(this.$constants.searchField))
      // this.field = a.map(item=>{ 
      //   item.children = item.children.filter(item1 =>{return item1.value!='GJ' && item1.type != (this.DBType != 'WD'?'2':'1')}) 
      //   return item
      // }).filter(item=>{
      //   return item.children.length>0
      // })
      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
        }
        var children = []
        for(var j = 0;j<item.children.length;j++){
            var child = item.children[j]
            if(child.value=='GJ' || child.DBType.indexOf(this.DBType)==-1){
                continue;
            }
            children.push(child)
            if(child.after && child.after.length){
              children.push(...child.after)
            }
        }
        if(children && children.length>0){
          fields.push(
            {
              ...item,
              children:children
            }
          )
        }
      }
      this.field = fields
    },
    search(val,data){
      var params = {
        data:data,
        DBType:this.DBType,
        component:'customSearch'
      }
      if(this.projectId){
        params.otherCondition = {
            projectId:this.projectId,
            projectName:this.projectName,
            show:`projectName=(${this.projectName})`,
            search:`projectId=(${this.projectId})`
        }
      }
      if(this.DBType == 'WD' && this.checkList.length>0){
        params.checkList = this.checkList
        if(val){
          if(this.checkList.length==1){
            var a = `GJ=${this.checkList[0]}`
          }else if(!this.checked){
            var a = `GJ=(${this.checkList.join(" OR ")})`
          }else{
            var a = ''
          }
          if(a){
            var str = `${val} AND ${a}`
          }else{
             var str = `${val}`
          }
          
        }else{
          if(this.checkList.length==1){
            var str = `GJ=${this.checkList[0]}`
          }else if(!this.checked){
            var str = `GJ=(${this.checkList.join(" OR ")})`
          }else{
            var str = ''
          }
        }
        this.$emit('search',str,params)
      }else{
        this.$emit('search',`${val?val:''}`,params)
      }
      
    },
    search1(){
      this.$refs.myFormSearch.search2()
    },
    change(val){
      if(val){
        this.checkList = this.countryList1.filter(item=>item.value!='CN').map(item=>item.value)
      }else{
        this.checkList = []
      }
    },
  },
};
</script>
<style lang="scss" scoped>

  .clearfix {
    // padding-left:20px ;
    padding:10px 20px ;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item{
    padding:10px 20px;
  }
</style>