<template>
  <div class="dsk-amount-range" :class="{'dsk-amount-range-active' : iptActive}">
    <div class="dsk-amount-inner">
      <el-input v-model="amountArray[0]" :placeholder="startPlaceholder" class="dsk-range-start dsk-amount-ipt" @focus="iptActive = true" @blur="iptActive = false"></el-input>
      <div class="dsk-range-text">{{rangeText}}</div>
      <el-input v-model="amountArray[1]" :placeholder="endPlaceholder" class="dsk-range-end dsk-amount-ipt" @focus="iptActive = true" @blur="iptActive = false"></el-input>
    </div>
  </div>
</template>
<script>
export default {
  name: "dskAmountRange",
  props: {
    amountArray: {
      required: true,
      type: Array,
      default: () => []
    },
    // 区间文字
    rangeText: {
      type: String,
      default: "至"
    },
    // 开始区间输入框提示语
    startPlaceholder: {
      type: String,
      default: ""
    },
    // 结束区间输入框提示语
    endPlaceholder: {
      type: String,
      default: ""
    },
  },
  model: {
    prop: "amountArray",
    event: "amountRangeChange"
  },
  data() {
    return {
      iptActive: false
    };
  },
  //可访问data属性
  created() {

  },
  //计算集
  computed: {

  },
  //方法集
  methods: {

  },
}
</script>
<style lang="scss" scoped>
.dsk-amount-range {
  width: 268px;
  height: 32px;
  padding: 5px 0px;
  border-radius: 2px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;

  &.dsk-amount-range-active {
    border-color: #0081ff;
  }

  ::v-deep .dsk-amount-inner {
    display: flex;
    height: 100%;
    align-items: center;

    .dsk-range-start,
    .dsk-range-end {
      &.dsk-amount-ipt.el-input {
        line-height: 1;
        height: 100%;
        .el-input__inner {
          line-height: 1;
          height: 100%;
          width: 100%;
          padding: 0px 12px;
          border: none;
        }
      }
    }

    .dsk-range-text {
      color: rgba(35, 35, 35, 0.8);
    }
  }
}
</style>
