<template>
  <div
    class="xd-range"
    :style="{width: uiwidth}"
  >
    <el-input
      v-model="start_value"
      type="number"
      :placeholder="placeholder[0]"
      class="input"
      :size="size"
      :disabled="disabled"
      @blur="startValueBlur"
      @input="startValueInput"
      clearable
    ></el-input>
    <span>-</span>
    <el-input
      v-model="end_value"
      type="number"
      :placeholder="placeholder[1]"
      class="input"
      :size="size"
      :disabled="disabled"
      @blur="endValueBlur"
      @input="endValueInput"
      clearable
    ></el-input>
  </div>
</template>

<script>
  /**
   * @description 区间数据
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.cn/#/zh-CN/component/radio
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Array} value 绑定输入数据  默认：[null,null]
   * @property {Array} placeholder 提示文案  ） 默认：['起始价格', '结束价格']
   * @property {Number} width 插件宽度  默认：300
   * @property {String} size 文本块显示大小 （必选） 默认：medium  其值：medium / small / mini
   * @property {Boolean} disabled 是否禁用 （必选） 默认：false
   *
   * @v-model value 区间数据 参数：(value)
   */

	export default {
		name: "xdRange",
    props: {
			value: {
				type: Array,
        default(){
					return [null,null]
        },
      },
      placeholder:{
				type: Array,
				default() {
					return ['起始价格', '结束价格']
				},
      },
      width: {
			  type: Number|String,
        default: 300,
      },
      size: {
        type: String,
        default: 'medium', //medium / small / mini
      },

      disabled: {
        type: Boolean,
        default: false,
      },

    },
    data(){
			return {
        start_value: '', //开始价格
        end_value: '',//结束价格
        uiwidth: '450px',
        timer:null,
      }
    },

    created(){
      if (this.value.length === 2) {
        this.start_value = this.value[0]?Number(this.value[0]):'';
        this.end_value = this.value[1]?Number(this.value[1]):''
      }
      this.$emit('input', [this.start_value,this.end_value]);

      //设置input宽度
      if(this.$xdHelper.checkVarType(this.width) === 'number') {
        this.uiwidth = this.width + 'px'
      }
      else {
        this.uiwidth = this.width
      }
    },
    watch: {
			value(val){
        if(val.length === 2) {
          this.start_value = this.value[0]?Number(this.value[0]):'';
          this.end_value = this.value[1]?Number(this.value[1]):''
        }
      },
    },
    methods:{
      startValueBlur(){
        let temp = this.$xdHelper.cloneDeep(this.value);
				temp.splice(0,1, this.start_value);
				this.$emit('input', temp);
      },
      endValueBlur(){
        let temp = this.$xdHelper.cloneDeep(this.value);
				temp.splice(1,1, this.end_value);
				this.$emit('input', temp);
      },
      startValueInput(e){
        if(this.timer){
          clearTimeout(this.timer);
          this.timer = null;
        }
        this.timer = setTimeout(()=>{
          this.startValueBlur()
          this.timer = null;
        },10)
      },
      endValueInput(e){
        if(this.timer){
          clearTimeout(this.timer);
          this.timer = null;
        }
        this.timer = setTimeout(()=>{
          this.endValueBlur()
          this.timer = null;
        },10)
      },
    },
	}
</script>

<style scoped lang="scss">
  .xd-range {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;


    & > span {
      margin: 0 10px;
      flex-shrink: 0;
    }

    & > .input {
      flex: 1;
      width: 0;
    }
  }


  @media screen and (max-width: 768px) {
    .xd-range {
      width: 100% !important;

      & > span {
        margin: 0 5px;
      }
    }

  }
</style>
