<template>
  <div class="enum-query">
    <!--select 类型-->
    <Select @on-change="changeEnum" v-if="type==='select'" v-model="selectedValue" style="min-width: 100px">
      <Option value="all" label="全部"></Option>
      <Option v-for="item in enums" :value="item.sysEnmuDataValue"
              :key="item.sysEnumDataId" :label="item.sysEnmuDataKey">
      </Option>
    </Select>
    <!--Radio类型-->
    <RadioGroup @on-change="changeEnum"  v-if="type==='radio'" v-model="selectedValue"
                :class="vertical===true? 'ivu-radio-group-vertical':''">
      <Radio  value="all" :label="allLabel"></Radio>
      <Radio v-for="item in enums" :key="item.sysEnumDataId" :label="item.sysEnmuDataKey"></Radio>
    </RadioGroup>
    <!--checkbox类型,使用此类型的时候，查询语句应使用 query_IN_-->
    <CheckboxGroup v-model="selectedValues" @on-change="changeEnum"  v-if="type==='checkbox'"
                   :class="vertical===true? 'enum-checkbox-group-vertical':''">
      <Checkbox v-for="item in enums" :key="item.sysEnumDataId" :label="item.sysEnmuDataKey"></Checkbox>
    </CheckboxGroup>
    <!--button类型-->
    <div v-if="type==='button'" v-model="selectedValue">
      <div class="enum-query-button">
        <div :class="{active:isActive === -1,commonClass}" @click="selectValue('',-1)">
          全部
          <span class="enum-item-separator">|</span>
        </div>
        <div v-for="(item,index) in enums"
             :key="item.sysEnumDataId"
             :value="item.sysEnmuDataValue"
             :class="{active:isActive === index,commonClass}"
             @click="selectValue(item.sysEnmuDataValue,index)"
        >
          {{item.sysEnmuDataKey}}
          <span class="enum-item-separator" v-if="index !== (enums.length-1)">|</span>
        </div>
      </div>
    </div>
    <!--single类型-->
    <!--例如列表中的列表和块状模式的选择，默认枚举的第一个数据为显示值,并被选中-->
    <Checkbox v-if="type==='single'" @on-change="changeEnum" v-model="check">
      {{enums[0].sysEnmuDataKey}}
    </Checkbox>
  </div>
</template>

<script>
  import {oneOf} from "../assist/assist";
  export default {
    name: "enum-query",
    model:{
      event:'on-change',
    },
    data(){
      return{
        enums: [], //从枚举列表读出的枚举数据
        allLabel: '全部',
        sysEnmuDataKey:'',
        selectedValue: 'all', //选中的数据
        selectedValues:[],//checkBox选中的值
        isActive:-1,
        commonClass: 'commonClass',
        check:true,
      }
    },
    props:{
      type:{
        validator (value) {//自定义验证函数
          return oneOf(value, ['select', 'radio', 'checkbox','single']);
        },
        default:'select',
      },
      vertical: {
        //只有type='checkbox'有效
        type: Boolean,
        default: false
      },
      enumJsonKey: String,
    },
    created(){
      this.enums =  this.$store.state.enums[this.enumJsonKey];
      if(this.type === 'radio'){
        this.selectedValue = this.allLabel;
      }
      this.selectedValues = [];
    },

    methods:{
      changeEnum(val){
        if(val === 'all' ){
          val = "";
        }
        if(this.type === 'select' || this.type === 'single'){
          this.$emit('on-change',val);
        }
        else{
          let value = "";
          if(this.type === 'radio'){
            for(let i = 0; i < this.enums.length; i++) {
              if(this.enums[i].sysEnmuDataKey === val) {
                value = this.enums[i].sysEnmuDataValue;
                break;
              }
            }
          }
          else if(this.type === 'checkbox'){
            if(val && val.length > 0){
              let flag = false;
              for(let i=0;i<val.length;i++){
                for(let j=0;j<this.enums.length;j++){
                  if(this.enums[j].sysEnmuDataKey === val[i]){
                    if(flag){
                      value += ','
                    }
                    value += this.enums[j].sysEnmuDataValue;
                    flag = true;
                    break;
                  }
                }
              }
            }
          }
          this.$emit('on-change',value);
        }
      },

      //type=button类型传值
      selectValue(value,index){
        this.$emit('on-change',value);
        this.isActive = index;
      }
    }
  }
</script>

<style scoped>
  .enum-checkbox-group-vertical >>> .ivu-checkbox-group-item{
    display: block;
  }
  .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;
  }
  .enum-query >>> .ivu-radio-input, .enum-form >>> .ivu-checkbox-input{
    width: 16px;
    height: 16px;
    opacity: 0;
    display: inline-block;
    background: none;
  }
  .enum-query >>> .ivu-radio-inner{
    border: none;
    background: url(../../assets/images/radios.png) no-repeat 0 0;
    background-position-x: 0;
    background-position-y: 0;
    height: 16px;
    width: 16px;
    display: -moz-inline-box;
    display: inline-block;
    text-align: center;
    transition: none;
  }
  .enum-query >>> .ivu-radio-inner::after{
    border-color: transparent;
    background-color: transparent;
  }
  .enum-query >>> .ivu-radio-focus{
    box-shadow: 0 0 0 0;
  }
  .enum-query>>> .ivu-radio-checked .ivu-radio-inner{
    background-position: 0 -18px;
  }
  .enum-query >>> .ivu-checkbox-inner{
    background: url(../../assets/images/checkboxes.png) no-repeat 0 0;
    height: 16px;
    width: 16px;
    display: inline-block;
    text-align: center;
  }
  .enum-query >>> .ivu-checkbox-checked:hover .ivu-checkbox-inner {
    border-color: transparent;
  }
  .enum-query>>> .ivu-checkbox-inner::after{
    border-color: transparent;
    background-color: transparent;
  }
  .enum-query >>> .ivu-checkbox-focus{
    box-shadow: 0 0 0 0;
  }
  .enum-query >>> .ivu-checkbox-checked .ivu-checkbox-inner{
    background-position: 0 -17px;
    border-color: transparent;
  }
</style>
