<template>
  <a-input-group class="input-range-con">
      <a-row >
        <a-col :span="11">
          <!-- <a-input :value="datas0" @input="(...arg)=>{_input(0,...arg)}" /> -->
          <a-input v-model="datas0" v-bind="$attrs"/>
        </a-col>
        <a-col :span="2" class="Hyphen">~</a-col>
        <a-col :span="11">
          <a-input v-model="datas1" v-bind="$attrs"/>
        </a-col>
      </a-row>
    </a-input-group>
</template>

<script>
export default {
  name:'PInputRange',
  props: {
    value:{type:Array, default: ['测试值1','测试值2']},
    showHelp:{type:Boolean, default: () => { return false }}
  },
  data(){
    return {
      datas0:'',
      datas1:''
    }
  },
  watch:{
    value: {
      handler(val) {
        if(Object.prototype.toString.call(val)==='[object Array]'){
          this.datas0 = val[0] || undefined
          this.datas1 = val[1] || undefined
        }
        // else {
        //   throw "当前的值需要传入一个两个元素的数组"
        // }

      },
      deep: true,
      immediate: true
    },
    datas0: {
      handler(val) {
        this.$emit('change.value',[this.datas0,this.datas1 ] )
        this.$emit('change', [this.datas0,this.datas1 ]);
        this.$emit('input', [this.datas0,this.datas1 ]);
      },
      deep: true,
      immediate: true
    },
    datas1: {
      handler(val) {
        this.$emit('change.value',[this.datas0,this.datas1 ] )
        this.$emit('change', [this.datas0,this.datas1 ]);
        this.$emit('input', [this.datas0,this.datas1 ]);
      },
      deep: true,
      immediate: true
    },
  },
  mounted() {
    if(this.$isShowHelp == true &&this.showHelp == true){
      console.log(`
      组件名称：
          PInputRange
      使用方法：
          <p-InputRange v-model="['测试值1','测试值2']"> </p-InputRange>
      props参数说明：
          props:{
            // 此参数可选  用于相应组件的变化事件  此事件的参数为 当前切换的索引值，索引从0开始  
            value: {type: Array},
          },
      `)
    }
  },
  methods: {
  }
}
</script>

<style lang="less">
.input-range-con{
  .Hyphen{
    display: flex;
    justify-content: center;
    align-items:center;
    height: 100%;
    padding: 6px;
  }
}
</style>
