<template>
  <div class="input-range-container" :style="{width: width}" :class="{disabled: disabled}">
    <el-input
      v-model="startData"
      :disabled="disabled"
      :style="{width: clearable ? 'calc(50% - 25px)': 'calc(50% - 10px)' }"
      @change="handlerChange"
      :placeholder="placeholder.split('-')[0]"
    ></el-input>
    <span class="range">{{ rangeSeparator }}</span>
    <el-input
      v-model="endData"
      :disabled="disabled"
      :style="{width: clearable ? 'calc(50% - 25px)': 'calc(50% - 10px)' }"
      @change="handlerChange"
      :placeholder="placeholder.split('-')[1]"
    ></el-input>
    <el-button class="clear-btn" link v-if="clearable" @click="handlerClear" :disabled="disabled">
      <el-icon><CircleClose /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { nextTick } from 'vue';

const props = defineProps({
  width: {
    type: String,
    default: '300px',
  },
  rangeSeparator: {
    type: String,
    default: '至'
  },
  clearable: {
    type: Boolean,
    default: true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: '开始-结束'
  },
  // 当前的值
  modelValue: Array,
})
const startData = ref('')
const endData = ref('')
// 双向绑定-设置modelValue的值
const emit = defineEmits(['update:modelValue']);
const setModelValue = (val=[startData.value, endData.value]) => {
  emit('update:modelValue', val)
}
watch(() => props.modelValue, (val) => {
  if (val && val.length === 2) {
    startData.value = val[0]
    endData.value = val[1]
  } else {
    startData.value = ''
    endData.value = ''
  }
},{immediate: true, deep: true})

// 清空
const handlerClear = () => {
  console.log('清空')
  startData.value = ''
  endData.value = ''
  setModelValue()
  handlerChange()
}
// change事件
const handlerChange = () => {
  // 触发回调change事件
  emit('change', [startData.value, endData.value])
  setModelValue()
}
nextTick(()=>{
  setModelValue()
})
</script>

<style lang="scss" scoped>
.input-range-container{
  min-width: 250px !important;
  display: inline-block;
  border: 1px solid var(--el-input-border-color, var(--el-border-color));
  border-radius: 3px;
  height: 32px;
  line-height: 32px;
  transition: all 0.25s;
  background: #fff;
  .range{
    display: inline-block;
    width: 20px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    vertical-align: top;
    color: #a8abb2;
  }
  .clear-btn{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    vertical-align: top;
  }
  >.el-input{
    display: inline-block;
    vertical-align: top;
    height: 30px;
    --el-input-height:30px;
    text-align: center;
  }
  :deep(.el-input__wrapper){
    box-shadow: none;
    text-align: center;
    background: transparent;
    .el-input__inner{
      text-align: center;
    }
  }
}
.disabled{
  background: #f5f7fa;
}
.input-range-container:focus-within{
  border: 1px solid var(--el-color-primary) !important;
}
</style>