<template>
  <div>
    <div v-if="type === 'select'" class="number-query">
      <Select v-model="selectValue" @on-change="numQuery" class="select-wrap">
        <Option value="all">全部</Option>
        <Option v-for="(item,index) in section"
                :key="item.value"
                :value="item.value"
        >{{item.label}}</Option>
        <Option value="custom"> 自定义 </Option>
      </Select>
      <div  v-show="isShow" class="custom-wrap">
        <Input  clearable v-model="leftNum"  @on-clear = 'clearLeftNum' style="margin-left: 10px"></Input>
        <span>-</span>
        <Input  clearable v-model="rightNum" @on-clear = 'clearRightNum' class="right-input"></Input>
        <Icon type="ios-search" size="16" class="search-icon" @click="numCustomQuery" />
      </div>
    </div>
    <div   v-if="type==='button'" class="enum-query-button">
      <div :class="{active:isActive === -1,commonClass}" @click="submitNum('all',-1)">
        全部
        <span class="enum-item-separator">|</span>
      </div>
      <div v-for="(item,index) in section"
           :key="item.value"
           :value="item.value"
           @click="submitNum(item.value,index)"
           :class="{active:isActive === index,commonClass}">
        {{item.label}}
        <span class="enum-item-separator" v-if="index !== (section.length-1)">|</span>
      </div>
      <div  class="custom-wrap">
        <Input  clearable v-model="leftNum"  @on-clear = 'clearLeftNum' @on-change="isActive = -2;"  style="margin-left: 10px"></Input>
        <span>-</span>
        <Input  clearable v-model="rightNum" @on-clear = 'clearRightNum' @on-change="isActive = -2;" class="right-input"></Input>
        <Icon type="ios-search" size="16" class="search-icon" @click="numCustomQuery" />
      </div>
    </div>
  </div>
</template>
<script>
  import {oneOf} from "../assist/assist";
  export default{
    model:{
      event:'on-change',
    },
    props:{
      field:String, //查询字段
      section:Array, //分段定义
      type:{
        String,
        validator (value) {//自定义验证函数
          return oneOf(value, ['select', 'button']);
        },
        default:'select',
      }, //组件类型
    },
    data(){
      return{
        isActive:-1,
        isShow:false,
        leftNum:'',
        rightNum:'',
        selectValue:'all',
        commonClass: 'commonClass',
      }
    },
    methods: {
      //查询方法
      numQuery(val){
        this.isShow = false;
        if(val === 'all' ){
          val = "";
        }
        let selectNum = val.replace(/\s+/g,"");
        if(selectNum==='custom'){
          this.leftNum = "";
          this.rightNum = "";
          this.isShow = true;
        }else{
          let startNum = "" ; let endNum = "";
          if(selectNum.indexOf("LT")===0){
            endNum = parseInt(selectNum.slice(2))
          }else if(selectNum.indexOf("GE")===0){
            startNum = parseInt(selectNum.slice(2))
          }else if(selectNum.indexOf("-")!==-1){
            startNum =  parseInt(selectNum.split("-")[0]);
            endNum =  parseInt(selectNum.split("-")[1])
          }
          let queryNum = {
            sub:startNum,
            upper:endNum,
            name:this.field
          }
          this.$emit("on-change",queryNum);
        }
        },

      //自定义查询
      numCustomQuery(){
        if(!this.leftNum && !this.rightNum){
          this.isActive = -1;
        }
        let queryNum = {
          sub:this.leftNum.replace(/\s+/g,""),
          upper:this.rightNum.replace(/\s+/g,""),
          name:this.field
        };
        this.$emit("on-change",queryNum);
      },

      //清除input数据时查询,iview 版本升级后才能使用
      clearLeftNum(){
        this.leftNum = "";
        this.numCustomQuery();
      },

      clearRightNum(){
        this.rightNum = "";
        this.numCustomQuery();
      },
      //type=button点击事件
      submitNum(value,index){
        this.leftNum = "";
        this.rightNum = "";
        this.isActive = index;
        let selectNum = value;
        this.numQuery(selectNum);
      },
    }
  }
</script>
<style scoped>
  .number-query{
    display: flex;
    flex-wrap: wrap;
  }
  .number-query .select-wrap{
    width: 120px;
  }
  .number-query >>> .ivu-input{
    width: 90px;
  }
  .custom-wrap{
    display: flex;
    flex-wrap: wrap;
  }
  .custom-wrap >>> .ivu-input,.custom-wrap >>> .ivu-input-wrapper{
    width: 60px;
  }
  .custom-wrap span{
    width: 20px;
    text-align: center;
  }
  .right-input >>> .ivu-input{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
  }
  .search-icon{
    line-height: 32px;
    height: 32px;
    color: #808695;
    border: 1px solid #dcdee2;
    background-color: #f8f8f9; width: 30px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .enum-query-button{
    display: -webkit-box;
    margin: 0;
    cursor: pointer;
  }
  .commonClass{
    color: #2b85e4;
    margin: 0 15px 0 0;
    font-size: 13px;
  }
  .active{
    color: red;
  }
  .active > .enum-item-separator{
    color: #2b85e4;
  }
  .enum-item-separator{
    margin-left: 5px;
  }
  .number-query >>> .ivu-select-selected-value {
    font-size: 12px
  }
</style>
